Navigation model redesign
Duration: 4 months; Launched April 2023
Team: UX Designer/ Researcher, Product Manager, Frontend Engineers
Restructured the app’s navigation patterns to meet Apple HIG guidelines and iPhone/Android user expectations.
Applied a hierarchical navigation structure to build room to grow within the app.
Refined screen-level interactions and transitions.
-
After the app was launched for a year, team stakeholders engaged us to refresh the app’s navigational patterns. They wanted to reset the app’s structure so that we could include more sections within the app in the future. The current state had four features with inconsistent interaction patterns between them.
Our goal was to improve the app’s information architecture, work with engineering to establish screen templates with consistent interaction design, and establish clear documentation for future teams.
-
I worked with the team’s researcher to conduct 12 moderated usability sessions. We recruited a split of current mobile app users and current website users. The current app users helped us to understand how the proposed navigation model would affect their current tasks. The website user insights helped us discover the best ways to reinforce an omnichannel experience. We assessed usability with a low-fidelity mobile prototype.
-
We used the research findings to create final prototypes for engineers. We held internal working sessions to establish a shared understanding across disciplines. I worked with the team to define different screen types like parent/child screens, overlays, subtasks, and primary actions.
Our aim was to provide consistent and accessible patterns across the screen templates. We also established usage guidelines for each template. I worked with engineers to establish interaction design patterns with a foundation in Apple’s Human Interface Guidelines, Android Developer guidelines, and Material Design principles. This way, we created device-independent interactions, while also honoring native device patterns.
-
We monitored usage after launching the new experience. Users reported noticing that something had changed, though they weren’t sure what exactly changed. We successfully established repeatable patterns, and created base guidelines for cross-functional teams to reference when building in the app. These templates saved development teams valuable time when incorporating features, which resulted in faster delivery and less mistakes.
-
Creating a shared language for screen templates and interactions helped us work more closely as a team, communicate with stakeholders, and simplify design handoff. Establishing repeatable interactions and transitions between screens helps users know where they are within a certain task.
I balanced native mobile device patterns with app-specific patterns to reinforce context. This project proved that every incremental update builds upon a future phase, and subtle changes can increase trust through patterns and motion principles.