Prototyping for car user interface design

Graduation project Hike One 2016

At Hike One I was tasked to improve the Tesla Model S interface. The main goal for Hike One was to learn how to prototype for a car. A secondary goal was to use this case as a project to highlight experience in the automotive field.

This project resulted in a popular post on Medium, it’s own project website and useful tips and tricks for prototyping car interfaces.

Timeframe

February — June 2016

Role

Interaction design graduation

Company

Hike One

Platforms

Main Computer Unit, Instrument Cluster, iOS

The first step for this project was to get myself in a Tesla Model S. Together with my father we made an appointment to testdrive the car and learn how it works.

Test driving the car.

First user drive-along and interview.

Second user drive-along and interview.

The big screen in the center of the car (Main Computer Unit or MCU) is a linux computer. Connecting a simple USB mouse even puts a regular mouse cursor on the screen. In my first moments in the car I noticed the native browser was powerful enough to load a barebones HTML page.

This meant I could code my own clickable prototype and test my first ideas.

This prototype was hand-coded and consists of images and hotspots to click to the next screen. All to keep the site really lightweight.

From the inside of the car, this is what the prototype would look like. It worked really well, but it had it's limits. There wasn't an option to put the browser fullscreen and thus mimic more than just the navigation.

View of a Tesla Model S dashboard with the browser in full-height mode.

Because prototyping using the Tesla's own screen was not ideal, I chose to build my own dashboard. Together with the use of 2 iPads, 1 monitor, 1 MacBook, 1 phone and 2 cameras I could prototype a journey with all screens in the car.

An added benefit is that I now don't need an actual car to prototype and I can control every screen a lot better. Though I didn't connect the BMW steering wheel to actually have functioning buttons, it did help with immersion and the fun-factor of participants. It was very easy to find volunteers for testing.

Shown below is a prototype of the Instrument Cluster or IC. Using Sketch and Photoshop I was able to redraw the Instrument Cluster and include it in my prototype.

View of the Instrument Cluster with on the left side the map and on the right side actions to confirm. Prototype made in Principle.

The largest iPad available is an iPad Pro and luckily it was available at Hike One to include it in my testing. The screen is just slightly smaller than Tesla's Main Computer Unit.

Using an iPad for the Main Computer Unit meant I could user regular prototyping tools. This one was made in Invision.

Next up was putting the dashboard to use! Making use of a LinkedIn Tesla community I could easily recruit 6 people to stop by the office in Rotterdam.

At this time in 2016, the Tesla Model S was a luxury vehicle mostly driven by executives and entrepreneurs. The dashboard itself was interesting enough to get a lot of comments and interest from the community.

"It looks like fun, I would like to help you Luc."

My test consisted of a journey with 2 stops where respondents had to interpret directions. And I gave them tasks to operate, such as accepting an incoming call and changing the radio station.

The concept I designed was a system to plan and manage your day. It started with a phone notification to tell when the user should leave and an option to pre-heat the car. From then on the system helped you show your agenda and prepared your ideal route to drive including charging stations (if necessary).

Along with a trip to the Tesla factory in Tilburg, I was able to shoot a lot of photos in dealerships to enhance my mockups and presentations.

I finished this project with a presentation at Hike One, a popular Medium post with over 10.000+ views and 1.700+ downloads on the custom project site: caruxd.com.

On the project site my designs, recordings, pictures and tips were laid out and shared. I also got to present my work at UX Congress 2016 in Frankfurt, Germany.

10.000+

Views on Medium post

5.000+

Individual users on caruxd.com

16.000+

Pageviews on caruxd.com

1

Presentation at UX Congress 2016 in Frankfurt, Germany

Projects

Prototyping for car user experience design

Graduation project Hike One 2016

Dashboard and workspaces

POP 2016

Inbox

Case coming soon POP 2016

Design system

POP 2016

Chat editor

Case coming soon POP 2016

VISA app

Case coming soon Personal project 2020

Product catalogue

Case coming soon Dutch Light Trading 2015

Contributions

Feedback and design suggestions for Coronamelder

Dutch corona app 2020

Experience

Thank you for visiting this piece of internet. Reach me at hey@lucvanloon.com or find me on Dribbble, , LinkedIn.

Press M to unmute audio