In 2015, I worked with a small team on a Hack Day (a 24-hour, company-wide competition) project which received the grand prize, and was implemented into production. The concept is iHeartRadio for the MacOS. This product creates a quick and simple way to listen to iHeartRadio anytime, and everyday, without having to go to the website, and stays above any clutter on your desktop. We believe this will boost cross-platform listening, higher engagement, and higher total listen hours.
PROJECT ROLE
• Lead UX Designer
• Design Researcher
• UI Designer
TOOLS I USED
• InDesign
• Photoshop
SKILLS I USED
• Research
• Wireframing
• Conceptualization
Job Story
When I am at my laptop or desktop computer, I want to easily be able to control my listening experience while working, so that my workflow is not interrupted by unnecessary complications or clutter while multitasking on my device.
Research
In 2015, Apple was rated the best laptop brand by Tech Geck and Ranking The Brands (see Figure 1).
Figure 1. Apple was ranked the best laptop brand in 2015.
Additionally, we noticed that there were no music services that offered status bar apps that allowed users to play radio or user-saved content. The only music-related status bar apps we found were Shazam and GarageBand - both of which had very different purposes than iHeartRadio's product. With hardly any competition here, we felt that this was an excellent opportunity for iHeartRadio to enter a blue ocean, or uncontested market space.
Figure 2. Uncontested market space for iHeartRadio.
Some benefits of a status bar app includes:
• Always visible, can be always open, and promotes daily routine usage.
• Tabs can get lost, or even closed by accident.
• Easy access when user needs to respond quickly (mute, skip songs, etc).
• Feels more secure.
• No need to worry about draining your phone’s battery.
What does this mean for iHeartRadio's users?
• No more accidentally closing web browsers
• Efficient integration into their workflows
• Increased engagement, total listening hours
Concept 1
To accommodate for various workflow styles, this modular and customizable approach provides users the flexibility in adapting the iHeartRadio app to what is best suited for their needs. See high-res PDF here.
Pros
+ Customizable, able to drag window to anywhere on the desktop screen
+ Easy access to player controls
Cons
- High level of development
Concept 2
Smaller, lightweight version of concept 1. See high-res PDF here.
Pros
+ Compact UI for listening and browsing experience
+ Easier effort for development
Cons
- Limited to saved stations and recents
Concept 3 / Selected Concept
Simplified alternative player to concept 2, with inclusion of For You recommendations to mirror flagship structure more closely, and provide users with opportunity to browse new content without having to search. See high-res PDF here.
Pros
+ Includes For You recommendations
+ Simplified player
+ Follows mobile flagship structure
Cons
- Recents had to be moved under My Stations due to following mobile flagship structure
Other Concepts
Beyond the status bar app, I saw potential opportunities for iHeartRadio promotion, and integrating a more robust widget that can allow access all features offered on iHeartRadio and more. Some ideas included an Events page (displayed all iHeartRadio's exciting music events), Song History, and an Explore page, which features a more personalized set of recommendations. Since this was a 24-hour hack project, these concepts were saved for future discussion. See high-res PDF here.
Results
Upon release of the iHeartRadio Mac App to Apple’s App Store, we saw an addition of nearly 4 million new listening sessions, 76,000+ new, unique users, and an increase of 4.5% of TLH (total listening hours) to iHeartRadio overall within the next 2 business quarters. Revenue Growth over lifetime value was calculated to be over $14M.
Below are the final UI designs that went into production. See high-res PDFs here and here.
