Now Playing Screen with HD Radio Features: Wireframe
This is the wireframe for a Now Playing Screen for an FM radio station with 8 HD Radio programs. (In practice, most stations only have 2-4 HD Radio programs.) The new features introduced with HD Radio's Connected Radio services includes the ability to Like and Dislike a program with the feedback sent back to the station, and a bookmarking feature. The driver can bookmark favorite songs, and the HMI will monitor live radio broadcasts for whenever they're playing anywhere on the dial. In addition, the driver can opt to stream a station at any time, which would be especially useful when on long roadtrips outside of the broadcast market.
Built into the wireframe is a virtual console on the left mimicking a car's physical center console with dedicated hard key buttons, also of my design. I wanted to illustrate some alternative ways for organizing features in an infotainment system with paired hard key buttons, as well as serving as a branding platform by showcasing the HD Radio and DTS logos.
As noted above, this design is OEM-neutral, which means it doesn't look too much like any one automotive brand's infotainment system. We wanted a design that wouldn't alienate or offend any partners by looking too much like one of their competitors.
Now Playing Screen with HD Radio Features: Screen Mockup
After a concepting phase offering 3 different visual design directions, we ultimately settled on this design direction. As is commonplace in the industry, the dark theme is easier on the driver's eyes, especially at night. It features big buttons, easier to hit within a moving vehicle -- or while standing next to a demo hardware unit in a conference room. For branding purposes, we used "HD Radio Orange" as the primary accent color.
This screen mockup represents a fully realized screen for the production demo app. I wrote the UX requirements and collaborated with the HD Radio technical writers on wording for the corresponding technical requirements documentation. The visual designer created a style guide and sliced media based on this screen. The software programmers did a great at executing this design, too.
Notice the artist shown on screen: Alex Keyes. This was one of a large number of "Faux Artists" that my team created for the purposes of speeding up design concepting while avoiding copyright issues with real people and content. Using a stock image, I asked the visual designer to create album art for each artist. I also gave each artist a list of songs, which made it easier to show mockups of album lists. Where possible, we found an image that could be a still from a faux music video, which would be used in concepts for apps that could play music videos with enhanced DTS audio processing, of course.
Now Playing Screen with DAB Features: Screen Mockup
DAB is the digital radio standard for much of Europe and a competitor to HD Radio. However, as a turn key solution ready for worldwide deployment, the HD Radio Connected Radio services offers a consistent set of services for enhancing the DAB radio listening experience, as well.
One of my goals for this project was to create a single Now Playing template that could be easily adapted to a large number of music and audio sources. The template adapted very well to the available content elements in a DAB terrestrial radio broadcast, while also integrating Internet-connected Connected Radio services. I designed similar Now Playing Screens for MP3 music playback, Bluetooth Audio, Podcasting, Satellite Radio, and more.
For illustration purposes, this screen mockup shows where we would insert "toast"-style alerts on screen, as well as the visual look & feel for them.
Live Guide: Wireframe
Touching the radio dial-shaped button or "FM" icon at the bottom of the Now Playing Screen displays the Live Guide. This is one of the signature HD Radio Connected Radio features. If a car has 2 or more radio tuners, then it can use one of them to play music, and use another for constantly monitoring what's being played on other radio stations in the area.
I decided to display the Live Guide first rather than the FM Tuner tab for a couple of reasons. For one, it's a signature feature that will be frequently shown off during live demos with automakers and Tier 1 suppliers. In addition, the user goal for browsing what's playing on the radio is more common than tuning to a specific frequency far away on the dial.
Live Guide: Screen Mockup
Here is the screen mockup of the Live Guide. Note that the guide shows a mix of station logos and tag lines, plus artists and songs that are currently playing on the various stations. As now playing info isn't always available for every station, this screen mockup illustrates one strategy for graceful degradation when the current program info isn't available. By contrast, the station logo and tag line should be always available in the US Market, with similar info available in DAB (European) markets.
This screen mockup also illustrates how my team created faux station logos and tag lines in addition to a large library of faux artists, album names and song titles. This helped us avoid alienating any individual radio station partners as well as potential copyright issues.
FM Dial: Screen Mockup
This screen mockup represents my solution for the demo's FM dial needs. The user can drag the bar on the dial to any individual frequency. Available HD Radio stations 1-8 appear above the frequency number, if there are any, along with the logo for branding purposes. The screen features seek and scan functionality, as well as tapping dedicated buttons for going up or down by .2 on the dial. The AM Dial tab has very similar functionality. Additional features that were in an early concept were left out of the current release.
The driver can easily return to the Now Playing Screen by pressing the Music button on the virtual console, or hitting the Back button once.
Audio Sources Screen: Wireframe
Touch the Audio Source button on the Now Playing Screen. I intended for this screen to integrate default apps with audio or music experience apps which the user might install from a proprietary automaker-branded app store. The traditional terrestrial broadcast apps are shown prominently at the top of the first page of the screen.
In an earlier version of this wireframe, the user could swipe to review another set of icons for other audio and music apps.
FM Settings Screen: Screen Mockup
Touch the Settings icon in the bottom right corner of the Now Playing Screen. This screen allows the driver to manage a few FM-specific settings, including providing access to the Connected Radio settings. Connected Radio settings include specifying image size (e.g., high resolution) and controlling the new "station following" experience.
A DTS or HD Radio staff person can also access specific demo settings here, such as setting a location. Whether Las Vegas, Tokyo or Frankfurt, the demo can play AM, FM and HD Radio or DAB stations. It's a cool system.
Workflow for Manually Streaming a Station
As one might imagine, a brand new Internet-connected platform for what's traditionally been a slow moving technology area, i.e., terrestrial radio, brings with it many complicated new use cases such as this one. As a result, I had to carefully illustrate multiple use cases around the station following features in particular, both the automatic and user-triggered manual cases. Further variations also arise from user settings and HD Radio vs. DAB. One of my strengths is being able to flesh out complicated logic flows such as these.
The Now Playing Screen features a "Stream Station" button, which the user can optionally select at any time. This button should only be displayed when the HD Radio Connected Radio service provides an Internet streaming source URI in the meta-data for the station.