Buying prepaid electricity is daily talk for most people in South Africa. It should be an easy seamless process, but when viewing the UI design on the Standard Bank App this was not the case.
As a designer, I’m always looking for problems to solve and recently I found one. The Standard Bank App has a confirmation/success page when prepaid electricity is purchased. I felt it needed some love. Hence this project 🙂
PROJECT
Banking App Redesign
Concept Project | Standard Bank
DATE
December 2023
ROLE
UX Researcher, UX Designer, UI Designer
Research & Analysis
Firstly, I did competitive benchmarking against other banking apps that offer the same prepaid electricity service. Secondly I conducted a UX audit to see if the confirmation page adheres to UX design principles.
When doing the competitive benchmarking, I focused on the Capitec Bank App. Capitec currently ranks first in the Mobile Banking category according to InSites Consulting South Africa. This gave me the chance to evaluate how the top ranked banking app in the country operates.Â
Analysis of the SB Banking App
- The confirmation page does not tell you how much units of electricity (kwh) you have bought.Â
- There is no share button, incase user need to send the prepaid electricity token to someone else.
- The “repeat” button label could be improved upon, to feel more relatable for users.
- No indication that the purchase was successful.
- The token number is very small and does not make use of chunking. (The token number is the most important information when purchasing prepaid electricity as it needs to be entered into the prepaid meter within the household.)
- The bottom navigation of the app is not visible. This limits the user journey once they reach this page.
- The colours used in the UI design are on-brand (blue tones)
- The UI displays additional payment details which could be useful for users in case that information is needed.
Analysis of the Capitec Banking App
- It’s clear that the transaction was a success. Through the use of the colour green in the UI.
- The user is told how many units of electricity have been purchased.
- The purchase token is bold and easily seen.
- The user is giving the option to share the electricity token and view purchase history.
- The bottom navigation is still visible on the success page. Giving users quick, easy navigation to complete other tasks on the app.
- Standard UI design, with focus on its content.
- Additional payment information is not available at face value. The information may be option on a different page.
The Design
When designing I focused on eliminating the pain points of both the SB and Capitec Bank Apps. The UI design was aligned with SB Bank’s brand colours as this project focused on redesigning their confirmation page.
Before
After
Redesign adjustments:
- The purchased token was made bold and easily seen on the UI.
- Users are able to see the amount of units (kWh) purchased.
- It’s clear the transaction was successful. (Green check).
- The payment details are clear and neatly organised.
- Bottom navigation included.
- A section was also created where users could easily share the purchase token, repurchase electricity or view purchase history.
Conclusion
In the end, users found that the redesigned interface:
- Made it easier to share the purchased token with others.
- Showcased the token in an easy to read layout.
- Provided quick actions available such as viewing history, repurchasing electricity or simply sharing the token with others.Â
- Was more user friendly than the original design
To take this project even further, I would start looking at the entire user journey for buying prepaid electricity and develop a prototype to showcase the improved design. It’s possible that more pain points can be found before users reach the success page of this journey.Â