creating a balanced car interface

Role

Master and Commander

Product

Smart Watch

Client

Myself

The Project

Being the first project I've done outside of work or school I wanted to make sure that my interest was kept throughout the project. I chose to do a watch because of this interest I've had in the design of analog machines. My goal was to take things that were standards at some point in time and blend that with modern technology. I used this project as a way of exploring ideas that I felt are maybe a bit unconventional for more traditional projects. I aimed to create something that felt as long lasting as products used to be. I created everything for this project. Including branding, industrial design, textures, and UI.

The Process

My goal wasn't to create something that felt like the industrial design and the UI design worked together. I didn't want to create 1,000 different faces. The face would be designed for the case and vice versa. I started out by creating a short list of features. The watch shouldn't be so feature rich that it dominates our attention, but I also wanted to limit the scope because I'm a single person.

CORE FEATURES LIST

In Car User Interface

Project Description

The Car Interface and Companion App was inspired by the countless poorly design car interfaces I've come across over the past year or two. I feel that the experiences are mostly scraped together during production and they hardly ever make the life of the user easier. My goal was to create something that took into account how people interact with their cars on a daily basis and make that experience feel like a complete part of the car.

The Problem and the Process

The Problem

Designing a user centered experience where people can interact with their car quickly and meaningfully. Some of the problems I will be facing are how someone will interact with a screen that isn't totally touch screen and whether people prefer the screen to hold all the functionality or only part of it. Some of these decisions will be made based on small user interviews.

The Process

I wanted to start by creating a defined list of features that I felt I could design for in a school project. I'd then take what I had learned and look at current and former car interface design trends and see what I can learn about how users are currently interacting with their cars. I then can move on to sketches to get some of those ideas on paper.

CORE FEATURES LIST

Designing The Interaction

A huge part of interaction with a car is an understanding of the conventions that car features have followed for years. My goal is not to break convention unless I can prove that it will actually be meaningful to the user and somehow improve their experience when interacting with the vehicle.

CREATING PROXIMITY

The way to unlock most cars today is by using a dedicated key fob given to you by the manufacture. This is something that is slowly starting to disappear, and I feel that this is a good opportunity to break convention safely to improve user experience. The app will act as the key for your vehicle using proximity. When you are a certain distance away from the vehicle it will automatically unlock the car. The app will also recognize when you are not near your car to give you information like the car's location (making it easier to find your parked car) and battery available.

CAR INTERFACE - DIALS OR TOUCH?

One of the biggest challenges I faced while working on this project was learning how people preferred to interact with a car and deciding whether or not that learned convention was something worth continuing solely because people are used to it. Ultimately, I decided to go with a hybrid of both fully touch-based interaction and button/dial based interaction. This allows things like volume and air temperature to be controlled by a dial while something like using the GPS would be an interaction done only through touch.

Creating Sketches

Taking these features I moved into sketching to help get my ideas down on paper. From this process, I was able to rapidly sketch ideas to see how they look to get a feeling of how I'd like to organize the design. I also was able to make some deciding factors of how the user would interact with the in-car interface. I next moved on to wireframing to help organize my overall thoughts.

User Testing Round 1

User Test Round 1

After completing the sketches I chose some designs to scan. After downloading the images on devices I moved on to user testing. This round I tested 3 people on various things like understanding of icons and following scenarios.

Scemarios

Changes

From these tests, my users asked a lot of good questions I didn't have good answers to. There are a few features that I may be missing on some pages (Climate rather than controls) and the need for a larger screen size is becoming more apparent. This will be a big change but it's 100% necessary to fill the needs of the user. On the phone interface, users asked why the options don't match the car interface.

Design

The Style

The design was inspired by light and how it interacts with our environment. I wanted to explore a more 3D space as opposed to a flat design. For that reason, I chose a neomorphic style to follow.

grid

I wanted to design some of the physical elements just to push myself a little bit. Here's a little showcase of a knob I made. I was following the same inspiration as the overall design.

colors

There's a lot of grey but I have a good reason. When looking at shadow we mostly see a shade of grey. For that reason, I chose to keep the primary colors grey but add life through secondary colors.

PHYSICAL BUTTONS

I wanted to design some of the physical elements just to push myself a little bit. Here's a showcase of a knob I made. I was following the same inspiration as the overall design.

A LITTLE BIT OF BRANDING

When designing for the iPhone I decided to take some of these elements provided by Apple to create some branding mock-ups of the app icon as well as some other screens.

TYPEFACE

In this design, I used IBM Plex Mono in different weights and sizes for most of the text. For the numbers and larger text, I used Neue Haas Grotesk Display Pro.

User Tests Round 2

SCENARIOS

changes

This round of usability testing was enlightening. A pattern quickly developed with finding how much of a charge the car had. I also was able to get some feedback on the overall design of things. One thing brought to my attention was the inconsistency of design.

Final Design

Now that both interfaces feel complete and are functioning the way they're supposed to it's time to start focusing on the details of design and adding those finishing touches. Below is a style tile that shows elements included in the design.

Details

Details

After getting everything in place I started to comb through the design to fix some UI elements that needed some touch-ups. Down below is a small example of some of those changes.

Creating Motion

Motion is a huge part of UX design. Not only does it help things look finished it plays a key role in giving the user feedback and helps them visualize a state change.

USING MOTION AS FEEDBACK

The great part about adjusting volume and temperature is that you receive feedback through other senses. You can hear the sound get louder and you can also feel the temperature change but it's also just as important to get that visual feedback as well.

Retrospective

Retrospective

I learned a lot about my design process creating these interfaces. One thing I'm noticing is the need to make drastic changes later on in order to accommodate user needs later on. What this means is I'm not spending enough time in the early problem-solving stage to get a good idea of what needs to be made and how. This will hopefully help me solve big issues in the beginning when changing things is quick and easy.

I've received a lot of feedback from my start design and it could definitely be way clearer how it operates. It does resemble the iOS 3 slide to unlock.

The Stuff

I had a lot of fun creating things for this design. This is just a showcase of some of the things I that could be part of the finished design that hasn't been properly user tested or implemented.

Using Proximity for the in Car Interface

Here are some examples of what proximity sensor on the car interface could afford some users.

HAND GESTURES

While I was trying to come up with inventive ways of interacting with the car I was reminded of attempts to add hand gestures to control cell phones. This great idea could be utilized in a car to help users control their vehicles without needing to look for targets on the screen.

Biometrics Scanning

I also thought that biometric scanning could be used in cars too. Things like face scanning, eye tracking, and fingerprint readers could add a lot of interesting functionality to a car.