Redesign for a New Radio Player
Radio Player is one of the common features among Garmin’s in-vehicle infotainment system products. In this project, our customer needed new functions for the Radio and I was in-charged of supporting this task to deliver the new Radio UI with a simplified user experience that meets customer’s requirements.
The Challenge
From the original design of Garmin’s Radio Player, there were already some basic functions including radio band switch, saving your favorite radio stations to Preset, and scanning/searching for the available radio channels.
The original design of the Radio Player
After the meeting with our customer, we found several issues below:
​
-
It took too many steps for a user to save a favorite station to a Preset filed.
-
There was no way for the user to tune to a station immediately.
-
There was no convenient way for the user to save stations with the strongest signal among all frequency bands.
The Iteration of the Design
At first, I conducted competitive analysis for radio UI and study radio players among Garmin’s products. And then kicking off the design process.
Following the Design Guideline of the Platform
Based on the design guideline among Garmin’s infotainment system products, we had a few core guiding principles:
​
-
The Radio Player should be in a flexible look and feel.
-
The UI of Radio Player should be clean and streamlined.
-
The primary functions should be on the left side of the player while the secondary functions are on the right side.
One of the UI guideline of the Radio Player
Design Solutions and Prioritizing Different Functions in the Radio Player
I worked closely with the engineering team to design the solutions and also prioritized different solutions so that it could help me to design the layout based on the guideline.
​
-
The first primary function is the Preset Station Fields, I tried to put the fields on the first layer of the Radio Player so as to reduce the step for a user to save a favorite station.
-
A [Manual] function was added in the secondary function part allowing the user to instantly tune to the desired station by dragging the thumb on a Manual Frequency Adjuster bar when pressing the [Manual] button.
-
A [Auto Save] function was added in the secondary function part allowing the user to automatically save stations with the strongest signal among all frequency bands.
The first version of the wireframes redesign
The second version was also created for the following attempt:
​
-
I put the Manual Frequency Adjuster bar to the first layer allowing the user can manually tune to the frequency more quickly.
-
Moved the Preset Station Fields to the right side to make each area of those fields larger so that the user can press them much easier.
The second version of the wireframe redesign
The Result
After making back and forth with the engineering team and our customer, we finally made a compromised design as follow:
-
The Manual Frequency Adjuster bar should be put into the second layer, which would pop out after pressing [Manual] so that there’s enough space for displaying all the scales of the radio frequency band.
-
As we originally thought that the Preset Station Fields was the primary function and should be put at the left side area of the screen based on the guideline. But considering that it is more important to let the user touch each of the Preset Station Fields easily, we finally placed those fields on the right side area to maximize each area of the fields.
-
The [Auto Save] function is the secondary function so it is placed at the right side area.
The final mock up of the Radio Player
Learning from the Experience of the Physical World
We provided multiple ways for the operation of adding a radio station into Preset Station Fields.
One way is from the early design of Radio with physical buttons, the user has to press and hold one of the physical preset buttons to save their favorite stations into preset. We mapped this physical operation into the digital interface, which allows the user to press and hold the virtual Preset buttons to add their favorite station. The other way is by tapping the [Star] icon to add a channel into Preset Station Fields.
A user can add a radio station to one of the Preset Station Fields by pressing and holding the physical Preset buttons ( Image source)
Two ways to add a radio channel into Preset Station Fields
More selected projects
