Loop-Logo

Mobile App Energy Monitoring Clean Energy

Loop-Isometric-Gallery

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 the household’s energy consumption to help users save money and move to renewable sources.

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 04 .

TLDR

TL;DR

With Loop, users can:

Track and understand their household’s energy usage.

Make changes to lower 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 04 .

Challenge

CHALLENGE

Most people see energy as just a bill to pay and feel helpless towards climate change ...

Energy was at best perceived as a necessary evil and often associated with expensive tariffs and opaque contracts. The environmental effects of home energy were also perceived as far removed and hard to control.

Solutions

SOLUTION

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

Reducing unnecessary waste, picking a renewable provider, and eventually switching to self-generated solar energy are gradual and impactful steps towards reducing the household’s energy costs and carbon footprint.

Discovery

03 of 04 .

Leadership

PROJECT SETUP

Discovery & Definition

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

Each phase was then divided into 2-week sprints with recurring touch-points with the client.

Project-Setup

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

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.

User

TARGET AUDIENCE

Building an audience

Early in the process, we identified a set of 5 user segments based on existing market research.

For each segment, we created a design persona to use as a guideline for both design and testing activities.

Ideation

IDEATION

Fleshing out initial ideas

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

The focus was on how energy data could help users become more aware of their consumption and drive them to action.

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

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

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

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

Research

USER TESTING

Test early, refine, test again

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

The objective was to gather user feedback as early as possible on which ideas were resonating and which ones weren't.

Definition

04 of 04 .

Architecture

STRUCTURE

Defining the overall experience

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

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

Detailed individual user flows were then developed, also considering the system logic.

Structure-Blueprint
Structure-User-Flows

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

Wire-Live-Detail
Wire-Day
Wire-Action

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

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.

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.

Track-High-WF Track-High

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

Track-High
Track-Phantom
Track-Week

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

Tracking energy usage

The track sections offer both real-time electricity readings and historical data.

Personalised insights highlight the main changes in usage.

Change-Hub
Change-Cook
Change-Kettle

Examples of final UI from the ‘Change' 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.

Solar-Live
Solar-Day
Solar-Sim

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

Simulating the impact of solar panels

Users can simulate a solar panel installation based on their household's location and roof orientation.

The simulation allows to accurately visualise the impact of solar overlaid on existing usage data.

Switch-Timer
Switch-Now
Switch-Tariff

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

Switching to better energy providers

The provider switching functionality takes advantage of effective usage and current tariff information.

Users are offered transparent and timely advice on when and how to switch tariffs for the best savings.

Shoutouts.

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

✶ Loop is a registered trademark of Trust Power Ltd.

atomdot

Tommaso Guidotti © 2024

Back to top Arrow