An introduction to Layers
We use a layered structure in our app to help customers move through tasks more easily and consistently.
At a glance...
A system where key actions are never more than 3 taps away. Help is easier to find, and information is displayed more consistently.
The structure is made up of 4 layers, each with a clear purpose. This helps create an experience that feels familiar, consistent and easy to use.
Overview of the layers
A personalised overview – content tailored to the user's needs and interests. Key details:
- Accessible from global navigation
- Permanent access to account and help
- Uses a header with the layer name and key actions
A focused view of a single topic – acts as a springboard into more detail. Key details:
- Accessed from global navigation
- Permanent access to account and help
- Uses a header with the layer name and key actions
A deeper dive into the details – not accessible from the global navigation. Key details:
- Reached via interactions from Layer 1
- More specific and task-focused
- A back button returns users to previous layer
A detailed, task-specific endpoint – often the final screen in a journey. Key details:
- Not accessible from global navigation
- Typically where the journey ends (e.g. form submissions, confirmations)
- Back button behaviour under review (TBC)
Only used when absolutely necessary – for edge cases where a fourth step is unavoidable.
Most circumstances for using a layer 4 are to access and display help content.
Lightweight UI used to show quick, contextual info or prompt onward journeys. Key details:
- Always on the same level as their origin layer – do not count as an additional layer
- Used when a full page isn’t needed
- Can either complete or extend the user journey
Identifying the layers
Home
Main purpose:
Overview layer – personalised content and a summary of key information, including links to Layer 1
How to access this layer:
Global navigation
What users can access on this layer:
- Navigation
- Global navigation
- Page header
- Features:
- Account
- Chat/AVA
- Quick actions
- Content:
- Data tiles
- Written tiles
- Tappable tiles
- Tappable lists
- Non-tappable lists
Links to layer…
Layer 1
Layer 2
Layer 1
Main purpose:
Focused layer – overview of a single topic with links to deeper content
How to access this layer:
Global navigation
What users can access on this layer:
- Navigation
- Global navigation
- Page header
- Features:
- Account
- Chat/AVA
- Quick actions
- Content:
- Data tiles
- Written cards
- Tappable cards
- Tappable lists
- Non-tappable lists
Links to layer…
Layer 2
Layer 2
Main purpose:
More detail about what’s introduced in the previous layer
How to access this layer:
Home
Layer 1
What users can access on this layer:
- Navigation
- Back button
- Page header
- Features:
- Chat/AVA (contextually)
- Content:
- Data tiles
- Written cards
- Tappable lists
- Non-tappable cards
- Non-tappable lists
- In page copy
Links to layer…
Layer 3
Layer 3 / Layer 4
Main purpose:
Layer 3
Granular detail – usually the final step in a task
Layer 4
Used only when unavoidable – for additional context or help at the end of a journey
How to access this layer:
Layer 2
Layer 3
What users can access on this layer:
- Navigation
- Back button
- Page header
- Features:
- Chat/AVA (contextually)
- Content:
- Written cards
- Tappable lists
- Non-tappable lists
- In page copy
Links to layer…
Layer 4
Informational patterns
We’re implementing some new, key patterns to display information in our app. Thesebeen designed keeping simplicity, severity and timeliness in mind – allowing us to display and share information at the right layer, at the right time.
Bottom sheets
The bottom sheet is key to keeping the experience flowing. It lets the user complete a single, focused task without navigating away from the current screen.
These sheets act on the same layer they were launched from, they are good for beginning and ending short user journeys without confusing the user's place in the app.
Presenting information
Simple, glanceable information which does not need to be surfaced a layer lower should be accessible via bottom sheets.
Confirmations and informative messaging should also be displayed in this way, and include a link to further details, if necessary.
Initiating journeys
To ensure our journeys are not buried, information should be presented in a bottom sheet and include a link to initiate.
The amount of content should be minimal, and left aligned where necessary.
Allowing actions
Bottom sheets provide a quick way of selecting, switching and copying information, without having to delve another layer deeper.
Notifications
Notification components are a critical part of the new architecture. Think of them as our way of giving users a friendly nudge. They allow us to strategically deliver timely information without making things complicated.
When necessary, the alert can link the user to the related journey, or be tapped to view more information within a bottom sheet or page (content dependent).
Notifications are not to be used for sales messaging.
Prioritise timeliness
Alerts communicate important, temporary information that requires immediate attention.
Alerts are not for permanent content.
If the information is always relevant,
use a static component.
User control
We built flexibility into the component to keep users in control. The optional subheading provides immediate context or the crucial CTA.
Always include the optional close button for non-critical alerts, ensuring users can dismiss the message and keep their interface focused.
Only severe messages should prevent dismissal.
Match tone to type
Colour themes helps communicate urgency instantly, no reading required.
The visual identity (icon, background colour) must always correspond exactly to the concepts of success, info, warning or severe.
This instant recognition is key to our consistent experience and prevents users from ignoring genuinely critical alerts.
