Design Challenge: Gas Map

UX/ UI Moble

Role

UX/UI Designer

Duration

7 Days

May of us are familiar with…

The design challenge one needs to complete at the last step of a Design interview. This challenge was given to me on one such occasion. I had 7 days to design a mobile app that allows finding gas stations along a route through three states.

 

Problem

Design an app that allows user to find the most convenient route for their trip across 3 states while searching the cheapest gas stations along the way.

 

User & Their Goals: The target user for this product are people who have long commutes, drive for work, or are taking a road trip. For this example I’m focusing on the latter.

Design Assumptions: Users won’t want to travel far from their route for gas, The shortest travel time may not be the most convenient route, User will want to filter through gas stations by distance, price, and brand.

 
 

Solution

With the fast turnaround, I dedicated more time to the function of the flow by choosing UX components that work successfully on paper. Using color where it is most important to the usability of flow.

 

My remaining solutions included what the prompt listed find a route across 3 states and list the cheapest gas along the selected route. As I began researching similar UX from the industry, more design challenges became apparent such as viewing the map and list on one phone screen and easy scalability for future features.

 
 

Process

 

Brainstorm

Before getting on the computer, I wrote out the design prompt, brainstormed some word association, took notes on possible solutions, before writing the problem statement.

Research

The companies I looked to for similar UX were Google Maps, Waze, Apple Maps, Transit, and Gas Buddy. All of which are successful at different features and components. Google is good for finding multiple routes, Waze for getting the best route with live updates and live gas prices, Apple has great direction dictation, Transit gives users all transit option for a route, and Gas Buddy has the best search filters for finding gas.

Sketching

I took some time to sketch the user-flow screens on paper using inspiration from the previously mentioned apps. The most successful parts of each where fused to create a simple yet well functioning end-to-end user flow. Sketching on paper helps me work through my ideas fast and where I make most of my UX iterations and mistakes.

Wireframing

After working through some design options and making quick iterations on paper, I began working digitally on Sketch to add more detail. Limiting the color pulls focus to the main points of flow, inputting route info, selecting best route, and searching gas stations along that route.

 
 

Outcome

The flow works successfully to address problem and allows for scale in the future. UX and UI help push the user forward through flow with concise detail.

Colors: Every app I researched for inspiration used  green or blue as their brand color. I used #00CF9D green but wanted to complement it with a warmer friendlier color like orange. This app has two main functions, The colors should follow.

Type: SF Compact Text font was chosen for the amount of font weights available. Type hierarchy is easily implemented and helps with design consistency and scale later on.