WIREFRAMES

Add a Title

DESIGN APPROACH

Starting with the logo, I created the framing work for the branding and UI. The logo is a location marker with a gas/charging gauge in the upper half. I chose green because it represents saving energy, the environment, and money, all which TankMate strives to do.

For the screens I started with the home screen and created 4 different iterations. I then moved to the map screen and created 4 iterations for that as well. After further research and a handful of surveys, these are the top designs. 2 for the home screen and 2 for the map screen. Next steps will be choosing 1 of each and moving forward to design the other screens.

CONTEXT

This project was completed for vehicle's equipped with Apple's CarPlay. I wanted to better understand the restrictions of vehicle interfaces, CarPlay, and how to create an enjoyable user experience while minimizing distractions in their driving experience. Scroll down for a synopsis or select the button to view the complete case study.

PROJECT INTRODUCTION

TankMate is an app that helps EV owners locate charging stations, gas vehicle owners locate gas stations, and hybrid vehicle owners locate both. There are many applications that locate gas stations or locate charging stations, but I haven't came across an app that does both. To further differentiate my product from the competition this app will also include sort/filtering options, spending and mile tracking (for business purposes), customizable profile options, and more. All optimized and integrated into CarPlay for an in-vehicle experience.

ROLE

Product Design
UI/UX Design
Branding

DURATION

3 Weeks

THE USERS

WHAT ARE THEIR PAIN POINTS 

Quotation mark

I could save myself and my business so much money a year if I could remember to track my mileage.

Bryan, Pick-Up truck owner

Quotation mark

I’d much prefer to use electric to power my vehicle, but it’s easier to find gas stations.

Farrah, Hybrid car owner

Limited Locations

Finding a charging station near me is very difficult.

Buyers Remorse

I hate when I fill up my tank for $2.99/gal then drive a mile down the street to see the same gas at $2.74/gal...

Inaccurate Tracking

I always forget to track my miles so when it comes tax season or reporting my miles for reimbursement, I just end up estimating.

HOME SCREEN ITERATIONS

MAP SCREEN ITERATIONS

MAPS

Scroll, swipe, or tap map to find gas and/or charging stations in your area. You have the options to sort/filter by price, type, and distance, as well as favorite your top stations to stop at. 

FAVORITES

View and find your favorite stations easily in the favorite tab in the nav bar.

MILES

Track your daily mileage or when you're on a business route in order to provide accurate documentation for tax write-offs and reimbursements. This information can be exported to an external spreadsheet for your personal records.

SPENDING

Similar to mileage, you can track you spending at the pump by importing how much you paid and price per gal or kW/hr.

MY CAR

Personalize your settings by selecting your car type and filtering out options that you may not need. For example, if you are a 100% EV owner, you have the option to remove gas stations completely from map views and vice versa.

MY DESIGN APPROACH

Starting with the logo, I created the framing work for the branding and UI. The logo is a location marker with a gas/charging gauge in the upper half. I chose green because it represents saving energy, the environment, and money, all which TankMate strives to do.

For the screens I started with the home screen and created 4 different iterations. I then moved to the map screen and created 4 iterations for that as well. After further research and a handful of surveys, these are the top designs. 2 for the home screen and 2 for the map screen. Next steps will be choosing 1 of each and moving forward to design the other screens.

WANT TO SEE MORE?

CHECK OUT THE FULL CASE STUDY

Shoot me an email or check out some more of my projects below. Thanks!

ZEIT TRAVEL WEBSITE 

UX/UI DESIGN | BRANDING 

BY DESIGN AR FEATURE

UX/UI DESIGN | BRANDING | ART DIRECTION 

NEWBERRY MUSEUM

ARCHITECTURAL DESIGN | UX THINKING

THE RESEARCH APPROACH

Interviews and Article Digging

My research started with reaching out to vehicle owners to conduct user interviews. I interviewed owners of full electric vehicles, hybrid vehicles, and gas vehicles. I asked questions revolving around their refueling and charging experiences, their preferences, and thought processes behind choosing a station. I also asked questions about navigation and their preferred navigation apps when they are on the go. After interviewing the users, I did my own research on CarPlay guidelines, EV vehicles, and the commonality of interface sizes. All of my research gave me a great starting point for deciding on features and developing wireframes.

How might we develop an in-vehicle experience for locating local gas and charging stations, while providing miles tracking for business purposes?

HOW MIGHT WE?