Overview
Setel started as a simple way to pay for fuel at Petronas, however over the years it has evolved into a comprehensive motorist "super-app", offering other mobility services such as EV charging, parking, insurance, and more. As the feature set grew, the original homepage began to limit the discoverability of these new services.
I redesigned the landing experience to replace the static map with a dynamic, personalised interface. This surfaces the right feature at the right time for our 4 million users, driving app usage well beyond the petrol station.
FEATURE DISCOVERY
discoverability of other non-fuel features
USER GROWTH
EV user base
YEAR
2023
PLATFORM
Mobile
COMPANY
RESPONSIBILITIES
Interaction Design
Design System
User Flows
Prototyping
User Research
Solution
Personalised service cards
Fuel, parking and EV charging cards will appear dynamically based on the location when the user launches the app.
More services at a glance
By de-prioritizing the map, the space allowed a clear service grid to be introduced to showcase the full mobility suite without much scrolling.
Action bar
A new horizontal shortcut bar for instant access to high-frequency tasks, and allow EV users to quickly add their vehicles to access EV features.
Design system
Designed modular components to ensure visual consistency and streamline development process.
WANT TO DEEP DIVE?
How it started
Initially, the project lacked specific goals. Our user research team led a brainstorming session with product managers for our different product verticals to identify issues on the homepage. This session helped us understand their objectives and align our design efforts accordingly.
Challenge
How might we design a streamlined homepage that surfaces a diverse range of products while intuitively cater to user needs?
The current Setel homepage is tailored for the fuelling journey, with the expansion into additional services, several issues have surfaced:
Poor feature discoverability
With the map taking up half the screen, key features are hidden below the fold. Data shows only 13% of users ever find and use them.
Friction in user segmentation
The app's fuel-centric design obscures EV charging behind a complex vehicle registration flow, leaving most EV users unaware the feature exists.
Research
I leverage on existing data and user research to help shape our initial explorations.
Utilising Existing User Research
Our user research team has previously identified the needs of street parking and EV charging users, when we were launching these features.
Data Analytics
Collaborated with the data team to analyse Setel App usage.
Competitive Analysis
I reviewed homepage designs of super apps locally and internationally to glean insights on how to effectively present multiple services.
Key takeaways
Design explorations
A few key design opportunities were identified which would be the foundation of our redesign.
1
To map or not to map
The decision to keep the map on the homepage was tricky as there wasn’t useful data on how much the map is being used. It helped our app stand out visually but it was taking up too much vertical space. We went through multiple rounds of discussions on whether it should be shrunken down or be removed entirely.
2
Segmentation of homepage for EV users
3
Improved discoverability of features
Feedback from our customers revealed that our loyalty card, top up, and payment features were hidden under multiple layers. We needed to improve the discoverability of these features.
Usability testing
For testing, I created multi-flow prototypes to simulate a seamless experience. The homepage map is intentionally omitted for the test to see if users noticed its absence.
In short, we only achieved our goals partially
Improved discoverability of features
All users understood that Setel offers more than just fuelling with the new homepage.
Map’s absence wasn’t an issue
Users didn't notice the map was missing until it was highlighted to them, suggesting it wasn't a key feature.
Personalisation for EV Charging purposes
EV users were delighted of having a surfaced EV card
EV user unaware of the Add Vehicle function
When prompted, user feedback is that they didn’t notice the button
Location cards are too similar visually
Users can't differentiate between parking and fuel card
The design went through another round of iteration to address the problems surfaced during testing
I relocated the 'Add Vehicle' function to the action bar to ensure higher visibility, and leveraged the distinct icons previously used on the map. Integrating these icons into the cards themselves would provide a clear visual distinction between the features.
What I learned
Navigating ambiguity
With a broad homepage redesign goal, early research and stakeholder collaboration were essential. This collaborative narrowing of the problem space shifted our focus from a reactive stance to a proactive, goal-driven approach.
Balancing core functionality with feature expansions
As a Setel evolves, the homepage must effectively communicate the expanded value proposition without overwhelming users or detracting from the primary use case. The redesign created a flexible foundation that accommodates current and future services.
