Are
Are
you
you
ready?
ready?
Well, what started as a "let's make this look better" project quickly snowballed into a full-blown mission to define a new visual identity and build the foundations for a company-wide design language. It was one of those projects that just kept getting bigger, and honestly, I was all for it.
Timeline
From research to final designs in 3 weeks I worked closely with my product managers & 2+ Devs to bring the new sparrow to life.
• Conducting competitive research.
• Collaborating with engineers to understand feasibility.
• Designing wireframes, Visuals, and Prototypes.
The original Sparrow website suffered from three core issues:
• Inconsistent Branding: The visual identity was fragmented, lacking a unified color palette,
typography, and style.
• Poor User Experience (UX): The site had confusing navigation and a lack of visual hierarchy, making it difficult for users to quickly understand the product's value proposition. Key information, such as USPs, wasn't effectively highlighted, leading to high bounce rates.
• Outdated Aesthetics: The design felt stale and failed to reflect Sparrow's modern, innovative technology, which was a significant mismatch with our tech-savvy target audience.
My central objective was to give the Sparrow brand a new look that felt premium, modern, and tech-savvy. I focused on creating a cohesive and consistent design language that could be carried from the marketing site to the product itself.
This was a lightbulb moment. Our design needed a unique visual hook, and our words needed to build a connection.
Step 3: Defining the New Sparrow Vibe
The Visual Hook: To give Sparrow that unique identity, I decided our "thing" would be playing with beautiful gradients and our own logo. It felt premium, modern, and techy—the exact vibe we were going for.
Typography: I needed a font duo that was stylish for the brand but also a workhorse for the actual product UI down the line.
For headings, I chose Aileron. It's modern, sleek, and has just the right amount of personality.
For all the body and UI copy, I went with Inter. It's famously versatile, super readable, and plays beautifully with Aileron. This strategic choice would make the transition from marketing site to product UI so much smoother later on.
💡 Putting It All Together: The Landing Page Tour
Okay, so I had my ingredients. Time to start cooking. I designed the landing page as a story, guiding the user from "What is this?" to "Okay, I need this."
Hero Section
I swear, I spent ages on this. I needed an image that was subtle but informative, cool-looking but not distracting. After what felt like a million iterations, I landed on using a stylized shot of the product UI, enhanced with our new gradient glow. It finally struck the right balance.
Okay, so I had my ingredients. Time to start cooking. I designed the landing page as a story, guiding the user from "What is this?" to "Okay, I need this."
Features & USPs
I created distinct sections to guide the user. The "Transform Your API Workflow" section used motion videos to showcase key functionalities, while "Unrivaled Features Built for Excellence" used a visually strong bento-grid to highlight USPs like Self-Hosting and AI Assistance.
Changelog
The "We Ship Every 2 Weeks" section was a strategic addition to build user trust and showcase our
rapid development cycle.
Challenges and Solutions
Hero Images Creation
The primary challenge was crafting a hero image that was both informative and visually appealing. My solution was to use a subtle product visual that delivered a direct message while using gradients and the brand logo to make it attractive and cohesive with the overall page.
Scalable Imagery for Content Cards
To address the need for unique yet consistent imagery for every blog or article, I devised a scalable solution. Instead of custom illustrations, I assigned different gradient shapes and colors to each content category:
Article: Blue & Purple Gradient
Blog: Cyan & Pink Gradient
News: Cyan & Green Gradient
This approach provided a distinct look for each content type while remaining on-brand and highly scalable.
Communicating Complex Animations
The landing page featured several modern, complex animations, including parallax scrolling and looping glow effects. To ensure the developers could replicate them accurately-
I provided them with Figma prototypes and CodePen references that visually and technically explained
the desired behavior.
Lessons I'm Taking With Me
This project was a whirlwind, and like any good adventure, I walked away with some valuable loot in the form
of lessons learned.
Closing Thoughts
And that's a wrap! The Sparrow website redesign was one of those genuinely satisfying projects that touched every part of the design process—from high-level strategy to the nerdiest pixel-level details. It was a massive undertaking, but hearing those positive feedback made every challenge worthwhile. We took a disconnected first impression and turned it into a sleek, cohesive experience that truly represents the quality
of the Sparrow product.
Thanks so much for taking the time to read through my process.
I hope it was insightful!
