Improvising One of Malaysia’s Leading E-Wallet Providers (UI/UX Case Studies — Part 2)
Touch ‘n Go or TnG needs no introduction. It is a well-known payment solution for most businesses in Malaysia.
Part 2 of 2 — Read Part 1
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. Full Disclaimer at the end of article
Phase 2: UI/UX Design Process
Color Rule
The first thing I’m planning to do is to gain back control by using the 60/20/10/5 color rule. Usually it’s 60/30/10, but sometimes we need to break the rule. In this case, the brand had 2 colors. So we have to take that into account.
The First UI Draft
After removing the Blue at the top
It would be presumptuous to claim that my proposed design is objectively superior, as such an assessment would be inherently biased by my personal perspective.
Instead, I invite you to examine the comparative “Before & After” images and form your own opinion. I welcome your feedback and insights in the comment section, as diverse viewpoints are invaluable in the iterative process of design improvement.
With the Blue Color at the top removed, the “Reload” button now becomes more prominent. I also removed the TNG Card and replaced it with Visa.
The reason I did this is because from my observation, when I see some of my friends wanting to reload their NFC TnG Card, their first instinct when launching the app is to go to the Reload button.
However, they couldn’t find the TNG Card there. From that data I gathered through my observation, I believe it could be a good idea to place the TnG Card on the popup modal after clicking the “Reload Button”.
As for Reload & Transactions, I extended them to fill up the available space. This decision was made after thinking that Touch ‘n Go is a leading E-Wallet in Malaysia, where TnG might need to cover the age group from Teenagers to Elderly rakyat.
To cater to this range, I believe a slightly bigger button size will always be a welcoming change for them as it is more clickable. This will also benefit the user in an urgent situation to Top Up the Wallet.
The Bar below “Reload & Transaction” buttons I took as the most used features. Especially the Scan & Pay button. However, in this first draft, I haven’t thought about the UI below that yet.
To summarize my first draft:
- Use 60/20/10/5 Color Rule (Commonly 60/30/10)
- Remove the Blue Color at the top (this also helps reduce the user’s Mental Cognitive Load)
- Make “Reload” button more prominent & Transaction Button as the secondary CTA (Call to Action)
- Move TnG Card to “Reload”
- Enlarge both Reload and Transaction CTAs for easier clickable buttons
- Replace TnG Card with Visa. This is my personal use case. In my experience using the app, I usually struggle to find the Visa Card under the “More” option.
Phase 3: Test & Refine
After the First Draft is completed, UI/UX Designer will need to conduct the User Testing and gather feedback on the improvise version. From the feedback then we’ll need to refine the design further.
In order to strengthen our Creative Thinking and avoid having a Creative Block, sometimes UI/UX Designer will try bolder approaches. To see if there is a room for innovation.
In the image below, I’ve tried placing the Amount, Reload & Transaction at the bottom of the screen. Because it is more reachable.
This is a video showcasing the prototype
After I’ve been tinkering for some time & many versions of it, I finally reach this design. Sometimes as Designer we might be off-track from original brainstorm.
I come back to the Problem Statement, then I realize “Reload” button shouldn’t be emphasized with primary color (blue). I Change it to White Background color with a subtle gray/300 for the border.
As for “Transaction” button I make it just a “Text Link” and I placed the “Scan” button at the bottom (previously at the top), and use the Brand Primary color to emphasize it as the most important button.
With these changes, I believe we have gained back the control & established a color hierarchy to highlight the most prominent action to the less prominent one.
The decision on this design was made from the initial insights we gather at the start on User Perspectives. From this image you will see what I meant on the “Hierarchy of Importance”
Then I’ve tested it again and refined as usual. This is the final UI Design. After a few more design thinking & empathizing for both business & user perspective, these are my hypotheses:
- Branding: The original design has a prominent color at the top most probably to enhance brand presence using brand color. This also presents on all the icons mostly using Blue & Yellow which is TnG brand color.
- Leverage Familiarity: To leverage User familiarity from other E-Wallet app or the most used daily which is social media. Familiarity is one of the UX Laws.
- Scaling Revenue: eShop is actually promising & I think it is an important feature for business to gain more revenue.
- Highlights Area: below “Reload” & “Transaction” button can benefit TnG business.
Branding
After further observation & design thinking, I found that TnG app does not have any logo. Most probably because it is already a well known brand. This insight made me think that the Blue Background color dominating 30% of the screen at the top is not for branding purposes.
But just to be safe, I’ve changed the position for “Profile” icon to be at the bottom navbar & “TnG Logo” taking over the original Profile position. I also change the “Scan” icon to Yellow.
This decision is to consider if the case of the original Blue Color at the top is for Branding Purposes.
Leverage Familiarity (UX Law)
Since most people used Social media app, let’s gather some example
From this image, we can see all of the well-known Top 4 Social Media apps are placing the Profile feature at the bottom right. We can leverage this Familiarity in TnG App too. This is the reason I decide to place Profile at the bottom right of bottom navbar
Scaling Revenue
I’ve made a decision by placing the eShop at the top because I believe it will bring big impact on growing TnG’s business as a Super App platform that users can do almost everything and this includes shopping with eShop.
Hightligths Area
Now the features to achieve business goals can be highlighted at the top 40% of the screen.
Now Let’s see the comparison side by side. I’ll requote the word in part 1
The More Colors You Use, The Less Control You Have Over Your Design
With this redesign, you can see how color can control which element stands out & which didn’t. Take a glance at the redesign screen, now do you notice the bottom bar even more or just the same as the original? Let me know in the comment.
Final Prototype
Scan button at the bottom is more reachable
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.