Establishing navigation consistency in
the mobile experience.

In the world of native OS design, navigation animations—called segues—serve as crucial cues for users, guiding them as they move through an app. These subtle transitions not only show where users are headed but also maintain an intuitive flow, especially with the variety of gestures touchscreens offer. The challenge was to ensure that these segues were consistent across a redesigned app, where 9 designers were working on different sections simultaneously.

The Situation

During a recent app redesign, our team was working to maintain a common design system. However, a significant gap emerged in wayfinding: there were no established rules for navigation labels or animations. Without clear guidelines, our users could end up with inconsistent navigation, leading to confusing user experience.

My Role

As the lead in evaluating navigation consistency, I identified discrepancies in header labels and animation transitions. The goal: create a consistent and clear navigation system that designers could rely on, ensuring users had a seamless path throughout the app.

Actions Taken

To address the problem, I took the following actions:

Navigation Labeling System: I created an inventory of potential header types and defined a standardized labeling system for all possible navigation scenarios. This provided a structured approach to naming conventions and ensured a consistent user experience.
Research on Leading Practices: I analyzed other popular apps such as Amazon, Instagram, and Pinterest to understand their navigation systems. This research highlighted a key principle: no matter how deep users go, the path back should always be clear. Segues act as visual breadcrumbs, providing context for users.
Documentation and Team Buy-In: I documented the new navigation rules and shared them with the team, encouraging feedback and fostering a sense of ownership. This collaborative approach ensured that the guidelines were robust and accepted by all designers.
Animation Consistency: In parallel, I developed guidelines for animation transitions, ensuring that movement between screens was smooth and consistent. This was critical for maintaining an intuitive user journey.
Quality Assurance: I reviewed the existing app experience to identify where our design system was not being followed. I logged these instances and worked with the respective development teams to prioritize corrections.

Documentation

Results

The established rules for navigation and animation brought clarity and consistency to our design system. The documentation was added to our existing design system, providing a reference point not just for the mobile design team but also for other teams contributing to the app. This common thread improved our design process and ensured a consistent user experience as we continued to build and expand our offering.

Thanks to the Mobile Design Team