HUDWAY Drive: interface of a heads-up display and a mobile app for drivers

Task:

Design a HUD interface for drivers.

Meta-task:

Allow drivers to keep their phone in the pocket – therefore make driving safe and comfortable.

Process:

The first thing is to pick an interface grid. We narrowed down to 3 vertical columns with an accent to the central one to mimic a car dashboard. It will define future elements. In the central part we place either speedometer or navigation hints. Side columns are for additional information.

Getting to draft UI interface. References from Pinterest, Behance and Dribbble won't really help – they aren't relevant to the reality at all.

A major part of references are too far-fetched. Their authors don't bother to think how vague and incomprehensible they are to users.

We should keep away from thin lines like those in Tony Stark's helmet since it would be almost invisible due to the display tech specs. We'll also have to factor lens vibration during driving and sunshine in.

We used Inter font for all text blocks in the interface. It's excellent and classic serif, alternative to all default ones. It's free, flexible with typefaces, and supports a vast number of languages. 



Then we realised that Inter makes all the dynamic parameters (in this case, car parameters) look awkward as it isn't monospaced. So we redesigned it and drew graphemes of numbers and punctuation marks. Widely-spread abbreviations like mi were turned into ligatures performing as one grapheme with fixed width.

All the text label blocks are clear white. This provides sharp contrast so crucial in bright conditions. We decided to make speedometers scales adjustable. Tests showed 10 brightest colours visible in whatever light conditions and comfortable for users.

We picked bright red and orange for speeding alerts.

This mode works without creating any routes via the app. Device will rely on data from a car on-board computer and GPS.

We designed several options for the central Speed widget. The dashed line indicates RPM.

The central widget will be surrounded by additional widgets such as fuel consumption, trip cost, battery voltage, engine temperature, etc. 



We designed 11 widgets and provided them with emergency-states as well.

This is how it looks:

We need to adjust the notification to this interface. According to the concept, the central widget slides to the left, and the notification takes up to 2/3 of the screen. Notification is not just a call, but also messages from messengers, switching music tracks, calendar events, and notifications from social networks.

This mode turns on when a driver creates a route in the app. The central widget becomes an arrow and above it you can see the distance to the nearest manoeuvre and text instructions.

Notification in Freeride works the same as in Navigation mode.

During long trips with Navigation mode, drivers will have to constantly look at a static arrow before the nearest turn. We've added a special feature allowing a driver to minimise all the widgets to the bottom line.

We created a separate edition for Tesla drivers and tried to keep up with visual identity of electro cars. We designed widgets for battery level, added an activated gear indicator and other stuff that Tesla cars feature, for instance collisions or obstacles warning.


The app features are arranged in 3 sections: navigation, settings and trip history.

In the Navigation section we create routes and interact with locations.

We've designed a set of screen for each case. For instance, below you can see a screenshot from Figma with adding an address to Favourites.

This section contains all the necessary data about previous trips. Here you will find statistics on different parameters – plus, you can filter trips out by a date and check statistics on particular ones.