App overview

Home layer

Show the right tasks and data at the right time to boost satisfaction and reduce complaints.

A personalised overview

Ground zero is a personalised hub that shows each user what matters most – when it matters. It surfaces key tasks, important data and relevant updates to help people stay on top of things.

By adapting to each person’s needs, it reduces friction, prevents issues and makes it easier to act. The result? A smoother, more intuitive experience where users feel informed, in control and confident using the app.

Intro graphic

 

How users access the Home layer

Accessing home layer a

App launches

Automatically opens homescreen

Accessing home layer b

Home

Landing view with personalised tasks and info

Accessing home layer c

Access from a layer 1

Tap ‘Home’ to return to the home layer

Accessing home layer d

Access from a layer 2/3

Back returns to
previous layer


 

Rules

Do
  • Prioritise personalisation 
Ensure the view is a personalised overview by showing 
quick actions and data relevant to that specific user
  • Surface key tasks 
Display modules that surface key tasks and relevant next best 
actions (NBAs) first. The primary goal is to help the user act easily 
and quickly without too much though.
  • Relevance 
Only display information that is timely and relevant. If a module 
is inactive (e.g no payment due), it should not be visible.
  • Deliver confidence
Use concise status updates to make users feel informed and in 
control, one quick glance should tell them their status.
Don't
  • Avoid generalisation 
Don’t display generic content. If it isn't relevant to the individual 
user, it should not be on their Home screen.
  • Bury the status 
Do not make users tap into Layer 1 to see their immediate, 
most important actions, show it here first.
  • Use redundancy 
Don’t duplicate information that is better served on a dedicated 
Layer 1 page (e.g showing a full usage graph history). Show only 
the most recent data point.

 

Interactions

  1. Vertical page scroll
    Header collapses on scroll
  2. Header
  3. Opens account
(Layer 2)
  4. Opens chat
(Layer 2)
  5. Balance card
  6. Quick actions
  7. Horizontal scroll
  8. Data tile (small)
  9. Navigates to selected
Layer 1 page
  10. Data tile (medium)
  11. Tapping opens respective Layer 2 pages
  12. Disruptive tile
  13. Text tile
  14. Image card
  15. External header
Interactions

 

 

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.

 

 

Header

Main purpose

  • Wayfinding

  • Entry points to account/chat

  • Present alerts

Key rules

  • No edits to be made to component

Interactions

  • Not tappable
  • Buttons provide entry into account/chat

Component variants

  • Home header
Header example

Balance card

Main purpose

  • Display account balance

  • Display account status

Interactions

  • Tappable card
  • Secondary actions (TBC)

Component variants

  • Smart meter balance card
  • Trad meter balance card
  • PAYG balance card
Balance card example

Quick actions

Main purpose

  • Provide quick entry into relevant journeys
  • Prioritisation of required actions

Key rules

  • Minimal words + image/ico
  • Maximum of 3 quick action
  • No CTAs to be used

Interactions

  • Tappable actions
  • Scrollable actions

Component variants

  • Standard quick actions
  • Urgent quick actions
Quick actions example

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

Interactions

  • Tappable variants
  • Non-tappable variants

Component variants

  • Text cards
  • Data cards
Cards example

Main purpose

  • Swipe through a set of information

  • Manage page height

Key rules

  • Must have a title
  • Minimal copy
  • No CTAs to be used

Interactions

  • Tappable cards
  • Scrollable card row

Component variants

  • Tappable cards only
  • Pagination must be visible
Cards example