01 / Context
Making energy advice easier to understand and act on.
Energy Advisor gives customers personalized recommendations for reducing consumption, lowering costs, and improving their homes. The experience combines everyday energy tips with larger upgrades, tariffs, and partner offers.
How can personalized energy advice move someone from discovering an opportunity to understanding its value and actually completing the action?
02 / Contribution
My role & scope.
Product/UI/UX Designer across the end-to-end Energy Advisor journey.
- Information architecture and product flows
- Recommendation cards and detail pages
- List, detail, success, completed, and modal states
- Savings, cost, kWh, and break-even data hierarchy
- Reusable cards, tabs, buttons, pills, icons, and navigation
- Integration into the broader mobile app
03 / Recommendation discovery
A feed built around what customers can do next.
The main Energy Advisor feed surfaces personalized recommendations and organizes them into useful categories. Users can browse everything or focus on areas such as Energy tips, Upgrades, Habits, Heating, and other advice types.
-
01
New
Recommendations that have not yet been actioned remain easy to discover.
-
02
To Do
Advice can be saved for later, giving users a simple place to keep actions they want to revisit.
-
03
Done
Completed recommendations become part of a visible progress history, including completion dates.
04 / From advice to decision
Showing the value behind each recommendation.
Detail pages give customers enough information to understand why a recommendation matters before they act on it.
Put measurable value up front
Annual savings and estimated energy reduction in kWh make the potential impact immediately visible.
Give upgrades more decision context
Higher-commitment recommendations add investment cost, break-even time, annual savings, energy production or reduction, and external offer information.
Keep one clear primary action
Detail pages focus the main action around saving the recommendation or marking it as done, with secondary controls for archiving or discarding.
05 / Tracking progress
From recommendation to completion.
The lifecycle was designed around a simple mental model: discover something useful, save it if needed, complete the action, and see the progress afterward.
Save confirmation
Saving advice produces clear positive feedback and reinforces the purpose of the action.
Completion feedback
Marking an action as done creates a visible record and completion date rather than simply removing the recommendation.
Discard with context
Irrelevant advice can be discarded with reasons such as Not relevant for me, Already done, or Other. This keeps the feed cleaner and creates a useful feedback signal.
06 / Recommendation types
Different actions, one consistent experience.
The system supports lightweight habits alongside larger upgrades and tariff decisions without losing visual consistency.
- Indoor temperature and heating recommendations
- Solar panel and home upgrade recommendations
- Ngenic Tune heating control
- EV-friendly tariff recommendations
- Lighting and device charging habits
- External partner offers and tariff journeys
07 / Reflection
Designing a simple path from insight to action.
The strongest part of the Energy Advisor experience is its simple progress model. Customers can discover a recommendation, understand its potential impact, decide what to do with it, and keep a visible record of progress.
What this project strengthened
The project brought together personalized content, financial and environmental data, multiple recommendation types, detailed states, feedback patterns, and mobile navigation into one consistent experience.
The final file contains 12 top-level mobile screens and states, including three core list states, an expanded feed, detail and action screens, save confirmation, and discard feedback.
Request full Figma Walkthrough ↗