GasBuddy App Redesign

UX + UI DESIGN

 
GasBuddy Mobile App Redesign

Overview

Context

This was an individual school project for my mobile design class. The brief's theme was: "Identify problems and/or opportunities with an existing mobile application and utilize your knowledge to design a solution."

Background

GasBuddy connects drivers to their Perfect Pit Stop. It starts with GasBuddy's database of more than 140,000 gas station convenience stores, including real-time fuel price information, station locations and offerings, along with ratings and reviews.

Probelm

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

A drop down menu listed as Regular, Mid-Grade, and Premium would filter gas prices within the interface based on desired gas grade selected. Including a "More Details" page, accessible through the selected gas station chosen allows the gas station to list specific amenities (car wash, mechanic on duty, ATM, food mart and more).

Feature Descriptions

Research

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, 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 interview research 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

Tools: Adobe Illustrator

Based on interview research, I created a storyboard to convey a scenario in which a user would use GasBuddy.

 
 
Storyboard

 
 

Design

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

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 prototype

I used Photoshop and the Sketch App 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

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 Revisions

Interactive Prototype

Tools: Sketch App, Photoshop, InVision

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.