Improvising One of Malaysia’s Leading E-Wallet Providers (UI/UX Case Studies — Part 1)
Touch ‘n Go or TnG needs no introduction. It is a well-known payment solution for most businesses in Malaysia.
Disclaimer: This article presents an unofficial, independent UI/UX case study of the Touch ‘n Go E-Wallet app. It is conducted solely for educational and portfolio purposes. The study is limited to 1 day only. Full Disclaimer at the end of article
Part 1of 2 — Read Part 2
In this writing, I want to share my improvised version of the app and why I think it can help Touch ‘n Go’s business as well as the users who use the app.
As one of many users of the Touch ‘n Go E-Wallet, I believe the most crucial design issue to be addressed is the cognitive load (complexity issue). Super Apps, by their nature, tend to become more complex.
With TnG App, We can pay for almost everything inside the app. The app offers services to:
- Pay Bills (Electricity, Water, etc.)
- Pay for Parking
- Prepaid Top Up
- Shop Online
- Use JomPay (usually to pay summons)
- Buy Insurance
- And many-many more
One day, while using the app, I thought,
“I wish it could be much simpler to achieve my goals as a Touch ‘n Go user”
Firstly, let me introduce a bit of background about myself
Hi I’m Zaim Asri The Founder of Senigrafik. I’ve been working in Visual Design field in general for 7 Years. For anybody looking to become a UI/UX Designer, you might learn a thing or two from this writing. I will write as beginner-friendly as possible so that you can decide if this is the career that suits you.
The first thing a UI/UX Designer will do is Empathize. We’ll need to conduct a User Interview to ask them a few questions about the app’s usability, their experience, pain points, and desired features. Specifically, we might ask about:
- Their primary reasons for using the Touch ‘n Go E-Wallet app
- The features they use most frequently
- Any difficulties or frustrations they encounter while using the app
- Features they wish the app had or improvements they’d like to see
- Their overall satisfaction with the app’s interface and navigation
- How often they use different functions like bill payments, parking fees, or online shopping
- Their experience with the reload process and managing their wallet balance
- Any concerns they have about security or ease of use
- How the app compares to other e-wallet or payment apps they’ve used
- Their thoughts on the app’s visual design and layout
These questions will help gather valuable insights into the users needs, preferences, and pain points, allowing the designer to make informed decisions when improving the app’s user experience
We do this to avoid a biased judgement which is a decision that is limited to our own experience only without considering the actual person that is going to use the app.
Let’s be a designer with Empathy and look at this Screenshot. Let’s think on both Business Point of View and also User Point of view.
From this screenshot, as an Empathetic Designer with Design Thinking skills, We’ll need to think for both sides:
Business
- To promote their sponsorship ads (The Football with Blue Background Banner)
- To Promote features like eShop and Points Reward (GOrewards icon with HOT badge)
- To encourage Users to invest or deposit money into the E-Wallet (Grow your money — Start with just RM 10)
User
- Primary Task — To make payments
- Supportive Task — Reload Wallet
- Additional Task — Invest, Online Shopping, etc.
Now that we know the goals for both parties, let’s do our best to ensure a win-win situation for both Stakeholders & their Customers (Users).
Phase 1: Problem Statement
At this phase, usually a UI/UX Designer will list out all the problems they’re able to identify.
Color Usage Issue
Let’s see the first issue, the color. I used to say this to anybody learning from my Digital Color Course
The More Colors You Use, The Less Control You Have Over Your Design
I’ve used TnG E-Wallet for years but never noticed the bottom Navigation (highlighted in red at the bottom). I believe the reason behind this is that the prominent Blue Color (highlighted in red at the top) is drawing all the attention.
Repeated Elements
Since the eShop is in the Bottom Navbar, my guess would be it is an important feature TnG wants their users to use.
Most probably, the User Interaction data is showing that conversion isn’t great when they place it at the bottom (as I mentioned I never notice the bottom navbar). Hence the reason there are two icons for the eShop and also GOrewards. I will show how I solve this. Let’s continue further with Problems Statement.
Another one at the top is that you can find the word eShop repeated there. I’ve clicked on it and it brings me to the same page as TnG eShop.
The right “>” is also a repeated action of a reload button.
Understanding Perspectives From Both Business & Users
Business Perspectives
For the business to generate revenue, sustainability & scalability of the product, there must be features designed to achieve these goals.
- Highlights New Feature
- Suggest Recommended Features for Users to try
User Perspectives
As a User myself, based on my use (again might be biased to my personal judgment), these are the activities I notice from my usage.
- Make Payments
- Reload Wallet
- View Balance / Transaction
- Arranging Most Used Features for easy access
Before proceeding to the UI Design, let’s summarize our insights so far
Problems
- Color Issue which leads to struggles in emphasizing important features that lead to the second problem
- Repeated Features
Emphatize
- Business Perspective
- User Perspective
Conclusion of Part 1: Identifying the Challenge
In this first part of our UI/UX case study on the Touch ‘n Go E-Wallet app, we’ve laid the groundwork for a comprehensive redesign process. We’ve identified key issues in the current app design, including cognitive overload, color usage problems, and redundant elements. By considering both business objectives and user needs, we’ve highlighted the delicate balance required in creating an effective e-wallet interface.
Our analysis has revealed the importance of:
1. Simplifying navigation to reduce cognitive load
2. Improving color usage for better feature visibility
3. Streamlining repeated elements for a cleaner interface
4. Balancing business goals with user priorities
These insights set the stage for our redesign efforts. In Part 2, we’ll dive deeper into potential solutions, exploring how we can address these challenges while enhancing the overall user experience. We’ll look at ways to prioritize key features, improve visual hierarchy, and create a more intuitive interface that serves both Touch ‘n Go’s business interests and its users’ needs.
Stay tuned as we transform these observations into actionable design improvements, demonstrating the power of user-centered design in the fintech space.”
Legal Disclaimer: This article presents an unofficial, independent UI/UX case study of the Touch n Go E-Wallet app. It is conducted solely for educational and portfolio purposes.
This work is not affiliated with, endorsed by, or connected to Touch ‘n Go Sdn Bhd, its parent company CIMB Group, or any of their subsidiaries or partners. The use of ‘Touch n Go’ in this study refers to the publicly available mobile application and is used for identification purposes only.
All trademarks, logos, and brand names are the property of their respective owners. This redesign is purely conceptual, based on publicly available information, and is not intended for commercial use or implementation. It does not reflect any inside knowledge of Touch ‘n Go’s operations, data, or future plans.
The analysis and redesign proposals represent the author’s personal opinions and should not be construed as factual statements about the app’s current design or functionality. This case study does not imply any flaws in the existing app and is simply an academic exercise in UI/UX design.
Readers should not interpret this article as financial, investment, or professional advice. The author reserves the right to modify or remove this content upon request from the trademark owners.
By proceeding to read this article, you acknowledge that you understand and agree to the terms of this disclaimer.