gasbuddy.png

Date: March 2017 - June 2017
Platform: iOS Mobile

PROBLEM: 
GasBuddy app users had trouble searching for gas prices by gas grade (Regular, Mid-Grade, and Premium), users would also like to know what amenities are available at the gas station before traveling to the location, but there is no feature to mention what is available at the  gas station. 

SOLUTION
I redesigned the interface to allow users to filter gas prices more efficiently. This included a drop down menu listing available gas grades at the gas station. I also designed a "More Details" page. This page provides information about the gas station amenities and contact.

WHAT I DID
› User Interviews
› User Scenarios
› Storyboard
› Flowchart
› Low-Fidelity Sketches
› Create Medium-Fidelity Wireframes
› Create High-Fidelity Designs
› Usability Testing
› Develop Interactive Prototype

 
 

User Interviews

Approaching this problem, it was important to understand what influences GasBuddy app users to use the app, what are their pain points, how do they feel when using the app, and what is their overall goal. I was able to speak in depth with 3 participants who shared similar themes about their experiences using GasBuddy.

 
 
 
 

USER SCENARIOS

The user interviews helped me identify 3 potential users:

  1. Emily, a small business owner who travels often in her car to meet clients and perform gigs wants to find gas stations that are low priced, have quality gas, offers a car wash, a mechanic on duty and a convenience store.
     

  2. Edwin, a student who travels 30 miles round trip to school, will exit the freeway to use a gas station that he finds to be $.50 cheaper than others. He wants to know if there is a fee to use his credit card at a specific gas station.
     

  3. Beverly, a mother who travels a lot to various recreational sporting activities for her kid, wants quality gas at a price that is reasonably priced to fit her budget. She uses the app to compare gas prices in various areas, and needs to know if there is a gas station in route to her destination.

 
 

STORYBOARD

Based on user interviews, I created a storyboard to convey a scenario in which a user would use GasBuddy. It was designed to help visually predict and explore a user's experience with the Gasbuddy app.

 
 
story-board-.jpg
 
 

FLOW CHART

After scenarios, I used the Sketch App to develop the Flow Chart as a way to observe the whole picture. The Flow Chart allowed me to observe and communicate the flow of the app's content in an intuitive way.

 
 
gasbuddy-flow-chart.jpg
 
 

LOW-FIDELITY SKETCHES

I began by reflecting on what I learned from the user interviews. The users expressed what their pain points and needs are. This information inspired the low-fidelity sketches to address user pain points and needs. 

MID-FIDELITY WIREFRAMES

After sketching my design concepts, I moved on to create mid-fidelity wireframes. These wireframes were developed to get feedback from users in the usability testing phase. 

HIGH-FIDELITY Mockups

I used Photoshop and Sketch to develop the high-fidelity user interface. After designing the user interface, I used InVision to prototype the functionality of how the new GasBuddy app would work.

 
 
 
 

USABILITY TESTING

I developed a paper prototype to test and improve my design hypothesis. The goal was to get feedback from target users and then make the necessary iterations. I tested 5 different use cases including: 

  • Change the gas grade

  • Identify the lowest gas price

  • Learn more details about the gas station

  • Call the gas station

  • Get directions to the gas station

 
 
paper-prototype-usability-testing.jpg
 
 

USABILITY TESTING FEEDBACK 

By observing the users complete tasks, I was able to uncover things that were confusing, and needed to be changed. 
Changes made include:

  • Changing the flag icon to a larger car icon

  • Changing the rectangle icon to a larger gas pump icon

  • Making it more obvious that More Details is clickable to reveal gas station amenities

 
 
Prototype Iterations
 
 

INTERACTIVE PROTOTYPE

I used InVision to create a prototype that could communicate the service it would be if it were running like a real app.
I tested 5 different use cases, including:

  • Change the gas grade

  • Identify the lowest gas price

  • Learn more details about the gas station

  • Call the gas station

  • Get directions to the gas station

 
 
 
 

PROJECT REFLECTION

This project was great practice in building effective User Interfaces. I was able dive deep into the mobile app design process and learn tools such as Sketch, and InVision.