Layer 2
A standardised, native approach, simplifying journey entry, improving data drill downs and elevating contextual help to keep users task focused.
A detailed deep dive
Layer 2 pages represent the detailed deep dive where users access data-heavy views like their account settings, a drill down into their usage data or initiate multi-step journeys. Our focus here is zooming in on the task at hand by moving to a standardised page structure (it’s goodbye to confusing modals) and improving page titling for clarity.
These pages are built using detailed lists, written (in page) content, data and images to provide every piece of context required, with help surfaced exactly where it's needed, resolving queries at the point of action.
How do I access layer 2 pages?
Layer 2 pages serve as the action and detail that users access directly from an entry point within a layer 1 page.
The primary function of layer 2 is to facilitate the main journey, often by presenting the bulk of the data and required steps.
Layer 2 pages are responsible for surfacing entry points to layer 3 pages where needed. This ensures a logical flow: the user moves from a broad overview (layer 1) into the detailed task space (layer 2), and then logically into the final, deepest data points or settings (layer 3).
- Android and iOS variants
- Stepped journeys
- Heading is inherited from origin card and remains consistent through journey
- Contextual help
- Removal of navigation at layer 2 and below
- Key CTAs displayed at bottom of screen
- Interactive elements
- Entry fields with dynamic content
What can I do on a layer 2?
-
Drop shadow
Header at layer 2 and below always has a drop shadow to indicate content scrolls below it -
Cards
Both non-tappable (first card) and tappable (second and third cards) can be displayed at a layer 2, with a tappable card taking a user deeper to layer 3 -
Inputs
Input fields can be used at layer 2, with the relevant information displaying accordingly -
Page heading
Heading inherited from line item that’s been tapped on to enter page
Enables clear way finding -
Lists
Both tappable and non tappable action lists are commonly used on layer 2 pages.
Tappable lists are used to take users a layer deeper and non tappable are used to display information in an organised format. -
Bottom sheets
Can appear on and be treated as a layer 2 (when initiated on a layer 2)
Launching a journey via a CTA on a layer 2 bottom sheet, takes you to a layer 3 journey
Rules
- Implement a standardised page structure for all Layer 2 content, replacing confusing modals entirely.
-
Ensure the page title is clear and explicitly states the task or specific data being viewe
The title should be derived from the card that was tapped to launch it e.g. if the card says “Power Move,” the subsequent layer 2 title should be related - Within stepped journeys, the page title should remain the same, with the steps counting up through the flow
- Surface help and guidance contextually, resolving user queries at the point of action.
- Provide a clear link to Layer 3 pages only for the final data points or settings.
- Use modals for showing key data views or complex, multi-step tasks
- Use generic page titles or vague labels that lack task context
- Use over complex or extremely long page titles
- Hide essential data behind excessive clicks or unnecessary expansions
- Combine unrelated user journeys or conflicting primary actions onto one page.
- Try to embed Layer 3 data directly within the Layer 2 page structure
Header variants
iOS and Android
From layer 2 to layer 4, we are introducing a native update to page headers –
locating the back buttons and page titles
in a position you’d expect to find them within a native experience.
We think this is important to aid familiarity and improve navigation performance.
- iOS back button
- Android back button
- Page titles are positioned differently on iOS and Android – to bring a hint of native familiarity to the experience
Stepped header
To allow for a journey to remain at the same layer, we are introducing stepped headers – these can appear from layer 2 to layer 4.
There are both iOS and Android variants of the stepped header, which can display contextual help where necessary.
See the ‘app navigation’ documentation to learn more about navigation within a stepped journey.
Restrictions
Not to be used on this layer
To maintain clarity, focus, and standardised structure of this layer, certain components need to be excluded. When designing or creating new user journeys, observe the following list of prohibited elements to ensure consistency and prevent user friction.
Global nav
Global nav not to be used past Layer 1 pages
Layer 1 header
Layer 1 header not to be used on Layer 2 pages
