Loop-Logo

Mobile App Energy Monitoring B2C

App sneak peek.

What I worked on

Team Leadership
Product Strategy
Product Design
User Experience
User Research

Client

Trust Power

Agency

AllofUs (BCG X)

Loop is an app that monitors household energy consumption, helping users save money and switch to renewables.

The team and I designed an entirely new mobile app experience around energy data, from understanding existing user behaviours to producing the launch version.

Overview

01 of 05 .

Video overview of Loop.
⦿ Use the video player to zoom in.

TLDR

TL;DR

With Loop, users can:

Track and understand their household’s energy consumption.

Make changes to reduce their bills and carbon footprint.

Simulate the impact of installing solar panels on their property.

ACHIEVEMENTS

Project duration

8 months

from concept to MVP

Apple App Store

★★★★☆

4 stars

Google Play Store

★★★★☆

4 stars

☆ Updated on 5 May 2024

Challenge

02 of 05 .

Challenge

CHALLENGE

Many see energy as just a bill to pay and feel powerless against climate change ...

Energy was often associated with expensive tariffs and opaque contracts. Additionally, its environmental impact was seen as distant and difficult to control.

Solutions

SOLUTION

... so we created an app that raises energy awareness and inspires behavioural change with bite-sized actionable advice.

Reducing waste, choosing a renewable provider, and adopting solar energy are key steps to lower household energy costs and carbon emissions.

Setup

03 of 05 .

Team

TEAM & ROLE

A cross-functional task force

My role in the team was:

Leading the design activities across UI, UX and research.

Executing key UX, research and design tasks.

Coordinating with the engineering team and the senior management.

DESIGN TEAM

➸ Lead Product Designer (me)
・ Brand Designer
・ UI Designer
・ Creative Technologist

EXTENDED TEAM

・ Data Scientist
・ Front End Developer ×1
・ Back End Developers ×2

KEY STAKEHOLDERS

・ CEO
・ CMO

Project-Setup

Key project milestones.
⦿ Select the image to zoom in.

Leadership

TIMELINE

Discovery & Definition

The project was split into two typical phases of Discovery and Definition.

Each phase was divided into two-week sprints with recurring touch-points with senior stakeholders.

Discovery

04 of 05 .

User

TARGET AUDIENCE

Building an audience

Early in the process, we defined five user segments from existing market research.

We then developed a design persona for each segment to guide design and testing.

Loop-Persona-1
Loop-Persona-2
Loop-Persona-3
Loop-Persona-4
Loop-Persona-5

Examples of user personas.
⦿ Select an image to zoom in.

Sketch-Tree
Sketch-Hood
Sketch-Independence
Sketch-Path

Examples of initial sketches.
⦿ Select an image to zoom in.

Ideation

IDEATION

Fleshing out initial ideas

In the initial exploration, we sketched out as many ideas as possible.

The focus was on using energy data to enhance user awareness and prompt action.

Research

USER TESTING

Test early, refine, test again

The initial ideas were organised into high-level creative territories that could be tested with users.

The objective was to gather user feedback as early as possible on what resonated and what didn’t.

Concept-Personal-Development
Concept-Expert-Guidance
Concept-Social-Influence

Examples of concept boards tested with users.
⦿ Select an image to zoom in.

Definition

05 of 05 .

Structure-Blueprint
Structure-User-Flows

Examples of an experience map and a detailed user flow.
⦿ Select an image to zoom in.

Architecture

STRUCTURE

Defining the overall experience

Once a general direction was established, it was time to define the overall experience.

An experience map was created for each of the main jobs to be done.

Detailed user flows were developed next, considering the system logic.

Wireframes

WIREFRAMING

Framing the experience

The user journeys were then visualised screen by screen as wireframes.

Particular care was taken in defining the interactions with data from the start.

Wire-Live-Detail
Wire-Day
Wire-Action

Examples of wireframes from various sections of the app.
⦿ Select an image to zoom in.

Track-High-WF Track-High

← Left: Wireframe | → Right: Final UI
⦿ Drag to compare.

Interface

INTERFACE

Increasing fidelity

The app branding and design system were developed in parallel to the UX layouts.

The wireframes were evolved and refined in collaboration with a UI specialist and a Creative Technologist.

Tracking energy usage

The track section offers both real-time electricity readings and historical data.

Personalised insights highlight the main changes in usage.

Design Challenges

Defining the interactions with data in the small real estate of a mobile screen.

Track-High
Track-Phantom
Track-Week

Examples of final UI from the ‘Track’ section.
⦿ Select an image to zoom in.

Saving energy and money

Personalised advice allows users to save energy with simple actions.

From lowering overall standby consumption to using appliances more efficiently.

Design Challenges

Defining intuitive mechanics to display the impact of usage changes.

Change-Hub
Change-Cook
Change-Kettle

Examples of final UI from the ‘Change' section.
⦿ Select an image to zoom in.

Simulating the impact of solar panels

Users can simulate solar panel installations tailored to their home’s location and roof orientation.

The simulation accurately displays the impact of solar alongside existing usage data.

Design Challenges

Defining how the impact of solar panels stacks against existing usage.

Solar-Live
Solar-Day
Solar-Sim

Examples of final UI from the ‘Solar Simulation' sections.
⦿ Select an image to zoom in.

Switching to better energy providers

The provider switching functionality leverages current usage and tariff information to advise on when and how to switch for the best savings.

Users can also filter and browse available providers by category.

Design Challenges

Gaining user trust and allowing flexibility in the choice of a new energy provider.

Switch-Timer
Switch-Now
Switch-Tariff

Examples of final UI from the ‘Switching' section.
⦿ Select an image to zoom in.

Shoutouts.

Ricardo Amorim (Creative Direction)
Yuriy Starikov (Branding)
Hugo Simon (User Interface)


Loop is a registered trademark of Trust Power Ltd.

❥  Like what you see?

atomdot

Tommaso Guidotti © 2024

Back to top Arrow