Description
Introduction
The header is the gateway to the digital experience, forming the first impression in just 50 ms. This article documents the anatomy of the headers created for Havan, combining theoretical foundations with visual evidence from the design and wireframing processes applied.
Below, we’ll explore solutions applied to three products with distinct headers that I helped conceive:
1. E-commerce
2. Gift Registry
3. Design-system header for internal systems
1. E-commerce Header
We faced the challenge of creating designs that adapt to Web (Desktop and Mobile) and App (native mobile only), accounting for devices with or without the installed app, while preserving visual consistency.
The goal was to add more features and information without violating Hick’s Law — where decision time increases logarithmically with the number of options presented. As UX/UI designers, we needed to think visually and leverage market patterns so as not to overload the user.
1.1 Web Version – Strategic Configuration
Wireframe, medium fidelity of web header
Hamburger Button: Implemented to open information architecture items such as category navigation and home-area navigation (inspired by IKEA’s site but not initially implemented). According to Nielsen Norman Group, the hamburger menu should be used only when necessary — hidden navigation reduces discoverability by 50% and increases task time by 25%. We had no viable alternative here, and since this icon is widely recognized, we chose to keep it.
Company Logo: Serves as a navigation anchor (unlike in the app, where the home tab makes it unnecessary). Placed in the upper-left, following F-Pattern and Z-Pattern reading research. Nielsen Norman Group confirms that 92% of users expect to find the logo in this position, establishing it as a navigation anchor and safe return point.
Collapsed Search Button: Implemented to optimize space for other header elements.
My Account: For sign-up/sign-in actions.
Shopping Cart: Displays the number of items added. The cart’s placement follows established conventions —96% of users expect to find it in the upper-right, according to Baymard Institute research.
ZIP Code: Shows the ZIP code the user selected for shipping estimates and personalized offers.
Sticky Category Navigation: After scrolling, the main categories appear in a fixed bar (present only on the site’s homepage). This solution was initially implemented in Havan’s Gift Registry as a UX team innovation. It was not initially applied to the e-commerce site, but in April 2025, Mercado Livre adopted a similar pattern, and competitors such as Shein also use this navigation type, demonstrating its relevance and effectiveness. Nielsen Norman Group shows that sticky headers boost navigation discoverability by 85%.
Mercado Livre: using sticky category navigation when the user scrolls past the category section on their homepage.
1.2 App Version – Mobile Optimization
On the app—where we have most of our access—we made the following adjustments compared to the Web proposal:
Hamburger Button: Retained, but removed items already present in the app’s native navbar, especially features related to the company’s card and native app functions.
Logo Replaced with Search: The logo was removed and replaced by the search field, since the app icon and home tab already indicate the store and serve as an anchor. This change freed up space for search. According to Clarity data, search is one of the most-clicked elements, and since most users access via the app, we prioritized its visibility. Baymard Institute confirms that users who use search convert 6.4 times more than those who navigate by categories alone.
Removal of “My Account” Icon: Removed because that function is already present in the app’s navbar, freeing up more space for search.
2. Gift Registry Header: Contextual Navigation
Another product for external customers, Havan’s Gift Registry has a special characteristic: we have a different information architecture for two distinct user types: Hosts & Guests. Our biggest challenge was creating cohesive navigation when both users start their journey from the same point.
We applied Contextual Disclosure, revealing only information relevant to the specific moment in the journey. According to the Interaction Design Foundation, contextual disclosure “involves revealing information only when and where it is relevant to the user’s task or context,” taking into account interface location, prior interactions, or choices to determine what information to reveal and when. This approach ensures users receive relevant information at the right time, reducing cognitive overload and improving usability.
We retained basic error-recovery functions during navigation, such as a back button and other elements like a search icon, so that users can recognize and perform searches at certain points in the journey where this function is available.
Problems Identified in the Previous Header:
On mobile, it was not possible to know whether the user was logged in or not.
The hamburger menu did not highlight the three main actions: Log In / Create New Gift Registry / Find a Gift Registry.
Photos of sketches and drawings of the new Gift Registry header architecture.
High-fidelity mockups of the Gift Registry header and its variations
3. Internal Systems Header
Months after developing both external solutions—for Havan.com and the Gift Registry site—I was tasked with proposing a new header for internal systems. This header would be integrated into the company’s new internal design system. The challenge was even greater because it had to serve all existing systems and future ones.
Problems with the Old Header:
It lacked quick access to other systems.
It did not provide clear feedback on which system was active, leaving it up to each new system’s designer to insert breadcrumbs and the system name below the header.
Photo of the old header view, with some information hidden for confidentiality
New Header Proposal
Simplified Header: for single-page systems, ideal for data visualization tools without complex information architecture. We removed breadcrumbs and the system name, as the page title is the system name. This simplification optimizes use of the 1366×768 px screen size common among corporate laptops.
Full Header: for multi-page systems, including breadcrumbs and system name, with back buttons. Nielsen Norman Group recommends breadcrumbs as way finding elements since 1995: they should show hierarchy, not navigation history, with a maximum of three levels visible to avoid cognitive overload.
Common Elements: both versions include a system-search menu and contextual widgets for global access by all employees (chat, support, internal notices, notifications). The implementation of contextual widgets follows research on workflow-based navigation, where shortcuts to frequent tasks reduce execution time by 50%. We also included the company logo linking to the internal home page and profile-icon options for edit and logout.
New header mockups: simplified and full versions
The clever twist of this header is the ability to attach additional filter options without visual weight, as shown in the example of inserting a filter bar below. Unlike the header, this element is not sticky, but it uses Gestalt principles to convey the idea of a unified block. The visual organization follows research-validated Gestalt principles:
Proximity: Related elements grouped
Similarity: Similar elements share consistent appearance
Continuity: Logical, predictable visual flow
Closure: Structures visually complete themselves
Header with an added time-period filter and feedback indicating the last update
The main principle was optimizing the user’s workflow without compromising limited screen space or overloading the interface. Research shows corporate users perform 80% of their tasks using only 3–4 core features. Applying the Pareto Principle (80/20) in corporate productivity confirms that a small fraction of efforts contributes significantly to most results.
Conclusion
The three headers we developed share the same optimization philosophy based on the Pareto Principle (80/20), where each element was designed to maximize impact with minimal cognitive effort from the user. All were built around the 20% of actions that drive 80% of results, prioritizing the core tasks a user can perform at any given moment—whether searching for products in the e-commerce site, managing gift registries, or accessing internal systems.
The biggest challenge was accurately identifying and prioritizing the contextual actions for each persona type. In e-commerce, search and cart interactions account for 80% of engagement; in the gift registry, guests’ purchase flow and hosts’ registry creation and item addition dominate; for internal systems, seamless navigation between pages and across systems—with easy adaptability to different system contexts—was key.
All solutions were tested and validated with real users, achieving success rates above 87%, confirming that evidence-based design decisions and usability principles resulted in functional, effective experiences across all use cases.
References
Nielsen Norman Group. “First Impression Study.” 2021.
Nielsen Norman Group. “Hamburger Menu Icon Update.” Accessed 2025.
Nielsen Norman Group. “Menu Design: The Hamburger Debate.” Accessed 2025.
Nielsen Norman Group. “Breadcrumbs: 11 Design Guidelines for Desktop and Mobile.” 2024.
Nielsen Norman Group. “Sticky Headers: UX Guidelines.” 2023.
Nielsen Norman Group. “F-Pattern and Z-Pattern Reading Models.” 2022.
Baymard Institute. “E-commerce Homepage & Category Navigation UX.” 2023.
Baymard Institute. “Search UX: The Importance of Autocomplete.” 2023.
Interaction Design Foundation. “What is Contextual Disclosure?” Accessed 2025.
Interaction Design Foundation. “Progressive Disclosure in UX Design.” 2024.
Interaction Design Foundation. “Visual Hierarchy: Organizing Content to Follow Natural Eye Movement Patterns.” 2023.
IDEO.org. “Design Thinking for Navigation.” 2022.
Workflow-Based Navigation Patterns. UX Collective. 2024.
Law of Fitts. “Fitts’ Law and UX.” Laws of UX, 2023.
Law of Hick. “Hick’s Law in UX Design.” UXPin Blog, 2023.