Layer 1
A re-imagined, focused view that organises key information, elevates buried actions and makes critical statuses timely and relevant.
A focused view
Layer 1 pages are the first focused view users access when they move directly from the Home page. These pages offer a reimagined, clear, concise and organised view of key account areas, such as bills, usage, and help.
The primary objective is to deliver timely and relevant information, allowing users to immediately grasp their status and progress without being overwhelmed by detail. By making payment and bill status explicitly visible, and by providing quick actions, we ensure the user can resolve their most pressing issues in a single tap.
How do I access Layer 1 pages?
Layer 1 pages are the main structural entry points for the app's key features. They must be one click away from Home as these are the key actions users need to take.
Users access these pages directly from the global navigation bar located at the bottom of the screen (present on home and layer 1 pages). This ensures that essential pages are always visible and instantly accessible, aligning with our goal of making key actions never more than 3 taps away.
- Access to account and chat
- Key focused information
- Layer 1 pages
- Quick actions
- Action lists
Rules
- Be clear and concise Offer a focused view of the topic (e.g., bills, usage, help). Do not introduce unnecessary detail that belongs in Layer 2 or 3.
- Elevate actions Bring previously buried actions (like viewing the latest bill or submitting a reading) directly to the surface with clear CTAs.
- Be explicit Make key actions explicitly visible at the top of the relevant page. Users should know their standing instantly.
- Unauthorised expansion Do not proceed with handing over or implementing new Layer 1 pages without formal approval. These critical additions require oversight and sign off from the App team to ensure correct hierarchy and integration – the app alignment session on Mondays is the best way to do this
- Avoid information overload Layer 1 is not a dashboard. Do not try to show every piece of data and information, only show what is timely and relevant
- Cards should hero simple, glanceable information that drills down into more granular detail when tapped (opens a layer 2 page)
- Ignore relevance Do not display quick actions that are not relevant to the current page topic.
- Forget hierarchy Don’t introduce multiple complex onward points. The primary function of Layer 1 is to move users logically into the next layer of detail (Layer 2).
Interactions
-
Vertical page scroll
Header collapses on scroll - Layer 1 header
- Opens account (Layer 2)
- Opens chat (Layer 2)
- Chart data card (large)
-
Quick actions
Horizontal scroll - Icon data card
- Chart data card
- Tapping opens respective Layer 2 pages
- Progress bar data card
- Image card
- Navigates to selected Layer 1 page
Page content
Here is an overview of the types of tiles and content which can be displayed on a home layer.
Please reference tile documentation and guidance for specific information around designing and content rules for cards.
Quick actions
Main purpose
- Provide quick entry into relevant journeys
- Prioritisation of required actions
Key rules
- Minimal words + image/icon
- Maximum of 3 quick actions
- No CTAs to be used
Interactions
- Tappable actions
- Scrollable actions
Component variants
More detailed information
to be found within card
documentation
- Standard quick actions
- Urgent quick actions
Cards
Main purpose
- Communicate glanceable information
- Entry point to more granular detail
Key rules
- Must have a title
- Subtitle must relate to timeframe
- No CTAs to be used within card
Interactions
- Tappable variants
- Non-tappable variants
Component variants
More detailed information
to be found within card
documentation
- Text cards
- Data cards
- Image cards
- Offer cards
- Disruptive cards
- Tappable cards
- No non-tappable cards
