Menu

What is “Clarity”?

 

“Clarity” is a design concept for a cross-platform infotainment system. The system is composed of two modules:

  • an iOS app concept and QT prototype
  • a infotainment unit concept and QT prototype

 

Why “Clarity”?

 

Most vehicle infotainment systems are composed of different components that have different design languages and behave completely different.

 

What is unique about “Clarity”?

 

Clarity is designed as a whole. The user does not need to learn two different  user interfaces in order to control the exact same thing: his/her car.

Learn it once, use it everywhere. The interface is adapted to each platform, yet it is similar.

 

What else?

 

The whole system is designed with simplicity in mind. Nothing is more than two taps away. This is especially important for in-car infotainment systems as the user needs to pay attention to the road ahead.

Competition Research

The first step of the project should always include a competitive analysis.
During this step all the alternative existing solutions are explored and our USP (unique selling point) starts to take shape.

The Initial Sketches

 

The initial ideation was done using pen and paper. Most efficient and lowest cost method. This is an exploration phase so using the least time consuming method is important.

AppRemote01
AppRemote02
AppRemote03
AppRemote04

The First Wireframes

 

After the initial research and a few hand sketches, wire-framing is the next logical step. This sets up the controls in their space and allows a first view of the entire product layout.

iPhone 8 Copy 6@2x
iPhone 8 Copy 8@2x
iPhone 8 Copy 9@2x
mainScreen Copy 6
mainScreen Copy 7
screenMusic@2x

Interactive QT iOS prototype

 

In order to test the ease of use, I build a functional click dummy prototype in QT-QML. The prototype runs on iOS and was used for the initial user tests, being refined along the way based on user feedback.

Car dashboard. Interactive QT prototype

 

Visualizing the interactions of the actual infotainment unit is very important. The layout is different from the iOS prototype therefore I also built a separate prototype for further testing.

Many of the components are shared between the two prototypes and this benefits two things:

  • minimizes the actual development time
  • aligns the design

The full color design

 

Here are a few key screens that show the design in more detail. Both platforms are places side by side in order to better compare the similarities and differences between the two.