How can we help people in Toronto find a gas station that best fits needs with only one click?
OVERVIEW
In the course project of INF1602, our team designed a mobile app
prototype with medium fidelity, aiming to improve the overall experience
on searching for a gas station in Toronto.
PROBLEM SPACE
With numerous gas stations in Toronto GTA area, each offering different
prices and using separate websites or apps for information. It becomes
difficult to efficiently compare gas prices, locations, and other factors that
users consider when searching and navigating to a gas station.
ROLE
UX Designer
User Research Interview;
Low Fidelity Ideation;
Visual Design of the Prototype;
Conducted Usability Test and
Evaluation
December 2023
MAIN FINDINGS
After conducting our primary and secondary user research with 40 participants, we summarized our persona
with 4 major pain points while searching for a gas station:
1. Time-consuming
2. Safety concerns
3. Detours
4. Price comparison
h
ITERATION ON PROTOTYPE
We began the ideation with several sketches and invite participants to evaluate and vote on each big idea based on two aspects, impact and feasibility. Then, we plotted all the ideas onto a prioritization grid to visualize the performance of each one.
w
Based on the results, we finalized with 4 major goals that our persona, Gastina, would like to achieve.
1. Gastina can personalize and customize her preferences ahead to save time in future searches
2. Gastina can get the optimal gas station suggestions to minimize detours and maximize time savings
3. Gastina can check gas station exteriors to choose locations that align with her perception of security
4. Gastina can know when and where to refuel so that she can save on her gas expenses
Three user tasks were designed to demonstrate the flows. With conducting multiple rounds of lean evaluation on
our hand-draft prototype, we completed the mid-fidelity version based on user feedbacks.
MEDIUM-FIDELITY PROTOTYPE
Task 1: Make a account and set up your preference on gas stations
Try out: https://www.figma.com/proto/CX7DMghRPwQ8wI6bJz1E3M/INF1602%3A-Prototyping?page-+id=74%3A5845&type=design&node-id=76-3771&viewport=784%2C402%2C0.24&t=PkcBFetQPPfS7Al4-1&scaling=scale-down&starting-+point-node-id=76%3A3771&mode=design
Task 2: Search for gas stations and view the real-time camera
Try out: https://www.figma.com/proto/CX7DMghRPwQ8wI6bJz1E3M/INF1602%3A-Prototyping?page-+id=74%3A5846&type=design&node-id=76- 4321&viewport=558%2C359%2C0.29&t=3QPhGF0waORFB4k1-1&scaling=scale-down&starting-+point-node-id=76%3A4321&mode=design
Task 3: Select gas stations from favourites or recommendations
Try out: https://www.figma.com/proto/CX7DMghRPwQ8wI6bJz1E3M/INF1602%3A-Prototyping?page-+id=74%3A5846&type=design&node-id=76-4321&viewport=558%2C359%2C0.29&t=3QPhGF0waORFB4k1-1&scaling=scale-down&starting-+point-node-id=76%3A4321&mode=design
NEXT STEPS
Usability Evaluation Insights
Our team will leverage user feedback and insights gathered from the usability test to
make more informed design decisions for the final prototype. This involves addressing specific pain points and
refining areas to enhance the overall intuitiveness of the user experience.
Ideation Phase Revisit
Our team will return to the ideation phase to carefully reassess all generated ideas and solutions, incorporating
user feedback to identify the effectiveness of our proposed solutions and identify opportunities for further
innovation. We would also like to try a add-on feature on the current existing app, such as Google Map.
Usability Testing Expansion
Our team will conduct additional usability tests with a broader user base, aiming to validate and refine design
decisions to ensure that our app effectively caters to the diverse needs of its users.
Accessibility Assessment
Our team will conduct a comprehensive evaluation of the app’s accessibility features, prioritizing inclusivity for all
users. Any identified accessibility barriers will be addressed, and adjustments will be made to align with
established accessibility standards.
Visual Elements Design
Our team will refine the visual design of the app based on user feedbacks. This may include adjustments to colour
schemes, typography and overall aesthetics, contributing to a more visually appealing and user-friendly app.
LESSONS TAKEAWAY
GasRoute is my first teamwork project in the UX design field, the entire journey is quite delightful and I have
accumulated solid knowledge of user experience design fundamentals and the design flows. There are no strict
right or wrong answers in design, which emphasizes the subjective and context-dependent nature of the field. That
is why user research stage playing such an essential role. The pain point of the safety concern in this project is a
great example of how identifying your persona precisely could enable designers to speak from empathy. With the
restriction on time and budget, we did not have the chance to design and test on the usability for building up an
add-on function on top of the current existing app, such as Google Map, taking over 95% user coverage while
navigating to a gas station in Toronto. We will definitely do another iteration on this later on :)