Introducing a new, familiar and simplified approach to navigation and way finding across layers
Navigating there and back...
Without consistent way finding patterns, apps can feel like a labyrinth.
We’re introducing a clear, layered structure that guides customers
through tasks with ease. A system where:
- Key actions are never more than 3 taps away
- Help is easier to find, and information is displayed more consistently
- Designers have the tools to create a consistent easy to use app
Types of navigation
Layer 2 and below
Back navigation
- Present on layer 2, 3 and 4 pages
- Returns the user to the previous layer
Global navigation
- Is not present on layer 2, 3 and 4 page
- this is a behaviour used across many successful apps
- this allows us to use next/previous navigation within stepped journeys
- allows for as much visibility of and a focus on the page content whilst drilling down into information
- Back button is used to return to previous layer
Stepped journeys
Back, stepped navigation
- Steps to communicate current progress through journey
- Back button returns user to origin of flow/exits the flow (save/abandon journey dialog to be used where necessary)
Journey next/previous navigation
- Stacked CTAs are used to allow the user navigation forward and back through the steps of the journey
- When it is the first step of the flow, the primary CTA should be used to move to step 2, and the back button (in the header) used to return to the origin
- When the final step is reached, the primary CTA should allow the user to complete the journey
Global nav
There are currently two variants of the global nav component – one which is used for all of our pay monthly customers and another which has been designed for the PAYG experience.
Pay as you go customers
PAYG customers will use this adapted navigation to go between layer 1 and home pages
Pay monthly customers
Both Direct Debit and On Demand customers will interact with this navigation to go between layer 1 and home pages
Navigation principles
- Tapping ‘Home’ when on any layer 1 page will return you to the home layer
- From any layer 1 or home page, tap on any global nav item to navigate to the related layer 1 page
- Tap a card to navigate to a layer 1 page
- Back returns to origin layer
- Tap an action list item to launch a bottom sheet or relevant page
- Tap on CTA to launch stepped journey
- Navigates to previous step
- Navigates to next step or completes journey
- Back returns to origin layer
- Tapping on link opens relevant layer 3 page
- Tap a CTA to launch a bottom sheet or relevant page
-
Journey can be capped at layer 3 by confirming via a bottom sheet.
Completing the journey should return the user to the origin