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

6 min read

HUDWAY Drive is a portable heads-up display (HUD) for any car.

Without distracting you from the road, it shows all you need in front of your eyes:

speed, navigation, notifications, calls and OBD-II data.

HUD interface

Task and start of process


Design a HUD interface for drivers.


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


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.

References are needless!

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.

Freeride mode

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.

Navigation mode

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.

Mini 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.

Tesla HUD

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.

HUDWAY Drive App

We designed HUDWAY Drive app for iOS and Android to interact with the device and customise HUD interfaces.

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


The main aim of the app is to operate the device. Our key idea is that once
a driver creates a route, they are able to pocket their phones and not use it.

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.

Trip history

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.

  • 100+
  • 140+
    designed elements
  • 1 500+
    active users
We really appreciate you reading this
If you like the Drive, you can learn more and order here: