Solving a hardware limitation for Setel users through Design
Context
Setel is a fuelling app – owned by the Oil & Gas giant, PETRONAS – that was introduced to the market as a faster and more convenient way to fuel your vehicle at a PETRONAS fuel station.
Prior to Setel, customers would either:
- Pay by card by the petrol kiosk
- Downsides: Cards have a pre-hold of RM250 at any petrol stations; (At the time) Bank cards require PIN instead of wave; Fiddling around with wallet.
- Pay by cash at the counter
- Downsides: Having to walk to the counter is time consuming; Often times the queue can be long.
How Setel changes the game: Users select their pump number on the app, with their pre-selected payment method (and customised pre-hold amount) and start refuelling.
How it works
Each PETRONAS fuel station is marked with a geofence radius. If a user’s current location (determined by their device) is outside of the radius, the app would recommend the nearest fuel station to navigate to, thus not allowing the user to purchase fuel remotely.
When a user arrives within the station’s geofence, the app will then display a touchpoint for users to navigate into the fuel purchase journey.
Problem
We received several customer service reports showing users are complaining about being at a petrol station, but the app does not allow users to Purchase Fuel.
In the case on the right, what the user is experiencing:
- Map shows ‘not at station’ mode
- Station card shows 'go to station' button
This user is currently at the station but his location pin (green) is shown being away from the station (blue).
On records, this is affecting ~10 users. These users are loyal users of Setel based on historical data.
Investigation / Data points
Some debugging was conducted by our engineers. It is revealed that certain older Android devices have hardware limitations / technicalities that is causing this.
This hardware limitation is preventing the device’s geolocation from working accurately in detecting the user’s location unless the device has Wi-Fi turned on (Just turn on, connecting to a hotspot is not needed).
Opportunity
How might we improve the experience of Setel users who are facing technical hardware issues, through design?
Challenges
Moderated study
We lacked the resources to conduct user interviews with the affected users, which could have provided us with more insights into their experience.
On-ground testing
We were unable to run tests of the solution on-ground before we release
Process
Evaluating the situation users are in, it was clear that there are several factors that would have to be ruled out to confirm that a particular user would be experiencing this location accuracy issue:
✓ Uses an android device
✓ Location permission is granted
✓ Wi-Fi is not turned on
✓ User's location radius is ≥ 900m wide
Seeing that the only troubleshoot option is to enable the device’s Wi-Fi — once users have met all the criteria above, we look to address the issue through informing users of their situation and provide a timely solution. I explored a few ways we can communicate this:
Explorations
Option 1: Using toast component
Pros
Has haptic (for devices that has haptics) and is more prominent (vs. option 2 below) to alert user so user won't miss out the potential troubleshoot
Cons
- May not provide sufficient information / explanation as to why user needs to turn on Wi-Fi and whether they need to connect to a Wi-Fi hotspot (they don't need to).
- If user taps 'got it' without understanding, toast would not appear again until app is relaunched (or perhaps we can set every time they switch back to Home tab, display toast)
- May be too forward / intrusive to users who are near a station but do not care for location accuracy
(ie. going to Mesra store instead of activating a pump; or even just passing by a station and happen to be within its geofence radius)
Option 2: Using a banner component
Pros
Provides more context / explanation to user
Cons
- User has to tap banner to get more information.
- May not be prominent enough when user is annoyed
- May not be suitable when there is already a banner in used on the homepage (but we can prioritise showing this Wi-Fi banner instead of another when user meet the criteria)
Option 3: Card on homepage
Pros
- Pushes station card down which is contextual since user is unable to fuel (can be a con too)
- Attention grabbing
Cons
- Users in-between the radius range might see UI shift
- Might be too overwhelming for users who are nearby but not a location accuracy 'victim' when their Wi-Fi is off (ie. banner is in the way when they're looking to click 'go to station' for gps
- Visually pushes down future Deliver2Me access point for users who buy items without refuelling (and do not care about purchase fuel)
- May look like an ad banner
After design reviews → the consensus gathered was that Option 3 was the best solution but it still did not satisfy all concerns. I went back to the drawing board with the feedback and came up with an improved solution:
Finalised solution: Extended fuel card
How it works
- Upon launching the app, it automatically detects if the user satisfies all the criteria above before serving this UI
- There will be a slight delay before the UI is shown in order to allow the motion to capture the user’s attention, coupled with haptics
Why this is better
✓ Does not hide the main fuel station card
✓ It appears in context to user’s focus area which is surrounding the fuel station card
✓ Provides more context on what users need to do
✓ Subtle and does not block passing users who may fall into this category but was not there to refuel
✓ Does not promote panic at a high-stress environment
User flow
User testing
With the proposed approved solution from my Design lead, I took the initiative to run a mini user testing 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.
Testing steps
I designed this test to help get participants into the same setting:
- User who are not existing Setel users will be given a brief explanation of how Setel app works to purchase fuel
- Setting the scene:
- Petrol is low, they drove to a nearby PETRONAS station, park at a vacant pump
- Open Setel and prompt user to purchase fuel
- User is allowed time to digest the
enable Wi-Fiprompt - Tester asks user on what they understand from the message
Limitations
As these user testings were done remotely, there are a few factors that affects the outcome of the results:
- Explanation of the scenario may be explained differently as it is conducted by different testers (who are not UXRs by role)
- User is not physically at the station to fully be immersed in the scenario
- Only 10 tests were conducted
- Prototype not able to test with haptics for participants to experience
Participants profile
| Factors | Details |
|---|---|
| Total testees | 10 |
| Ratio of existing and non-Setel users | 1:1 |
| Age ranges | 19-24 (1) |
| 25-34 (1) | |
| 35-44 (1) | |
| 45-54 (4) | |
| 55-64 (3) |
User testing results
✅ **80%** users notice the enter animation below the station card
✅ **80%** understood why Wi-Fi is needed to be enabled
❌ **20%** has false, low or no understanding of why Wi-Fi is needed to be enabled
😲 **1** user thinks tapping on `Enable Wi-Fi` will turn on their Wi-Fi
😲 **1** user asks if hotspot is also required
Moving forward
Based on the results shown, it is clear that most users understand what was presented. However, there was still some miscommunication that can be addressed with an improved copy. I worked with our UX Writer to come up with a better copy for 3 languages we provide.
Impact
- After releasing this improvement piece, we monitor the fuelling order status of these users that we have earlier identified and their journey within the app via Mixpanel. We find that these users have been interacting with the component and successfully fuelling after.
- During the exploration & development stage of this project, we have received a few complaints of similar nature. Post-release, there were no further complaints received from customer service on this particular issue.
