Intensive UX project to design an intuitive price comparison app for electricity bills as part of the Ironhack course. Our main focus was on usability and practicality, ensuring that users could easily compare prices and make informed decisions.
Expected Deliverables
User Persona & User Journey
Prototype Creation &Testing
High-Fidelity Prototype
My Role
UX Researcher
Product Designer
Team
Carlos Ibañez
Danijel Kostadinovski
Sheila Talán
Duration
10-day sprint
The Brief
Zonox is a real start-up, developing a new product for the Spanish market. They are an independent energy consultancy that allows users to maximise savings by helping them get the best rates on the market at any given time. They wanted a mobile app that would allow customers to take full control of their energy consumption and electricity bills.
The Problem
Users are resigned to the fact that electricity is expensive and are unable to understand their bill and consumption. As a result, they do not compare other options, which leads them not to consider switching even if the price goes up, because they have lost hope and feel they have no control. They want to pay less but they do not want to learn how.
The Solution
Provide the user with a real solution, offering personalised energy-saving options to compare and reduce bills, with full control over the decision of switching providers if needed and without having to understand how electricity prices work.
Design Process
Discover
Business Analysis
Surveys and Interviews
Competitor Analysis
Define
Affinity Diagram
Personas
User Journeys
Moscow Method
HMW
Problem Statement
Develop
Brainstorming
Site Map
User Flow
Concept Sketches
Wireframing & Testing
Design Critique
Deliver
Prototype Design
Design System
Discover - Research
Business & Competitive Analysis
Key Findings
Differentiation in Service Models: Companies differ in their approaches. While some offer direct comparison services without commitment, others organise collective power purchase auctions. All seek to simplify the tariff selection process for the user.
Technology Integration: The use of advanced technology is key, with some companies integrating real-time consumption data to personalise and optimise energy offers, facilitating informed decision making for the user.
Focus on Renewable Energy: Several companies actively promote green and renewable energy tariffs, supporting the transition to more sustainable energy options with less environmental impact.
Community and Collective Benefits: Some platforms encourage the formation of communities for the collective purchase of energy, which can leverage the bargaining power of the group to obtain better tariffs.
User Empowerment and Transparency: There is a strong emphasis on transparency and fairness in the tariff comparison and selection process. Some companies ensure notarially supervised processes to ensure fair competition between suppliers and build user confidence.
Market Positioning and Target Audience: Companies are targeting different market segments, from individual consumers and small businesses to more organised communities and associations, offering solutions tailored to the specific needs of each group.
Surveys & Interviews
Define
Affinity Diagram
To start working on this product, we identified a number of competitors (most of them from outside Spain) that the client was using for inspiration.
We researched their business model and main competitive advantages. Most were in countries where the electricity market is more competitive than it is in Spain, and where users are more likely to compare and stayed informed.
We also identified a series of assumptions coming from the client. These assumptions were:
Users know about electricity and search for the best deals for them.
Users change companies when they see an increase in their electricity bill.
Users preferred to use the web when comparing electricity companies.
To validate or not these assumptions, we launched a battery of questions in a survey and received a total of 89 responses; from the surveys, we conducted in-depth interviews with 8 users and 1 SME (subject matter expert). With them we found the following:
Some quotes from in-depth interviews:
Insights
What we have found is that users:
They do not believe they have time to look for the best electricity company because they do not know how billing works.
Because of this lack of time, they do not switch companies, at least out of necessity.
They prefer to make changes to their routine (such as programming the washing machine to work at the cheapest hour) rather than switching companies, simply because they are afraid of the mental burden of searching for a new company.
They prefer the web to download an app for this type of service.
Personas
After sharing the different users with the client, we focused on the user persona represented by Marta. And with this info we moved into understanding Marta:
User Jouney
After going through Marta’s day what we noticed is that Marta does not get to compare companies, because getting to learn what she needs to look for when doing this is simply too much. She trusts family and friends to make decisions such as this one because she sees them as trustworthy.
With Marta and her main pain points in mind, we moved into the…
Problem Statement
Users are resigned to the fact that electricity is expensive and are unable to understand their bill and consumption. As a result, they do not compare other options, which leads them to not even consider switching even if the price increases because they have lost hope and feel they have no control. This leads them to change their habits to the detriment of their quality of life.
And hypothesis statement
We believe that, if we provide users with clear and easy-to-understand information about their energy consumption and offer them personalized energy-saving options, then they will feel more motivated to explore energy-saving alternatives, resulting in greater control over their energy expenses and improved quality of life.
At this point, we had a design critique session and we met the client right after. Two of our main deliverables were ready so we moved into closing the scope for the end project.
We had agreed on an app but after seeing the results from surveys we moved into a web app as users mainly use the web to compare, but the client needs a design for an app that could be adjusted into a web.
Talking to the client we realised that the priority now was to have a demo of different workflows to be able to show to investors, and an idea of the product for them to start developing. So we close on delivering three workflows related to our MVP, see the tree below:
Develop
We moved into ideation. We used HMW, brainstorming and crazy 8s.
And we arrived at the first idea we all felt made sense. So we moved into lo-fi and started prototyping.
Delivery
As soon as we had our first lo-fi we moved to test:
We realised users understood the workflow but it was crucial for us to have the right information on the screen in terms of copies, as they need to provide some sensitive info and they would only do so if understanding why.
As this required having mostly all the info on the screen, we started working with mid-fi (that looked more like hi-fi) to ensure we tested the product properly. And from here we tested our 3 workflows with 8 users total and iterated 3 times. Main testing and changes:
(Please note that the product was first created in ES and then translated to EN)
Flow 1 / Task 1: Register
To be able to have a personalized experience, users need to register by adding their email, uploading one invoice and verifying their identity by providing identification cards.
Users found the flow very easy, but we found 2 main challenges:
Ensuring this information is available to them and they understand why it is necessary and feel secure about it.
Summarising enough that they actually read the info, as most users would want to leave as soon as they saw lots of text and the action of adding a personal document.
Below there is an example of the feedback and different iterations we made until we found a sweet spot to show the info:
Flow 2 / Task 2: Choose your saving method
For the second task, we asked users to choose the method that help them save the most. What we saw is that:
We needed to use the same language in terms of numbers (for example always using a discount number, or a total amount per month number, we decided on the first one).
We also wanted to add some value by providing information about their current bill. Still, we noticed the users were not interested and it was confusing, so we tried simplifying and finally removing it altogether as we saw it was not as valuable to them as we previously thought.
Finally, we also noticed that the correct alignment would make it easier for users to understand what they were comparing.
Flow 3 / Task 3: Upgrade to premium
Lastly, our last test was about achieving a smooth transition from the free service to the premium one.
We tested a few copies and button forms to see if users understood what came next. We asked them what did they expect after clicking on each button and what feelings they had once they knew what came next.
Our observation was that we needed to delicately draw their attention to the possibility of performing some actions after clicking the button, while also emphasising that performing these actions would be easier with our help.
After finishing the testing, we moved into hi-fi. For choosing colours and agreeing on the final font we looked for inspiration in the force of nature, as the future of the business will be related to solar energy.
Moodboard
And discuss many different colour palettes, and we created our style tile:
We decided that we would use colours to differentiate the free and the premium side of the app. And we moved on to develop our final product:
Next Steps:
From here, after we have finished with the MVP, we recommend the client follow up with the implementation of:
User profile settings: to give the user control over their notifications and allow them to delete their account.
Signature process on auto-switch: to define and simplify the process of changing tariffs or companies with user confirmation.
Manage different supplies: thinking on the advanced profiles with multiple suppliers contracts to manage their savings in the same account.
After working on the first project with a real client, and building a real product, we have learnt a lot, we have mostly internalized some of the best practices we should keep in mind when working with design thinking:
Definition of scope: Our first challenge with a client brought us the opportunity to understand the needs of the user and align them with the business needs.
Quick prototypes: After the test process, we understood the need of making quick prototypes the fastest way possible.
Importance of UX writing: With this project, we improved our abilities in UX writing, and realized how challenging it could be to make language understandable for the user.
After the product was presented, the client was able to easily show what their final product would look like, and they won the 5th edition of Málaga Tech Outstanding (read the article in ES here). We are very happy of having contributed to that gain.
What do you think of this product?
I Value Your Feedback!
Your experience and thoughts can mean a lot to me. If you have any suggestions, feedback, or issues you've encountered while reading this case, please share them. Your input will help me make the content even better.