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.
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
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.
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 & 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
Key project milestones.
⦿ Select the image to zoom in.
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 .
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.
Examples of user personas.
⦿ Select an image to zoom in.
Examples of initial sketches.
⦿ Select an image to zoom in.
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.
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.
Examples of concept boards tested with users.
⦿ Select an image to zoom in.
Definition
05 of 05 .
Examples of an experience map and a detailed user flow.
⦿ Select an image to zoom in.
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.
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.
Examples of wireframes from various sections of the app.
⦿ Select an image to zoom in.
← Left: Wireframe | → Right: Final UI
⦿ Drag to compare.
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.
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.
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.
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.
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?
a•tomdot
Tommaso Guidotti © 2026
