📌 Context

Setel is a fuelling app owned by PETRONAS that was introduced to the market as a faster and more convenient way to fuel your vehicle at a PETRONAS station.

What we know

Part of acquiring users, the company has employed on-ground staffs that will be present at petrol stations. They would be approaching customers who are not refuelling via Setel and introduce these customers to sign up with a discount.

---

🔍 Problem

1. Onground promoters have shared that a subset of customers who shown interest but is facing some challenges with the current app:
   1. Long-distance truck drivers who do not own a top-range smartphone or is using the company-issued device that is not top-range either, that is not able to be updated to the latest OS. Thus, their device is not compatible to download the app due to its minimum specifications.
   2. Older generation folks who may or may not own a compatible device. But those who are tech-illiterate are finding it challenging to use due to pro-gestures or modern design.
2. Downgrading Setel’s app compatibility may not be an ideal choice as it affects the current design and UX that requires a heavier OS engine to run.
3. Not addressing the gap blocks the business away from acquiring these potential users who make up a large group; which from market research / data from PETRONAS reveals that these users make up a large sale and volume of PETRONAS customers

---

💪 Motivation

Business have found an opportunity to introduce Setel Lite

💡 Providing a lighter, simpler and more straightforward to fuel can lower the barrier to entry and cast a wider net to acquire potential customers to use Setel.

There are many product in the market that utilises this approach to help cast a wider net to acquire these untouched markets ie. Uber Lite, Facebook Lite.

---

Opportunity

How might we create a lighter, more accessible way to experience Setel?

---

🎯 Goals

Ease of use without compromising key functionalities
Simpler navigation would help both user types

---

🔦 Challenges

---

✨ Process

Due to the many features / page within Setel Lite, in this case study I will only be focusing on one feature in Setel Lite: Top-Up flow

Desk research

Internal

I started out by auditing the current UX of the main app. I find that:

1. The current UI has many decision / entry points for the user in one screen
   This works for users who are tech-literate however it potentially could be a heavy decision point for others. Assumption: Break up decision points for intentional friction can help aid users to navigate faster despite the additional clicks
2. Hidden (read: contextual) buttons may be dark UX for tech-illiterate users
   While showing elements contextually is an elegant solution for modern apps, it may be too hidden for Lite user groups to discover. Assumption: Keeping CTA / entry points highly accessible can help users achieve their JTBD more efficiently

External

I also looked into existing apps on the market that also share this business strategy ie. Uber Lite, Spotify Lite and Facebook Lite. I compiled screenshot and screen recordings to ultimately to:

1. Understand the UX patterns they have adopted in their main app vs. Lite app
2. What is compromised in their Lite app vs. main app
3. What is not compromised but done differently in their Lite app vs. main app

User testing

With the proposed approved solution from my Design lead, I took the initiative to run a preference test with the available resources that I have, in order to get further validation.

Due to remote working at the time, my reach was extended to my family members and my colleague’s family members for testing.

Variants

Objectives

• To find out if the top-up flow and screens enable user to perform the top-up quick and efficient
• To find out if the top-up button is visible enough
• To observe how user navigate the top-up screen (and in different layouts)

Hypothesis

• Users will find it easier to top-up with a particular payment method when there is only two entry point presented
• Users will find it easier to understand the different top-up method when there is more context provided

Participants profile

Factors	Details
Total participants	10
% of existing Setel users	0%
Age ranges	45-65

Testing steps

I designed this test to help get participants into the same setting. Volunteer researchers are required to:

• Ask the participant their understanding of Setel
• Ask the participant about top-up knowledge first. If not very aware, top-up concept is explained
• Briefly explained how top-up with voucher works
  • Ie. Buy at PETRONAS station, get a code, then use the code to redeem via the app.
• Provide a voucher sample and allow user some time to read voucher details

Limitations

1. Familiarity:
   Users are tested twice, with 1 day apart between tests, to get a sense of how much quicker they perform the task. This may impact due to how familiar they are with the goal and thus performing quicker than expected.
2. Knowledge on voucher
   All users do not know how vouchers work. Explaining to them pre-test may not be an ideal situation.
3. Prerequisites explained differently
   Participants are explained separately and differently by different testers, which can warp some understanding
4. Figma mirror prototype
   Will highlight the active tappable area when user taps on a unrouted path in the prototype which can provide some hints to the testees on where to tap
5. Pool of testers
   Does not cover all target user of Setel Lite

User testing results

Variant A

❌ All of them tapped on the amount under online banking first


❌ Some who read the title, seem to instinctively tapped amount first


❌ Some testees feedback that they did not notice the bottom row / anything below the amount tiles

Variant B

✅  **100%** find this option easier to navigate


✅  **100%** find this option easier to understand

Additional observations:

- Users tend to use both hands to navigate / interact with the app
- 1 / 4 users had slight difficulty finding the top-up button on the homepage
    - This user scrolled down to the homepage to search
    - Another user also scrolled the homepage for Test 2
- Most users tend to read before proceeding
    - However, assumption is that users are not very familiar with voucher top-up to distinguish the different options OR do not understand the task - thus they some read `online banking` and still proceeded

---

Moving forward

During my time at Setel, I worked on all other key screens to complete the full experience of the app and worked with the assigned Android Engineer for Design QA phase.

---

📸 Press

(Sorted newest to oldest)

18 April 2023

Setel launches Setel Lite on PlayStore! 🔗 Download here

embed

March 2023

Recently, PETRONAS held an (internal) event to shoutout about the upcoming app that will be launched to public very soon 🙂