Unifying Navigation Architecture Across Breakpoints
A restructure of the top section of the homepage for a seamless experience across devices while balancing editorial and advertising needs.
Company: The Washington Post
Timeline: Nov 2024 - Mar 2025
Role: Co-designer
Our Challenge
How can we create cohesion and visual balance in our homepage header across all breakpoints—from desktop down to mobile?
The top section of The Washington Post’s homepage was disjointed across five breakpoints–from desktop down to mobile. Without clear guidelines, navigation patterns varied widely between screen sizes. The challenge was compounded by the need to integrate a new advertisement format for wider breakpoints while maintaining visual balance and hierarchy throughout the experience.
Our Vision
Defining component behavior for all breakpoints to ensure users are able to access navigation intuitively, no matter the device size.
Working with principal product designer Ben Rubenstein, we combined his homepage design expertise with my component systems focus to balance editorial priorities, advertising needs, and technical constraints.
We envisioned a cohesive header design that would deliver three key outcomes:
A unified visual hierarchy that adapts seamlessly across all five breakpoints (from desktop to mobile), ensuring consistent and intuitive navigation for different devices.
Clear, documented component behavior rules that specify exactly when elements should display, hide, stack, or transform, eliminating ambiguity and creating a maintainable system for future iterations
A restructured top-of-page architecture that naturally integrates the new advertisement placement above the header while preserving editorial content hierarchy and maintaining an intuitive, uninterrupted user experience
The Process: Part I
Dissecting our homepage navigation and behavior, while comparing it with competitors
I began with comprehensive research, conducting a detailed heuristic analysis of our existing homepage and studying how industry leaders structured their digital experiences. This research informed my strategic framework, which prioritized a mobile-first methodology and truly responsive design.
Through regular working sessions with product design stakeholders, we refined our solutions collaboratively and iteratively. This cross-functional approach ensured we met technical constraints and business requirements while maintaining high product quality.
Compilation of ideas and considerations of homepage top section design based on industry standards.
The Process: Part II
Rebalancing the elements
Working closely with product, newsroom, and engineering teams, Ben and I developed a top-of-homepage design that balanced key elements across multiple breakpoints: the logo, tagline, leaderboard ad, two tile ads, main navigation, live and trending bar, and an occasional breaking news bar. We created a centered navigation layout that served as a clear focal point while keeping critical features easily accessible.
Documentation from our initial workshop combining collaborative brainstorming (left) to define pagination requirements with examples of pagination patterns from other company design system pages and websites (right) to inform our component design approach and accessibility standards.
Some edge cases which include tile ads and breaking news alert banner.
A key part of our process was building detailed prototypes in Figma to show the scroll behavior and interaction patterns we had in mind. Since scrolling is central to the homepage experience, we created prototypes that simulated real-world usage across all five breakpoints.
These prototypes demonstrated how navigation would adapt during scroll, how elements would reposition across breakpoints, and how advertisements would integrate seamlessly. They also became essential communication tools that aligned engineering teams on interaction behaviors and gave stakeholders a tangible preview of the final experience.
Prototype of the homepage and scroll behavior. The homepage covers the leaderboard ad, and the header appears and the trending bar stacks underneath.
These prototypes demonstrated how navigation would adapt during scroll, how elements would reposition across breakpoints, and how advertisements would integrate seamlessly. They became essential communication tools that aligned engineering teams on interaction behaviors and gave stakeholders a tangible preview of the final experience.
The Result
An improved navigational user experience
The redesign transformed The Washington Post's homepage experience by improving the top navigation and top-of-page layout across all breakpoints. Through a cleaner navigation structure and unified design system, we created an intuitive browsing experience that worked seamlessly on desktop, tablet, and mobile platforms while integrating essential business elements like advertisements without compromising user experience. Through strategic planning and cross-functional collaboration, we successfully delivered a comprehensive redesign that balanced stakeholder requirements while maintaining The Post's commitment to excellence.
Homepage at the five breakpoints, ranging from desktop to mobile.
Key takeaway
Interactive prototypes are essential communication tools for collaborating designers and for aligning with engineers.
This project presented unique challenges that required careful coordination and systematic documentation. Managing five breakpoints demanded meticulous attention to detail and clear communication protocols, especially with complicated component behaviors and layout requirements. The complexity of tracking when elements should display, hide, stack, or transform across different screen sizes made it essential to establish robust organizational systems.
The prototypes served as a shared visual language that bridged design intent and technical implementation, while the systematic documentation ensured nothing was lost in translation as we iterated through various solutions. This structured approach not only improved our partnership but also created assets that could be referenced by engineering teams throughout the implementation phase.