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. 

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

SETTING THE STAGE

To the drivers of gas-powered vehicles… how many times have you been low on fuel, stopped at the first gas station you saw, filled up… just to continue a mile down the road, and find that the same fuel was $0.10-$0.20 cheaper? And to my electric vehicle owners… you're out and about, and you see your charge is low. You pass 20 gas stations before you finally find a charging station… only to realize that A) the port is out of order, B) all of the ports are occupied, C) the port doesn't fit your vehicle, or if you are lucky D) All of the above.

What if there was a solution to these problems. A solution that could help you locate the nearest, cheapest, and most compatible fuel and/or charge, ALL while track your business mileage and spending for tax and reimbursement purposes…

THE PROBLEM

KEY TAKEAWAYS

75%

The percentage of vehicles that have increased screen size to 7-inches or larger within the last 5 years, according to IHS Markit

44pt x 44pt

The minimum tappable area recommended for all controls, according to Apple's Human Interface Guidelines for CarPlay

7.7 inches

The average size globally of a vehicle’s center display in 2018, according to IHS Markit

San Francisco

is the CarPlay system typeface, according to Apple's Human Interface Guidelines for CarPlay

8.4 inches

The projected average size globally of a vehicle’s center display by 2024, according to IHS Markit

Right Side

Location on screen of commonly used buttons. Typically, buttons people are most likely to tap are on the right. Cancel buttons should always be on the left, according to Apple's Human Interface Guidelines for CarPlay

VEHICLE SCREEN TRENDS

CARPLAY GUIDELINES

WHAT DOES THIS MEAN FOR TANKMATE?

The information regarding the interfaces was helpful in determining a starting point for the sizing of the design. It also made me aware of the increasing screen sizes in recent and forthcoming years, so being mindful of breakpoints and the responsiveness of the design was important as well. The guidelines for CarPlay became very helpful once I reached the wireframing and design stage.

1 SCREEN, 3 DESIGN DIRECTIONS

Designing the home screen was vital because it is the first thing users will see when they launch the app in CarPlay. I wanted to keep it simple, using different cards for each feature. All of the cards being in view at once and individualized is why I chose the direction I did. 

HOME SCREEN WIREFRAMES

Gas Vehicles/Users

  • Most users wait until fuel is low before refueling, then fill all the way up

  • All users have at least 1 reward account at a gas station

  • Most users pick station based on price

  • Most users keep track of mileage but often forget to do so.
     

Hybrid Vehicles/Users

  • Users that own homes usually have personal charging stations, but apartment dwellers usually do not.

  • Users would prefer to power their vehicle with electric, but using gas is easier to more convenient due to lack of charging locations

  • Google Maps and Waze are two most popular navigation apps

Electric Vehicles/Users

  • Finding a charging station is frustrating and inconvenient.

  • Tesla vehicles does not have CarPlay. Tesla has their own interface, apps, and ways of finding charging stations

  • Different levels of charging = Different cost

  • As of 2020, there isn’t an official electric vehicle mileage reimbursement rate set by the IRS

NOTABLE USER TAKEAWAYS

MOBILE

For an application to be used in CarPlay, there has to be a mobile application that exists first. I decided to develop an additional two screens on mobile to pair with CarPlay. I created the My Car preferences and settings page, which made the most sense for what I had in mind for my user testing.

FEEDBACK AND RESULTS

After receiving excellent feedback from the participants and reviewing my notes and recordings, I reiterated the designs to create a better user experience on both CarPlay and mobile.

CONCLUSION

LESSONS LEARNED

During this project, I learned an extensive amount about CarPlay and vehicle interfaces and how to design for them. I also learned a lot about the user's experience trying to accomplish a task while doing another.

NEXT STEPS

With design come iterations, and with iterations comes more iterations. This project is no different. My next steps would be to design, test, and iterate the mileage and to spend features. I would also like to redesign this product as a native component for an automotive brand instead of CarPlay.

I am looking forward to continuing to improve on this project, and I look forward to sharing soon. In the meantime, please check out my other projects! 

ZEIT TRAVEL WEBSITE 

UX/UI DESIGN | BRANDING 

BY DESIGN AR FEATURE

UX/UI DESIGN | BRANDING | ART DIRECTION 

NEWBERRY MUSEUM

ARCHITECTURAL DESIGN | UX THINKING

TANKMATE

My job as the UX designer and researcher was to create the solution with TankMate. TankMate solves all of the issues mentioned earlier, right in the comfort of your vehicle utilizing CarPlay on your dash. Before I get too deep into what TankMate can do, let's talk research.

THE SOLUTION

DIGITAL INTERFACES AND CARPLAY

Before researching the users, I wanted to analyze trends in the vehicle industry. Almost every vehicle nowadays has a digital interface on the dash. You can control virtually every aspect of the driving experience on this interface, and with Apple's CarPlay integration, you can do even more. I delved into research about screen sizes in vehicles and Apple's CarPlay guidelines. 

INDUSTRY RESEARCH

THE USERS AND THE VEHICLES THEY OWN

I kicked off my user research by finding a handful of users who were owners of gas, electric, and/or hybrid vehicles. I reached out to potential users via Instagram story and secured who I needed. I conducted interviews asking various questions surrounding their refueling/recharging experiences at the pump, navigation, challenges locating stations, and preferences. 

USER RESEARCH

TAKING A LOOK AT THE CURRENT MARKET

With most products, there are always existing competitors. So researching those competitors' strengths and weaknesses is a great way to learn about what's needed and what's not in the market.

COMPETITOR ANALSIS

FEATURES AND DESIGN

With most of my research complete, I began the design process by laying out the features, setting up the architecture, and wireframing. 

DESIGN

BRANDING AND UI

TankMate needed branding for the product. They needed something sleek, trustworthy, and gave an idea of what TankMate represents. I started with a color palette. Green was chosen as the primary color to represent financial and environmental savings. Blue as a secondary color to represent the brands trustworthiness. The logo was created by combing the idea of fuel, charging, and location into one icon.

LIKE CARPOOL KARAOKE, BUT WITHOUT THE KARAOKE

To test the first iteration, I wanted to create a realistic in-vehicle experience in an actual vehicle by setting up a rig using an iPad, a wall mount, and an iPhone. I then placed multiple cameras in the car to capture the interactions, eye movement, and feedback. See below for a diagram and video of the test.

USER TESTING
1 SCREEN, 3 DESIGN DIRECTIONS

The map/navigation screen is probably the most important screen for TankMate. I experimented with a few layouts of the location cards and toyed with the idea of swiping vs. scrolling. From my research, I learned that users seem most comfortable swiping in the vehicle rather than scrolling, so I decided to move forward with that design direction. 

NAVIGATION WIREFRAMES

CARPLAY

MOBILE

01 SET PREFERENCES

Users can access and change settings to CarPlay and Mobile from the My Car section of the app. Many other options are available including sort/filter preferences, stations, reminders, and more. 

HOW IT WORKS

02 LOCATE A STATION

Users can view all of the stations in their area by swiping. They can see the differences in pricing, ratings, and distance, then navigate once satisfied with a selection.

03 NAVIGATE

Once the station is set, depending on the preference, users will be asked if they would like to track the mileage on the trip. As the user progress on the journey, they will see their marker move along the highlighted route, prompted by estimated arrival times, miles, and directions until they arrive.