top of page
Top
ServoTrack: Beating petrol price hikes and saving money
Platform
Mobile devices
My Role
UX (Product) Designer
Responsibility
End-to-end UX/UI design
Company
QSSTUDIO
ServoTrack, a real-time fuel price app, launched in 2016, helps users find the lowest local fuel prices.
Problem
How might we set our app apart in the competitive fuel price-checking market to attract more users?
Goal
Improving usability and modernising UI for an enhanced user experience to drive more traffic
Project Duration
83
weeks
400+
App Screens
Impact
I designed the complete design process for the ServoTrack app redesign and successfully relaunched the new version in June 2023.
Team
QSSTUDIO
Mandy - UX designer
Robin - Full stack developer
Prince - Full stack developer
Kinzey - Frontend developer
Irene - Project Coordinator
Process
01
Empathise
UX Audit
Competitive Analysis
User Interviews
Card Sorting
02
Define & Ideate
Affinity Map
User Journey Map
Information Architecture
Workflows
Wireframes
Design Guide
Visual Design
03
Validate
Usability Testing
Implementing Feedback
Empathise
Research approaches to understand users
After conducting a thorough review of the entire app structure, meticulously analysing user flows, assessing usability, and closely examining the strengths and weaknesses of similar apps, I have pinpointed the core problems that our product faces.
Furthermore, I've conducted four online interviews with our previous app users and gained valuable insights into how our users perceive our product, allowing us to make informed and personalised improvements.
.png)
Key Research Insights
01
There is currently no clear indicator on the map to specify which fuel type's price users are viewing.
02
Users have to tap on a service station to get more info, but this extra step can make things less smooth and more frustrating.
03
Users can only find out about the station's proximity or fuel type availability after arriving at the location, which creates a potentially inconvenient situation.
Hypothesis
01
Improving the UI/visual design and showing more structured information will help users find their desired service station faster.
02
Introducing a new service station status feature to address the frustration of not finding the available fuel type or discovering that a station is closed.
Proposed solutions
1. Introduce expandable bottom sheet
Partially visible bottom sheets can contain supplementary content that continues below the map. It can be dragged to a full-screen view and scrolled internally.
2. Introduce a station status feature
Display warnings for various scenarios on the expanded bottom sheet for station details.
3. More rich & structured information on the map
Our existing map is somewhat limited, only displaying fuel prices. The new map proposed here will provide more information on the map with a more organised and structured layout.
Design Principles
01
Consistent
Make sure users have a consistent experience within the app.
02
Simple
Make it easy to use since users don't spend too much time within the app.
03
Aesthetic-Usability Effect
Make the app pleasing to use and create a positive response from users
Design Deliverables
bottom of page