In-Dash Media Player
This two week exercise explored a better user interface for quickly accessing media from the range of different sources available to drivers in modern cars.
The media player should be easy to understand with limited attention and time, since a driver needs to keep their focus on the road.
The design should be adaptable for both left- and right-hand drive vehicles.
Testing revealed that even the closest edge of screen required the driver to lean forward over the steering wheel.
The media player allows the user to select from all available media sources and then navigate to find the media they’re looking for. The interface needs to adapt to different hierarchies for each type of media, since tuning a radio is different to finding a particular podcast episode.
Users can add media and media sources to a favourites screen to quickly access what they use frequently.
The initial design had tabs along the long edge nearest the driver to access different media, with the Now Playing screen being shown once media was selected and playing. However this made quickly accessing playback controls difficult.
In the second iteration, the Now Playing screen with playback controls is the base of the hierarchy stack and users can always return to the Now Playing screen with one tap. When navigating through media the different levels stack up over each other on the right.
The visual design emulates the design currently found in the Tesla Model S. In the limited amount of time we had, and without access to screenshots I recreated as much of the style as possible.
The design is laid out in three columns, they first column nearest to the driver contains tabs for favourites and media sources. The middle column is playback controls and a back button in the navigation hierarchy. The right column shows only visual information.
The White Zombie album was used in the visual designs because the full album title is quite long, as are the track titles.
I created a quick app icon for the demo app, mostly so we didn't have to keep looking at the default wireframe app icon.