Year 1 first piece | Car infotainment system prototype | HTML, CSS, JavaScript | Grade: First


For nearly a decade, cars have had rather complex ‘infotainment’ systems which generally control ICE (in-car entertainment) elements such as satellite navigation, music players, radio and hands-free phone just to name a few. However, these systems tend to have very poor interfaces that are not terribly well thought-out, difficult to navigate, display information poorly and do not fit in well with traditional car instruments such as speedometers and rev counters.

What could be done to improve car infotainment systems?


User research was conducted by speaking to car owners and asking them what they thought of their car infotainment systems. I spoke to people who owned Ford, SEAT, Fiat, Jaguar and BMW cars, who voiced the following concerns.

'The system runs too slowly and the touchscreen requires pressure to press.'

'The button layout on the steering wheel is illogical, many buttons have multiple functions.'

'The app screen in the instrument panel is small and only shows very key trip information.'

'It takes far too many unnecessary button presses to program the Sat Nav.'

'Phone app is easy to use, even if the button layout on the wheel is illogical.'

A group of people graphic.

The solution must include...

Therefore, my research dictated that my solution must:

  • Must be controlled by a joystick on the centre console, steering wheel buttons and a touchscreen.
  • All apps must be usable on the big display on the centre console and the smaller display behind the driver – they need to scale effectively so that the most relevant information is shown.
  • Must be able to multi-task, e.g. you must be able to be using the phone whilst also using the SatNav or the music player.
  • The system must run fast and smoothly, be easy to update and be good enough for the user to want to use but also work with other systems that the user may prefer to use instead such as Android Auto and Apple Carplay which run from their respective smartphones.


The first stage of development was to create user personas. The needs, wants and personalities of these hypothetical users helped pave the way for the design of the system.

Image of a middle-aged woman with dark red hair in a snowy forest, wearing a grey top, dark grey dungarees and a red and grey wooly hat.


Late 50s, likes the simple things in life.

Is a woman in her late 50s, more interested in getting from A to B than the pleasure of driving. She’s not at all interested in car features apart from Satellite Navigation to help her travel to places in the centre of larger towns and cities that aren’t that obvious to find. She doesn’t like driving on busy motorways, much prefers country roads but appreciates that by travelling on country roads the journey is often slower so will drive on some motorways and dual carriageways if she must.

She wants:

  • A Sat Nav system that is easy to use and clear to see whilst driving.
  • A Sat Nav system that allows you to avoid certain roads on your route.
  • An infotainment system that does not distract from driving or get in the way of using the car. She’d want certain functions like lights, heating and the actual driving of the car to be down to the driver to set manually, not set automatically by a computer system in the car.


Early 20s, loves cars and technology

Is a young man, early 20s, well-off financially for his age, interested in technology and loves cars with all of the latest technology even though he only really uses the phone regularly and the Satellite Navigation on occasion. He has high expectations of quality and design. Everything has to work fluently and be fast – just like his car.

He wants:

  • The system to be easy to use whilst driving, especially the phone feature. He would want buttons on the steering wheel to make this easier.
  • The system to be feature-rich with lots of different ways to customise the system and adapt it to his liking.
  • The system to be fast and responsive.
Image of a young man wearing a white top and black sunglasses laughing in the driver's seat of a BMW car.
Image of a young woman on a motorbike with her small child - has curly hair and wearing a white top.


Mum, aged 35, loves her kids and music

Is a mum of age 35, has several kids who love to change music in the car! She likes driving as a break from the kids and when driving alone or with her husband she likes to have her own music on, but when her kids are in the car they like to change the music back to their own. Doesn’t really utilise many other features of the infotainment system – music is her priority.

She wants:

  • An easy way of updating the music in her car – her kids are always requesting for new music!
  • An easy way of switching between her music and her kid’s music without having to change SD cards/USB drives or CDs.
  • Great quality sound.
  • The ability to control the music from the steering wheel, e.g. change track and also change volume, as well as change the location to read the music from.


Wireframes showing the different apps in the infotainment system were sketched and then drawn in Adobe Illustrator.

This wireframe diagram shows the Sat Nav app of the infotainment system.

I wanted the Sat Nav to be very clear and easy to use, so I took inspiration from Google Maps to design it with the large area of the UI dedicated to showing a map and the route information in the left-side pane. Note, I also wanted to show a more detailed view of junctions. Thickthorn Interchange in Norwich modelled.

This wireframe diagram shows the phone app, with a dialpad on the driver side and contact information on the other.

The phone app features the dialpad on the drivers’ side with a list of recent calls above that the driver can tap to call.

This wireframe diagram shows how the Sat Nav app could look running inside a circular speedo gauge. It wasted space.
This wireframe diagram shows the final design of the gauge, using a squarer design which content fits into easier.

The instrument panel was difficult to design. Whilst designing an instrument panel that could show a lot of information, I learned that circular gauges wasted a lot of space. The wireframe below shows what I designed in the end. The design shows speed, fuel, revs, gear and the condensed version of the infotainment system.

These drawings were then made into high-fidelity drawings on Adobe Illustrator.

Three wireframes showing different screens on the phone app - text messages, phone calls and call history shown.

These wireframes show three different screens of the phone app on the infotainment system.

Also shown are various states of the head-up display which displays the speed, revs, gear and also a condensed version of the phone app running on the infotainment system. The idea is that having the app in the head-up display means that the app can be used whilst driving using the steering wheel buttons, also shown.

Wireframes showing the different states of the phone app whilst displayed in the head-up display (where the speedo, rev counter, fuel gauge and so on are located). The idea is that having the app up in the head-up display makes it easier to use whilst driving.
Four wireframes showing the design of the music app in the head-up display.

These wireframes show the different stages of how the music app could work in the head-up display. Shown on the left are the audio sources that the driver can select, then followed by the track playing view, followed by changing the music source to a folder on a USB folder to finally cycling through tracks. This can all be done by steering wheel controls.

Diagram of the speedo and instrumental panel - it is an oval with rev counter and fuel guages on either side, the speed displayed at the top of the panel and the app shown in the middle of the panel.

The instrument panel has been designed to make the best use of space. The rev and fuel guages go up the sides of the oval which makes room for having the app and speed displayed in the centre of the instrument panel.

Colours were later added to the wheel. The instrument panel is mainly blue with red highlights for the icons on the app running on the instrument panel and the guages are in red and purple to give a sense of speed, sophistication and also so that it looks modern.

Later, colour was added. The instrument panel was coloured blue with pink accents for the gauges and textures were added to the steering wheel.

User Journeys

The wireframes were used to create three different user journeys, showing how the users described in the personas would interact with infotainment system through centre console controls (located by the gear selector) and on the steering wheel buttons.

Some of the scenarios shown in these user journeys were later converted into usability testing tasks for testing - for example changing the music using the steering wheel buttons.

Using the satellite navigation

This journey shows how a user would program the satellite navigation (using the controls on the centre console) to navigate from 13 Ella Road in Norwich to 7 Worcester Road in Hatfield, avoiding the M11 and A1(M) motorways.

User journey showing how the Sat Nav would be programmed. There are 5 steps.

Using the phone to call and text

The infotainment system is designed to be controllable by steering wheel buttons (for use whilst driving) and a 'control dial' on the centre console. Here, the user is calling a contact called Elena whilst driving using the wheel buttons and then texting a contact called Mum whilst stationary, using the control dial.

The 6 steps to using the phone app, shown in a diagram.

Using the music app whilst driving

Using the wheel controls whilst driving, this user journey describes how a user would change the source of the music from a CD to a specific folder on a USB drive.

Diagram showing how the user would change the source of the music from a CD to a specific folder on a USB drive.

View the user journeys in more detail

For a clearer view, these user journeys are available to view in a PDF document.


The testing prototype was created using HTML, CSS and JavaScript and was focused around navigating the infotainment system with the steering wheel buttons. The user can carry out specific tasks by clicking on the buttons on the steering wheel and the content shown on the instrument panel changes as the user performs different tasks. Dashcam footage was displayed behind the instrument panel and steering wheel illustration and could be shown or hidden to simulate stationary and driving scenarios.

Three tasks were given to testers to complete:

Testing usability whilst stationary the user must change the source of the music from the default to a folder called ‘Kids music’ which is located on a USB drive, they then must skip a track.

Interface testing the user must complete the same task but this time whilst driving.

Safety testing whilst the other test is being completed, the users’ eyes will be tracked to see where they are looking to see where attention is.

The heatmap showed that the majority of the user's focus was on the instrument panel, not on the road, therefore the system may not be the safest.
The gaze map also showed that most of the focus was on the instrument panel.

The data from the eye tracker showed that most of my testers looked at the infotainment system rather than the road. Perhaps the prototype was too difficult to use or the test wasn’t realistic enough. However, post-test interviews revealed that on the whole the users liked the design of the infotainment screens and many felt that they’d possibly be able to complete the tasks whilst driving.

The video of the gaze map shows the order in which all of the test users looked at different areas of the screen during the testing. A lot of the gazes were focused on the road to start with, but as soon as the test began the focus swiftly moved to the wheel for all users.

What users said

Comments from those who tested the final version of this project.

‘I didn’t really feel confused by any parts of the test.’

‘If the road was clear and there were no cars around me I would definitely attempt to use the system.’

‘If the infotainment system apps used this design, they would probably work OK.’

‘I could imagine using the buttons with my thumbs whilst keeping my hands on the steering wheel.’

‘I think it was a very simple, no-nonsense kind of thing.’

‘I would imagine if that was an actual car the screen would be a lot smaller and I would have trouble seeing it without my glasses.’

'I had trouble grasping it at first because I didn’t really understand the interface properly but after I realised the screen was behind the wheel, I got it.’

A group of people graphic.


The nature of this project was that it ended after the first round of testing, but future versions of this would have benefitted from containing a mix of hardware and software. Gaming hardware such as wheels and pedals could be used to control a higher-fidelity simulation of the infotainment system. This would give the user a more accurate representation of what it would be like to use the infotainment system with actual hardware.


Enjoyed this case study? Have a look at some similar work!

Accessibile Mobile e-Commerce Site

A shocking 98% of the top one million home pages on the internet fail to meet accessibility standards. Mobile use by the blind is also very low. How can this be improved?

User Story Website Prototype

I was asked by The User Story to spend several months in late 2018 and early 2019 redesigning their website. This is how I prototyped a website for a UX consultant.

Cura-T Facebook Chatbot

How do you make finding clinical trials easier? Interning at Earthware, I worked closely with Cancer Research UK to develop a Facebook Messenger chatbot to do that.