The TopUp App
A mobile and responsive web app that is dedicated for local residents to top up their pre-paid gas and electricity cards/keys whilst on the go or from the comfort of their own homes.
role:
UX designer designing an app for TopUp from conception to delivery.
UX designer designing an app for TopUp from conception to delivery.
responsibilities:
Conducting interviews, paper and digital wire-framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Conducting interviews, paper and digital wire-framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
project duration:
November 2022 to February 2023.
November 2022 to February 2023.
The problem
Local residents of the East London borough of Poplar have complained multiple times that the local convenience stores always seem to have issues with their gas and electric top up metres. This sometimes leads them to travel miles to the next available store to top up. This includes the elderly and those do not drive.
Design an app for Poplar residents that allows them to top up their gas and electric cards easily from the comfort of their own homes or on the go.
The goal:
Understanding our user
phase 1
- The user research carried out
- The personas we created from the gathered research
- Problem statements we designed from
- Our user journey maps
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who don’t have time to travel around East London for working gas/electric top-up meters due to their local ones not working.
This user group stated other issues such as not driving and having to take public transport at late times just to top their gas/electric cards and keys up.
This user group stated other issues such as not driving and having to take public transport at late times just to top their gas/electric cards and keys up.
User research: summary
Other user problems included physical issues such as disabled residents having to wait on family members and friends to have to top up their cards on their behalf.
User research: pain points
Residents are frustrated with kiosks not working for one reason or another.
Inconvenience
Elderly residents who are less physically able than others don’t have the luxury of travelling the area for the next available kiosk.
Accessibility
Local residents are too busy to spend long periods of time to look for the next available gas/electric kiosk.
Time
THE PERSONA
| Goals
- To easily top-up his gas/electric card and key from the comfort of his home
- To track his transactions of gas/electric top ups.
- To send credit to his loved ones in this cost of living crisis.
| Frustrations
- I tend to keep my gas/electric receipts, I say I’ll shred them but they just pile up
- ‘I sometimes get messages from my mum in-law that her gas/electric isn’t working, so I would have to make a journey to top up for her, she can’t be walking up and down herself for long periods.
- “Driving around at 10pm. to the next local store to get gas and electricity is quite annoying, and it’s quite frequent.”
| Bio
Azim is a Business Analyst who is married to his wife with 1 child. He has a prepaid top-up meter at home to charge his electricity and gas meters. He finds it frustrating when he has to go to the convenience store and the kiosk to top up is not working. This leaves his family with no heating or electricity.
Age: 32
Education: BsC Computer Science
Hometown: Poplar, East London
Family: Wife & 1 child
Occupation: Business Analyst
Education: BsC Computer Science
Hometown: Poplar, East London
Family: Wife & 1 child
Occupation: Business Analyst
"
-Usen
Driving around at 10pm. to the next local store to get gas and electricity is quite annoying, and it’s quite frequent.
The problem STATEMENT
Azim is a busy working adult who needs easy access to a gas & electric top-up app because his local kiosk at the convenience store usually is out of order, causing him to travel miles to locate a working one.
user journey map
Mapping Azim’s user journey revealed how helpful it would be for users to have access to a dedicated Gas & Electric deposit app.
Starting the design
phase 2
- Paper wireframes
- Digital wireframes
- Low-fidelity prototype
- Usability studies
paper wireframes
I had to ensure iteration of the paper wireframes were addressing the user pain points as much as possible before committing to digital wireframes.
For the home screen, I prioritised a quick and easy display of cards and keys with their balances to help users save time.
For the home screen, I prioritised a quick and easy display of cards and keys with their balances to help users save time.
digital wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Brief summaries of transactions and links to important articles will be found here
The carousel will allow users to choose what card/key to deposit into.
Being able to deposit credit onto the gas card/key without hassle was a priority when creating this app, so we ensured each step was sequential and easy to understand.
This interface will show all available banks that will be established with TopUp that our user can add their funds from.
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was adding money to the gas card, so the prototype could be used in a usability study.
View the Top Up App
low-fidelity prototype
View the Top Up App
low-fidelity prototype
Round 1 findings
Usability study: findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 2 findings
Balance not available before making the final deposit, would be good to know the amount on card before proceeding
Text and buttons more bigger, felt awkward tapping as they were small.
Users they felt the transition was too sudden after selecting the amount to be topped up.
Users felt relieved at the thought of this prototype, as it would eliminate a lot of inconvenience if real.
Refining the design
phase 3
- Mockups
- High-fidelity prototype
- Accessibility
mockups
Early designs allowed for iteration,
but after the usability studies, I was able to work on the pain points that arose from our users.
I ensured the main priority pain points were addressed in the designs; one of our P0 was the buttons/call-to-actions being too small.
but after the usability studies, I was able to work on the pain points that arose from our users.
I ensured the main priority pain points were addressed in the designs; one of our P0 was the buttons/call-to-actions being too small.
Before usability studies
After usability studies
The second usability study revealed frustration with how sudden the deposit process was, just in case of accidental amounts being typed in. To rectify this, I ensured that there was a ‘are you sure?’ screen for the user to confirm their deposit.
Before usability study 2
After usability study 2
High-fidelity prototype and key screens
The final high-fidelity prototype presented cleaner user flows for adding credit to the gas/electric card or sending credit to loved ones. These were the key mockup screens we needed for showing the basic functionality of the Top Up app.
View the Top Up App
high-fidelity prototype
View the Top Up App
high-fidelity prototype
Accessibility considerations
Ensured all components passed WCAG AAA accessibility test.
Used clear imagery for the gas/electric cards that the users will be very familiar with.
Provided access
to users who are vision impaired through adding alt text to images for screen readers.
to users who are vision impaired through adding alt text to images for screen readers.
Used globally recognised icons to help make navigation easier.
Going forward
final phase
- Takeaways
- Next steps
Impact:
The app makes users feel like Top Up would save them a lot of time and hassle from travelling to stores for a kiosk.
One quote from peer feedback:
"I love how this app thinks about we the community, things like this are brought up weekly in our borough meetings, but nothing seems to be done. This would really eliminate a lot of issues".
The app makes users feel like Top Up would save them a lot of time and hassle from travelling to stores for a kiosk.
One quote from peer feedback:
"I love how this app thinks about we the community, things like this are brought up weekly in our borough meetings, but nothing seems to be done. This would really eliminate a lot of issues".
What I learned:
While designing the Top Up app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
While designing the Top Up app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
Takeaways
We will conduct another few rounds of usability studies to validate whether the pain points users experienced have been effectively addressed and to see if new pain points arise for us to address and solve.
next steps
We found that a percentage of our users are used to accessing utility related services online using their desktops rather than mobile. It is important that we ensure TopUp is fully accessible for all users, so we designed a responsive web app for TopUp, which has all the same features as the mobile app.
Here is a mockup of the TopUp on a Surface Pro, where I have expanded the components and added a few, such as the header and footer. The breakpoint for this screen is 769px — 1024px. A breakpoint in a responsive design is the “point” at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience, in this case, for tablet or desktop.
responsive web design
header
I ensured it uses a single fluid layout that fits any screen size. So, if then accessed on both desktop and tablet, the layout will be similar. With this, I made sure I reduced friction by understanding and removing the unnecessary elements in the page. I prioritised the important menu options for the top, highlighted the main Call To Actions, being Top-Up, Pay and Send, then I also ensured continuity by keeping the utility card illustration as the main focal point the user sees.
footer
Thank you for your time reviewing my work! If you’d like to see more, feel free to browse my projects below or get in touch with me by simply clicking here.
Photo credits: Daria Nepriak, Estee Janssens, Desola Lanre Ologun, Glenn Carsens- Peters, Joseph Gonzalez
