Architecting a modern search system at scale
Yahoo Search is a daily destination for millions, yet its visual language was a mosaic of legacy tech debt and fragmented vertical designs. As the lead designer, I orchestrated a top-to-bottom architectural refresh of the search result page.
The goal was to transform a desktop-centric, hardcoded legacy system into a mobile-first, token-based design system that improves user trust through perceived quality. By the end of the project, we had collapsed implementation time from months to days and launched over twenty search page features in record time.
A collection of refreshed search components
Strategic challenge
Our production environment suffered from years of style drift where eight different verticals were building in silos. This fragmentation was a design problem and an engineering bottleneck. Hardcoded styles made even small visual updates risky and slow.
More importantly, our user research confirmed that users view visual polish as a direct proxy for search result quality. Our desktop-first legacy was eroding trust on mobile, making a modernization of both the front-end stack and the design language a business necessity.
The legacy mobile design offered poor hierarchy and stuffed everything into the page
Users reported being able to more quickly identify key data in the new design
Leadership and orchestration
At the principal level, my role focused on architecting the way our teams worked together. I led a multi-disciplinary squad consisting of five designers, a researcher, and a content designer. To move quickly, we adopted a hub-and-spoke governance model. Each vertical team built components for their specific needs but contributed them back to a shared library for universal use.
I partnered closely with the VP of Product and Director of Engineering to ensure this design system launch coincided with a migration to a modern front-end stack, aligning our visual goals with technical velocity.
Navigating the system and brand trade-off
A key leadership challenge arose with the AI summary vertical. Stakeholders wanted high-impact branding for this feature to ensure it retained prominence and felt distinct from standard search results – potentially undermining our disciplined approach. I negotiated a specialized visual treatment for this vertical to maintain its brand equity while ensuring the underlying token architecture for typography and spacing still adhered to the framework. This preserved overall cohesion without blocking the innovation required for our newest features.
The craft of systems
Visual design at this scale is an exercise in editing. We moved from a collection of random styles to a strict, principle-based language. We successfully consolidated twelve disparate button styles down to five core variants and reduced a fragmented gray palette of over ten shades to four core neutral tokens.
This wasn't just about aesthetics; we replaced fifteen different guided search carousels with a single adaptive component. This level of consolidation allowed us to use a common Yahoo design token library to bridge the gap between Figma and the new front-end stack.
These are just line and stroke values
Validating perceived quality
Our qualitative user research showed a clear preference for the new design. Users noted that the cleaner interface and improved hierarchy made the search results feel more "trustworthy" and "professional." This validated our initial hypothesis that visual craft is inextricably linked to the user's perception of search quality.
“[The redesigned] version feels better and cleaner to me. I believe it more because it feels more put together.”
“I just liked the format of [the redesigned] page more. It’s more organized with the modular box. It was cleaner. I didn’t have to look quite as hard even though, like, the difference is honestly really negligible.”
“I searched for Zoe Kravitz and there was a section that clearly stated all of her past relationships. Whereas in the other one, I felt like I had to do a bit more searching.”
Round one impact and results
The transition to a composable system delivered exponential efficiency for the organization. What used to take over a month of engineering time collapsed into a matter of days. This allowed the team to build over twenty search features in less than two months.
The metrics from the first few weeks after launch were encouraging:
News on desktop saw engagement surge due to improved hierarchy and bolder headlines, while local and sports verticals saw click-through rate increases driven by a richer visual experience and clearer calls to action.
In the spirit of iterative ownership, we are now using early signals from our AI summary and company displays—which saw some initial drops in engagement—to lead a second round of redesigns. This ensures the system remains a living entity that adapts to user behavior.