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.
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.
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 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
The average size globally of a vehicle’s center display in 2018, according to IHS Markit
is the CarPlay system typeface, according to Apple's Human Interface Guidelines for CarPlay
The projected average size globally of a vehicle’s center display by 2024, according to IHS Markit
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
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
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.
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
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
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.