The Brief
Journi had been developed as a proof of concept and grew rapidly. This process left the navigation as a series of hard coded “hacks” riddled with inconstancies and unexpected behaviors.
Research
To fully understand the existing navigation, I conducted a heuristic evaluation of the app and diagramed the information architecture. This allowed me to identify points of confusion and opportunities for improvement.
Challenges
Consumers were often lost by the inconsistent navigation. When an app fails to deliver on something as basic as navigation it erodes user confidence in the app and content.
The process
Heuristic Evaluation & mapping
My first step to delivering a better navigation was to audit the app. I went through screen by screen and documented what happened with each button action. This process gave me a clearer understanding of where inconsistencies were and helped identify the patterns that we would want to move forward with.
Once the audit was completed, I needed a way to understand how each section of the app was connected. I started by diagraming the architecture and then layered in the different connect points across the app.
Define Components
With a better understanding of the app structure I worked with our front-end developers and UI designers to define the navigation elements. This collaborative effort gave us a common language that we used to refine our patterns.
Stack: Initial Scene
First scene in a stack that child scenes are anchored too.
Bottom Bar
Appears on top level screens and provides lateral navigation.
Tab bar
optional lateral navigation on top level pages.
Modal: Popover
Covers the existing view, Can be dismissed downwards.
Stack: Child Scene
Secondary scenes in a stack.
User Navigation Flows
The next step was to put together some initial navigation flows. Equipped with a common language of terms I reviewed the flows with developers and fellow UX/UI designers. Below are the final versions that illustrate the desired behavior for the most troublesome areas of the app.
Insight card to top level page
Insight card to detail level page
Popover with an add flow
Popover with an optional add flow
Navigation between detail screens across tabs
Final Thoughts
This project was challenging due to the untangling and documenting of existing navigation patterns that needed to be done. Through this process I learned a lot about understanding expected behaviors and collaborating with individuals across teams. As an added value to come from this project, I have been working with developers to build a visual glossary of all the components used in the app. This new tool is creating clearer communication across teams.