Electricity eCommerce App
Consuming with awareness
eCommerce
Branding
App Design
Project Duration: 2 months / Sept - Nov 2022
My Role: End-to-end UX Designer
Background
A conversation with my daughter inspired me to start this project. She said, "Mom, I feel like I was born at the wrong time. Unlike your childhood, there's global warming, wars, and COVID all around. What will the world be like when I grow up?"
​
Her words make me think of how to contribute to a more sustainable future. This led me to design a utility app that provides energy resources and emission insights. Since people are already paying for utilities, the challenge became clear, how can we enhance their energy purchasing experience while promoting sustainability? By making the app desirable, we can raise awareness and encourage smarter energy consumption with the app.​
Problems
For Energy Supplier​
-
Enhance customer satisfaction.
For Energy Users
-
Need an easy way to handle and pay bills.
-
To be informed for changes.
For the Environment
-
Resources are limited.
-
Needs people's awareness.
Solutions​
A platform for users to
-
Manage bills and payments.​
-
Set up reminders and receive notifications.
-
Receive energy consumption-related content.
The Energy Bee app addresses utility companies' major complaints about the non-delivery of bills and lack of communication about service changes like supply interruption. Our goal is to streamline the billing and payment experience while providing smart reminders to keep users informed. By enhancing convenience, we can also drive greater awareness of energy consumption.
Project Overview
01
Empathize
1.1 Interview
1.2 Empathy Map
The question driving this research is: "How can I make people more aware of their energy use based on the current usage model?" To understand people's habits, I began by studying how they manage utility bills and what challenges they have faced.
​
Goal
-
Learn how people manage and pay their utility bills.
-
Identify the frustrations people experience in the billing process.
-
Explore the level of awareness people have regarding their energy consumption.
-
Investigate the practices people adopt to save energy.
1.1 Learn about current hobits: Interview
To better understand people's energy and utility consumption, I conducted semi-structured interviews. This allowed me to delve deeper into answe
5
Participants
-
Who have utility payment experience.
-
Semi-structured
-
In-Person x 3 (Turkey)
-
Remote x 2 (Taiwan)
100%
Not satisfied with the notification.
60%
Not receiving bills.
100%
Try to save energy at home.
40%
Pay utility bills at convenience stores.
60%
Want to know their consumption level.
60%
Pay utility bills by bank transfer.
1.2 Interview Pattern: Empathy Map
The results of the interviews were consolidated and used to inspire the subsequent design process.
Main Pains
-
Not receiving bills.
-
Not been informed.
(e.g. power cut-off, tariff raise.) -
Limited online service is not wildly available.
(e.g. opening account, starting energy supply, etc.)
Main Goals
-
Stable bills.
-
Stable supply.
-
Saving money.
02
Define
2.1 Personas
2.2 POV & HMW
2.3 Competitor Analysis
2.4 Features
2.5 Site Map
I discovered that people don't always receive their bills and notifications. Having an app would help them stay updated. After digging deeper, I found out that all their suppliers already have apps. However, it's important to figure out how to make customers aware of the app's existence. We should involve the marketing team in this process.​
Goal
-
Define the target customers.
-
Define the problem to be solved.
-
Compare solutions with competitors.
2.1 Whom we design for: Personas
Based on our interviewees' patterns, the target customers have been identified.
Nisa
Mother x Teaching Online
​
"She wants to be informed in advance if anything would affect her classes so she can reschedule with her students."
2.2 Explore user-centered solution: How might we?
How might we help Nisa know about a power cut and help her manage her schedule?​
We can:
-
Provide advanced notifications
-
A "reminder set up" function for important events like supply interruption and payment.
-
Enable her to add the above events to her calendar on mobile.
How can we help Max stay informed about cost changes and easily manage his home and cafe?​
-
Visualise bill changes during a certain duration.
-
Provide bill comparing function.
-
Allow him to handle 2 accounts at once.
-
Allow others to make payments for him.
2.4 Features & Competitor Cross-check
The prioritization of features was divided into four levels: Must have, Good to have, Future & Thinkable, and Not at the moment. The features were also compared with those of competitors to see how they solved similar problems.
The must-have:
2.5 Site Map
Site Map
After usability tests, the sitemap was adjusted as follows:
-
"Feedback a public problem" was removed to avoid confusion and safety concerns.
(Under the main category "Contact & Support")
-
"Account" was renamed to "Property" to avoid confusion
-
"Settings" was separated into its own category for easier access.
03
Ideate
3.1 Uer Flow
3.2 Wireframe & Flow Check
To determine the most effective way for Nisa and Max to make payments, the user flow was created. Based on the user flow, a service blueprint was developed to align tasks and systems to avoid the major complaints (about technical issues) we found during competitor research. I tested the user flow to find flaws before digitizing the wireframes.
Goal
-
Define the user flow.
-
Avoid pains we found in the research stage.
-
Wireframe.
3.1 User flow for Payment
.png)
3.2 Wireframe & Flow Check
A flow check was conducted with a participant from the research stage to identify flaws in the user flow before wireframe digitalization.
​Example of "Home" screen development
During wireframe development, I enabled Max to handle two accounts in ease.
Explore the Digital Wireframes
1. Starting & Home
04
User
Interface
Design
4.1 Logo
4.2 Style tile & UI Kit
4.3 Hi-fidelity Prototype
The Energy Bee logo was designed based on a lightbulb and a bee. The story behind it is that 50% of the products on supermarket shelves would disappear without bees. A style tile was set up for prototype and adjusted during the design process to meet WCAG requirements. At the end of this stage, a high-fidelity prototype was ready for usability testing.
​
Goal
-
Logo.
-
Style tile.
-
High-fidelity prototype.
4.1 Logo
Why do we contain “Bee” in the name?
Bees are important but we often overlook their significance. In fact, if bees were to become extinct, more than 50% of the products we see on supermarket shelves would disappear. Just like energy, we tend to take them for granted, but we cannot survive without them.
Why is the line shaped like a bee in the logo?
It is an idea of combining a bee and a bulb, presenting the company's business.
4.2 UI Kit
4.3 Hi-fi Prototype for Excited Features
Stay Prepared with Reminders
The App encourages users to set reminders for upcoming supply interruptions and payment deadlines, so they can take proactive action well in advance.
Compare Usage Feature
Users can easily compare their utility bills within the app, increasing awareness of consumption patterns and cost changes. A year-on-year comparison is also available.
Pay Multiple Bills at Once
Users can pay multiple bills in a single transaction. For those who prefer paying at a bank counter or convenience store, the app generates a QR code based on the selected payment amount.
The QR code is shareable, allowing busy users to delegate payments to others with ease.​
Scene 1: Set up amount and QR code
Scene 2: Arrive bank and open the App
Scene 3: Receive payment confirmation
05
Test
and
Iteration
5.1 Usability Test
5.2 Major Improvement
5.3 Final UI Design
A usability test was conducted to determine the app's usability and ease of learning. Based on the test results, improvements were made in four areas: visual design, efficiency, clarity, and navigation. With the final product, there are a few important follow-up tasks for the future, such as tracking how the company promotes the app, monitoring the installation ratio, and gathering continuous customer feedback for iteration.
​
​
Goal
-
Test the design.
-
Improve the design after the test.
-
Draw the future plan and feature desire.
5.1 Usability Test & Affinity Map
5.2 Major Improvement
1. Increased visual hierarchy and optimize space usage​
Enhance the contrast between the background and cards.
-
Changed the background colour from white (#000000) to neutral (#F3F4F6).​
-
Added shadows to cards. For example, x0 / y4 / #000000 25% / Blur 20.
Before
After
2. Optimize the Reminder feature
-
Added a top banner on the home page, allowing users to easily access the Reminder feature.
-
Enabled users to set up in-app reminders or sync them with their mobile calendar for seamless scheduling.
Before
After
5.3 Final UI Design
Beyond the design
Remember we had a few insights during the research interview and competitor research.
-
60% of users in Turkey are unaware that their supplier has an app. Collaborating with the marketing team is essential to improve app awareness and adoption.
-
Frequent complaints about communication issues, such as lack of notifications for supply interruptions or tariff changes. Our app addresses this by offering flexible reminder settings, adding real value for users.
​
The linear process below illustrates how we achieve Step 5: Increasing Energy-Saving Awareness. However, every step from 1 to 4 is equally critical, requiring collaboration across multiple teams to ensure success.
What I would have done differently?
Every step of the Energy Bee project brought me joy and valuable learning.
Here are my key reflections:
-
Prioritize the Persona’s Needs – Focus on designing core features for the persona before expanding.
-
Simplify Personas – Stick to a single persona unless user data shows significant differences.
-
WCAG from the Start – Check readability early (during the Style Tile phase) to avoid late-stage adjustments.
-
Document the Process – Capture not just final results but also the design journey with more photos.​
Thank you for exploring this project, I hope you find it inspiring.​
If you have any suggestions or would like to discuss my approach to problem-solving, feel free to reach out. I’d love to connect! Take care!
Explore other case studies
