Infotainment System

Star

Go Back

Case 01

Client: We Are Reasonable People

Role: UX/UI Designer

This project was a team assignment. All work listed below were performed by me and in combination with other team members.

Our client, WeAreReasonablePeople is a Rotterdam-based digital agency that focuses on human-centered solutions and makes ideas quickly tangible with the help of prototypes.

In some cars, buttons have already been exchanged for digital signal points. Many cars still want to go to a reality where almost all buttons can be found on a digital interface. The advantages of this are the ability to update the software and the production costs of the physical buttons disappear. The disadvantage of buttons on a digital interface is that they cannot (yet) be controlled blindly.

We have been asked whether we want to design the infotainment system in such a way that physical buttons become superfluous. All functions should come together in one place and nothing should be compromised on driving safety. The client's design question is therefore: 'How can we design the infotainment system in such a way that physical buttons become redundant and the driver can access all functions in one place, without compromising on user-friendliness?'

Star

An easy and safe to use infotainment system for road tripper.

Star is an infotainment system for the fictional car brand Atlas. Star helps road trippers get the best experience possible while on their way from A to B.

My contibution

The navigation is the part that will get you from A to B. It has useful functions such as navigating through a search function, recent, favorite or suggestions based on your preferences. In addition, it is also possible to plan and save a route in advance. The map is also customizable. By changing the perspective or visual aspects of the map.

Sketches & Flowchart

I sketched my ideas on paper which I later formed into the first draft of the design.

In addition, I made a flowchart of my part to clarify the flow through the product.

Sketches of design requirements
Flowchart

Wireframes

After the first sketches I quickly started working out wireframes digitally, which also functioned as the first prototype. By using grayscale, the focus was mainly on functionality and not so much on design.

Wireframes

Styleguide

Color styles

The color green is associated with nature, represents strength and growth and is also associated with sustainability. All this is related to our target group that likes to travel around.

To be able to use the color green, it had to be in good proportion with the other colors. Since we used green to add accents, I didn't want to contrast too busy colors, so we chose black and white.

To give the colors a better coherence, we did not choose black with hex value #000000 and white with hex value #FFFFFF, but a somewhat softer version, namely black #2F2F2F and white #EFEFEF.

In addition to these three colors, we have also added the color gray. This is rarely seen in the designs and was only used to distinguish, for example in a pop-up that I used when adding to favorites.

Color styles

Text styles

Typography is very important to make the design come together. It forms a large part of the appearance and determines how a text and interface show to a user. Sleek fonts often look more exclusive and businesslike, while round fonts radiate more friendliness and openness. This is why we as a team have decided to continue with “Poppins”. This is due to the geometric style of these fonts, and has many variations. It's a friendly fonts with nice round shapes and an open feel. In addition, it is effective both as a header and for paragraphs.

Text styles

Prototype

The final prototype was a high-fidelity prototype, incorporated with the house style of our fictitious car brand and a home screen from which the user experience begins.

With this version we have merged all parts; climate control, media player, communication, navigation and settings, into an infotainment system called “Star”.

Navigation walkthrough

Navigation

Want to learn more about this project? Feel free to send me a message.

Multiple screens of the navigation