Lead, UI, Facilitator
How might we create a consistent, scalable page header component that helps users quickly understand their location, page context and available actions?
Collaborate with design team to create a scalable page header that covers 90% of use cases while reducing the need for custom variations
As our product continues to grow, multiple designers are now working on different areas of the product simultaneously. One component that kept receiving ad-hoc updates was the Page Header, leading to a variety of inconsistent variations across the platform. Recognizing this, I volunteered to take on the task of unifying the component to ensure a more cohesive experience for our users. Along the way, many of us in the design team also saw an opportunity to refresh the UI and bring it up to a more modern standard— two birds with one stone.
To start the process, I conducted a comprehensive audit of the entire app to identify all instances and variations of the Page Header. This audit revealed several key issues:
1. Excessive Vertical Space
The header was taking up too much vertical space, which delayed users from accessing the core content of the app. This created friction in the user experience.
2. Outdated Color Scheme
Following a recent update to the main navigation, the header’s older, more muted color scheme felt outdated in comparison, disrupting the overall visual cohesion of the interface.
3. Cluttered Button Space
In certain product areas, additional action buttons were crowding the main title space, making the header feel crowded and less functional.
4. Scalability Concerns
From a design operations perspective, the many variations of the header across product areas were becoming difficult to maintain. Creating a more scalable solution was essential to avoid future complexity.
From a design operations standpoint, I aimed to streamline the component to avoid the need for multiple variations, ensuring a more scalable and efficient solution.
Given the Page Header's high visibility and usage across all product areas, it was critical to keep everyone aligned and continually gather feedback from the broader design team. To facilitate this, I shared recorded walkthroughs so designers in different time zones could review the latest iteration at their convenience.
With each iteration, new feedback came in—some via the design file, others through Slack. This constant loop of input helped refine the design and ensure we were meeting the needs of all teams.
I also hosted a "Crazy 8" workshop, where several designers brainstormed ways to consolidate the icon buttons in the header. This collaborative session sparked fresh ideas and led to a more unified approach.
This project not only resulted in a cleaner, more modern Page Header but also set the stage for greater consistency and efficiency in our design system moving forward. By streamlining this essential component, we’ve improved the user experience while also future-proofing our design operations.
