Car media framework

EV dashboard UI framework for audio applications
Faraday Future 2019

FF91 dashboard

Dashboard of the FF91

Design brief

The Faraday Future FF91 has a traditional radio receivers as well as the ability to run Android apps through Android Automotive. For this project I worked with a product owner, and an Android engineer to create templates for content browsing and persistent controls for the media applications that would be installed for the vehicle's launch. The main challege was working within our established design system and making decisions based on ergonomics.

media sources

The set of audio apps integrated into this framework

Visibility and reachability

It was interesting working with embedded systems like this, unlike website and mobile apps we typically don't think of the other activities or even physical space that the user is in. The media application can be interacted with on the large center console display, but playback information is also displayed in the HUD (heads up display - projected on the windshield), and controls are also available on the steering wheel. There are technically two users in this system, the driver and passenger.

Based on findings from our human factors team, the lower half of the center console display is the most reachable, but the top is most easily visible. However there is obviously more critical pieces of information to display to the driver than viewing song titles - such as vehicle status, navigation, and system notifications. Notifications show up at the top of the screen, and navigation prompts are just below that. The overall system and importance of information were top of mind when I designed iterations.

player iterations

Playing with placement and interactions

Radio metadata

I relied on our Android developer, Keith, to understand how Android Automotive works for audio as well as limitation of our hardware. One of the technical challenges we would face is persisting the player regardless of the focused application - since typically audio focus is granted to the application being interacted with. From a design standpoint the Android applications were pretty straight forward - each app loads its own folders so we wouldn't have control over how users browse. The radio interface we would have more control although the technical challenge would be to resolve radio data streams, HD radio, and Gracenote, an API we leveraged for additional radio metadata.

Since the radio player had the most metadata and states to display I used those iterations to normalize the miniplayer with the other audio applications. I also defined all the discrete states of metadata availbility as the tuner streamed in new data and Keith's code resolved it with the information from Gracenote.

radio metadata

Resolving the various states of metadata as it loads in

Radio browsing and presets

From competitive analysis I found that some manufacturers were listing out radio frequencies in a list view rather than scanning in real-time. Our Android developer was able to confirm that we could do the same by scanning frequencies in the background, while I thought through the interface behavior when stations come in and out of reception.

From a quick poll within our team, I found most people only listened to a few stations they knew of. This insight fed the decision to place the personal preset list on the first content screen as well as combining both FM and AM presets together.

radio metadata

Saving a station preset on the radio

Outcome

It was fun working with our team on this project and exciting to see the prototypes come to life. This simple framework proved to be extensible as our other designers were able to add the phone to the set of media applications. For next steps I would have liked to test the interface in the car itself to see if further refinements are necessary.

Normalized player and browsing

Normalized player and browsing

Final design

Final designs in night mode

Hyun Kim