App Header Navigation
My team and I designed a new application navigation system for our flagship application as part of a complete redesign of the app. We needed to solve several issues with the existing navigation system and deliver new functionality.
Note: This case study is based on real work experience, but for privacy reasons I cannot share proprietary images or confidential details. All screens shown are my designs.
App Header Navigation
My team and I designed a new application navigation system for our flagship application as part of a complete redesign of the app. We needed to solve several issues with the existing navigation system and deliver new functionality.
Note: This case study is based on real work experience, but for privacy reasons I cannot share proprietary images or confidential details. All screens shown are my designs.
App Header Navigation
My team and I designed a new application navigation system for our flagship application as part of a complete redesign of the app. We needed to solve several issues with the existing navigation system and deliver new functionality.
Note: This case study is based on real work experience, but for privacy reasons I cannot share proprietary images or confidential details. All screens shown are my designs.
Project
Web application
2021-2022
My Role
UI component design
Interaction design
Prototypes
User testing
Tools
Figma
Project
Web application
2021-2022
My Role
UI component design
Interaction design
Prototypes
User testing
Tools
Figma
Project
Web application
2021-2022
My Role
UI component design
Interaction design
Prototypes
User testing
Tools
Figma
Problems
Our research found serious flaws with the existing navigation including conflicting options and the improper use of list pages as a secondary navigation element. Our goals were to streamline navigation and surface meaningful alerts. Since the app header was fundamental to the redesign of the application we also had to ensure the design was flexible enough to adapt as we built out new features.
Problems
Our research found serious flaws with the existing navigation including conflicting options and the improper use of list pages as a secondary navigation element. Our goals were to streamline navigation and surface meaningful alerts. Since the app header was fundamental to the redesign of the application we also had to ensure the design was flexible enough to adapt as we built out new features.
Problems
Our research found serious flaws with the existing navigation including conflicting options and the improper use of list pages as a secondary navigation element. Our goals were to streamline navigation and surface meaningful alerts. Since the app header was fundamental to the redesign of the application we also had to ensure the design was flexible enough to adapt as we built out new features.
Dead Ends
Unintuitive mixtures of global and local pages in one menu could send users to dead ends or in a loop.
Misused UI
Some pages used list views as a secondary navigation, burdening users with extra clicks and higher cognitive load.
Dead Ends
Unintuitive mixtures of global and local pages in one menu could send users to dead ends or in a loop.
Misused UI
Our demographic skewed older and we had concerns about type legibility and general accessibility.
Dead Ends
Unintuitive mixtures of global and local pages in one menu could send users to dead ends or in a loop.
Misused UI
Our demographic skewed older and we had concerns about type legibility and general accessibility.
Opportunity
We could improve navigation across the application and guide users to their primary workflows and priority tasks with fewer steps.
Opportunity
We could improve navigation across the application and guide users to their primary workflows and priority tasks with fewer steps.
Opportunity
We could improve navigation across the application and guide users to their primary workflows and priority tasks with fewer steps.
Goals
Navigation
A new navigation system would clearly delineate between global and local navigation eliminating confusing menu structures and providing clarity.
Dashboard
We would pair the app header with a dashboard system that provided relevant metrics to users as well as acting as launch points for deeper features.
Alerts
Alerts could be moved to the app header. This would place notification and navigation to affected items in one convenient and universal location.
Goals
Navigation
A new navigation system would clearly delineate between global and local navigation eliminating confusing menu structures and providing clarity.
Dashboard
We would pair the app header with a dashboard system that provided relevant metrics to users as well as acting as launch points for deeper features.
Alerts
Alerts could be moved to the app header. This would place notification and navigation to affected items in one convenient and universal location.
Goals
Navigation
A new navigation system would clearly delineate between global and local navigation eliminating confusing menu structures and providing clarity.
Dashboard
We would pair the app header with a dashboard system that provided relevant metrics to users as well as acting as launch points for deeper features.
Alerts
Alerts could be moved to the app header. This would place notification and navigation to affected items in one convenient and universal location.
Design Process
Our team mapped pages and workflows in a Figjam file and used this to outline a logical organization. This developed into a proposed global menu and case-level menu bar. The global menu was planned for the application header and the local nav bar would complement it by moving local navigation into feature screens.
To test our hypothesis we outlined key workflows to test as navigation paths and developed a complex Figma prototype to simulate them. I wrote a test script and we tested it internally to refine and check for leading questions or statements. We asked our Product team to identify good test candidates and performed remote testing sessions with a sample of five individuals. Testing included open-ended prompts and requesting subjects narrate their journey.
Our testing showed users successfully navigated all workflow tasks as expected. We incorporated improvements suggested by our observations in the user testing and gathered from support staff, relationship managers, and our product owners.
Design Process
Our team mapped pages and workflows in a Figjam file and used this to outline a logical organization. This developed into a proposed global menu and case-level menu bar. The global menu was planned for the application header and the local nav bar would complement it by moving local navigation into feature screens.
To test our hypothesis we outlined key workflows to test as navigation paths and developed a complex Figma prototype to simulate them. I wrote a test script and we tested it internally to refine and check for leading questions or statements. We asked our Product team to identify good test candidates and performed remote testing sessions with a sample of five individuals. Testing included open-ended prompts and requesting subjects narrate their journey.
Our testing showed users successfully navigated all workflow tasks as expected. We incorporated improvements suggested by our observations in the user testing and gathered from support staff, relationship managers, and our product owners.
Design Process
Our team mapped pages and workflows in a Figjam file and used this to outline a logical organization. This developed into a proposed global menu and case-level menu bar. The global menu was planned for the application header and the local nav bar would complement it by moving local navigation into feature screens.
To test our hypothesis we outlined key workflows to test as navigation paths and developed a complex Figma prototype to simulate them. I wrote a test script and we tested it internally to refine and check for leading questions or statements. We asked our Product team to identify good test candidates and performed remote testing sessions with a sample of five individuals. Testing included open-ended prompts and requesting subjects narrate their journey.
Our testing showed users successfully navigated all workflow tasks as expected. We incorporated improvements suggested by our observations in the user testing and gathered from support staff, relationship managers, and our product owners.
Solution
The new navigation system clearly delineated between global and local navigation eliminating confusing menu structures and providing clarity.
The app header design was paired with a dashboard system that provided relevant metrics to users as well as acting as launch points for deeper features. We added task and alert badges alongside action menus to the header. These combined notification and navigation to affected items in one convenient and universal location. Users no longer had to navigate around the application to find issues and solve them. The new streamlined global navigation menu provided convenient links to all features in two clicks.
To navigate within features we added a local navigation bar that jumped directly to pages within a record.
Solution
The new navigation system clearly delineated between global and local navigation eliminating confusing menu structures and providing clarity.
The app header design was paired with a dashboard system that provided relevant metrics to users as well as acting as launch points for deeper features. We added task and alert badges alongside action menus to the header. These combined notification and navigation to affected items in one convenient and universal location. Users no longer had to navigate around the application to find issues and solve them. The new streamlined global navigation menu provided convenient links to all features in two clicks.
To navigate within features we added a local navigation bar that jumped directly to pages within a record.
Solution
The new navigation system clearly delineated between global and local navigation eliminating confusing menu structures and providing clarity.
The app header design was paired with a dashboard system that provided relevant metrics to users as well as acting as launch points for deeper features. We added task and alert badges alongside action menus to the header. These combined notification and navigation to affected items in one convenient and universal location. Users no longer had to navigate around the application to find issues and solve them. The new streamlined global navigation menu provided convenient links to all features in two clicks.
To navigate within features we added a local navigation bar that jumped directly to pages within a record.
Results
We tested the new header while in design development and saw immediate improvements in test user navigation. Mouse travel was significantly reduced and users moved more fluidly and naturally through the application. We also saw a reduction in off-target clicks.
Results
We tested the new header while in design development and saw immediate improvements in test user navigation. Mouse travel was significantly reduced and users moved more fluidly and naturally through the application. We also saw a reduction in off-target clicks.
Results
We tested the new header while in design development and saw immediate improvements in test user navigation. Mouse travel was significantly reduced and users moved more fluidly and naturally through the application. We also saw a reduction in off-target clicks.
Previous
Layer-Based Navigation
Next
Design System
Previous
Layer-Based Navigation
Next
Design System
Previous
Layer-Based Navigation
Next
Design System