Setel app was primarily focusing on the fuel purchase proposition in the few years of its inception. It has successfully disrupt the way people pay for fuel and earning loyalty points at the fuel stations — while solving multiple pain points in terms of safety and being a digital payment solution. Setel is supported exclusively at all PETRONAS fuel stations nationwide.
Background
Evolution of Setel's app homepage from 2018 to 2022. When I joined Setel in late 2019, I started to lead the visual upgrades across the app with small iterations as we started to have established proper design system and design direction.
2018
2020
2022
Problem statement
In 2022, as part of its growth plan, Setel started to launch few adjacent ideas targeting its motorist user base — such as motor insurance, roadtax renewal, automated parking, street parking, EV charging and other payment related features. Setel is ambitious that these features will help them to gain new users that can help to propel the growth of the business further.
However, a big portion of the existing user base are not aware about all the new features that were launched, even though they use the app to purchase fuel at least once a month. This makes it hard to increase the adoption of these features, therefor affecting our overall business metrics.
Hypothesis
There's few assumptions on why we thought this was happening to new and existing users:
A
B
Mainly focuses on fuel purchase
The majority of the screen real estate being prioritised for fuelling feature. This makes it harder for user to associate the app with other non-fuel related features.
C
Ineffective features placement
Being only slightly visible in the first fold, it somehow discourages discoverability of the new features as it requires users to scroll down.
Setel app homepage in early 2023
A
B
C
Setting directions
With problem statement and hypothesis in mind, we set out to invest some time to validate the assumptions and try to figure out how to design a better version of the homepage. Here are the directions I've shared to the team:
1
Improve non-fuel features visibility & discoverability
These features should be highly visible for new and existing users. It should also be attractive enough to encourage user to explore them beyond fuel feature.
2
Fuel purchase experience should not be affected
As the core part of the business, this changes should not impact how users are currently using the fuel purchase features. It should stay as it is, or be better.
3
Improve e-wallet & loyalty point experience
Taking this opportunity to also solve some of common problems surfaced over the years, which will hopefully lead to better experience, and reduce support tickets.
Team formation
As the lead for the project, I built a small team of 2 product designers to work on this project with me. These designers need to have a strong mobile design skillset as it's a very important aspect in ensuring its success. For the usability testing, we collaborated with 2 other UX researchers who helped with recruitment, research scope, scripts and such.
Explorations
The team spent some time doing bunch of desk research and visual explorations and brainstorm together on some of the options. Along the way, we realised there's few areas that we need to decide before we can narrow our focus down. Here are some of them:
"Do users find the map useful, especially for purchasing fuel?"
The map UI takes up a lot of space on the homepage, which evidently makes it hard for the rest of the content to stay within the first fold. If we were to get rid of the map, we would be able to use the space for more important content. This is something we wanted to validate as part of the project.
"Which frequent actions should we prioritize on the homepage?"
Customer voices and prior researches shows that some user struggle to quickly top-up their e-wallet, and not aware about point redemption features. We decided to choose these two actions and make it a lot clearer as part of the new homepage. We need to explore the right placement for it.
Having these in mind, the team come out with various visual design and layout structure exploration with their own assumptions and considerations. Here are some that I personally created and contributed to during the earlier exploratory phase.
The idea
We constantly shared our progress and often find ways to merge multiple ideas into a more cohesive solution — with strong emphasis on addressing those assumptions. At the same time, we also wanted to make sure we establish a good standard for the visual design, to not sacrificing our design principles. It has to work, and looks good at the same time.
Towards the end of the exploration phase, we've aligned one the primary idea for the new homepage. Here's the structure:
Quick actions
A
Access to the full map view to see other related locations nearby
B
Vehicle switcher to personalise experience based on vehicle type
C
QR code scanner, for our open wallet and DuitNow payment features
D
Action bar for repetitive actions: payment (top-up and manage cards) and loyalty (activate and redeem)
Fuel station
E
Fuel station card remain largely similar to the previous version, to ensure familiarity, not to break experiences for existing users
Other services
F
Collection of non-fuel feature tiles, more visible in the first fold for better discoverability
Other content
G
New onboarding checklist items for users to get started with recommended steps for a better experience on Setel
C
D
B
A
F
E
G
Usability testing
The research team worked on the research content, participant recruitments and scheduling. They recruited 15 participants, with a mix of existing Setel users and non-Setel users who are not familiar with the product yet.
We used this opportunity to ask some questions and get the participants to share their perspectives on the new homepage design. For existing users, we also wanted to evaluate the level of acceptance and adaptability, compared to their current experience.
Research planning board on FigJam — primarily led by the researchers, with me helping to narrow down our objectives, assumptions and resource planning for the prototype development that is being used in the usability testing.
Key takeways
Users don't really need the map, they just need to know which petrol station they're currently at
Change of perception: No longer an app to pay for fuel and earn points only, but with vehicle-related offerings
Functional, familiar interface, more user-friendly and able to see all at a glance
Top-up and loyalty point actions are more straigtforward and easily discovered
Feature tiles with "View more services" piques user's curiosity to expand it and explore more
Majority were unsure about the purpose of the vehicle switcher. Mismatched expectation on what user understand from the feature
Map and scan icons are unclear and doesn't really stand out for them
Onboarding checklist are perceived as ads due to its positioning and sizing
"When I see the location, the map is not important for me. This experience without the map is better for me.”
— Participant
"When I see the location, the map is not important for me. This experience without the map is better for me.”
— Participant
"Everything related to vehicles is here. It's like Setel is becoming a one stop centre for everything that our car needs. I like the new design, it really speaks about what Setel offers."
— Participant
"Design baru lebih menarik, lebih mudah nak faham. Tak perlu nak cari dan scroll, terus nampak dekat home."
— Participant
“This is complete for me. Everything is very familiar for me. I prefer to go with an app that I am already familiar with than exploring new layout. Nothing I dislike.”
— Participant
“I like the EV card in the middle. It’s right there, I don’t need to scroll.”
— Participant
Final iteration
Based on the overall good feedback received from the participants, we felt a bit more comfortable to continue with this direction, while making several changes to address some of the minor and major issues uncovered in the study, while making sure business objectives being met.
Accessible action bar
Most frequent actions that user need to do (or be aware of), are positioned clearly on the top part of the screen. This enhances first-time user experience as they can get started immediately, especially to top up their Setel Wallet.
Contextual location cards
This is Setel's unique pattern compared to other e-wallets in the market. Contextual location cards provide a quicker way to complete a task (fuelling, parking, charging) whenever user opens their app within a specific geofence radius and sorted based on their location.
Outcome
The new homepage design was finally launch to the public in November 2023. I was a successful launch without much major hiccups and complaints. Most importantly, existing users are still able to complete their fuel purchases smoothly, with minimal learning curve.
Coincidentally, Setel was one of the e-wallet selected by Malaysia government to disperse some monetary incentives to its citizen. The new homepage manage to endure huge spike of new users and traffics. It also potentially reduced the number of support tickets related to payment and fuel purchase, since it comes much clearer homepage experience.
Credits
This project has been a highly collaborative projects between many functions in Setel. We took roughly 1 year from the initial conversation to getting it out to the users. I wont be able to get this project to the finish line without the help from our talented product designers (Stan Tan, Marissa Lim, Ling Jien, Apple Lim) and UX researchers (Agnes Yap, Lim Leon and Karen Yap). And of course to product managers and many engineers from multiple teams who helped to bring this to fruition.