The flagship mobile redesign project was a 2-part project which started from end of 2014 with an in-depth audit of our Android and iOS apps, and then revisited again in 2016 with a large focus on user testing, using methods like card sorting and treejack activities. The final navigation redesign was released to the public in 2017.
PROJECT ROLE
• UX Designer
• Design Researcher
TOOLS I USED
• Omnigraffle
• Illustrator
• InDesign
• Sketch
• Usertesting.com
• Optimalworkshop.com
Skills I Used:
• Auditing
• Card Sorting
• Card Sorting Analysis
• Competitive Research
• Experience Stories
• Numerical Matrix
• Observation Sheets
• Personas
• Treejack
• User Research
• User Testing Script Writing
To view this project as a presentation, click here.
Job Story
When I am navigating through the mobile app, I want to be able to find and understand the content, regardless of physical and psychological context, medium, or channel, so that I can have a successful browsing or search experience.
Problem
The iHeartRadio app doesn’t just contain live radio. It also offers artist radio, podcasts, and as of 2018 - playlists. In 2014, user surveys showed that very few users were aware of the different content types offered by iHeartRadio. Also, analytics showed that an extremely low percentage of users went to the hamburger menu, which surfaced the different types of content they could navigate to in the mobile app.
Figure 1. Comparison of Android and iOS mobile apps.
To add to the challenge, in December 2016, iHeartRadio launched two tiers of on-demand services (Plus and All Access), so users were not just searching, browsing, and listening to music or podcasts; they were also buying different levels of subscription services, and organizing their content. With such a large variety of content types we wanted the user to engage with, the taxonomy, nomenclature, and structure of the entire app quickly became complex. In addition, the interaction paradigm will then be affected within iHeartRadio’s products across various platforms and devices: desktop and mobile websites, Home CE, Android Auto, CarPlay, and wearables.
Business Goal
To increase the users’ awareness of the different content types iHeartRadio offers - artist radio, live radio, podcasts, and playlists, and thereby increasing the TLH (total listening hours).
Design Goals
Identify desired paths to eliminate unnecessary screens/steps.
Identify top-level categories for essential content and tasks.
Research
Audit
To analyze the information architecture of the existing app in 2014, I partnered with one other designer, and together, we started with a content audit for the Android and iOS apps. We reviewed the content structure between the two platforms, analyzing the content structure and hierarchy from a top-down approach, organization, labeling, findability/usability (from the user’s perspective), and content management (from the business perspective).
To visualize the larger goal through information ecology, here’s what it looks like:
Each area was a moving target, and the amount of data types, user types, and contexts, were rapidly expanding over a 4-year period. Despite the landscape continuously changing and evolving, the information needs of the users were similar. Users either browsed for exploratory seeking purposes, or searched, in a known-item seeking manner.
The content audit uncovered many questions through task flow analysis (for new and returning users, browsing or searching), and revealed major pain points areas, like the local station browse experience involving at least six levels of screens before the user can start playing the station. A few of the sample task flows are included below.
Figure 2. New user, Search experience task flow
Figure 3. New user, Search experience task flow with questions we had.
Figure 4. New User, Music browsing experience task flow
We also conducted a full screen inventory for both Android and iOS. Below is a snapshot from one of the Android inventory screens.
Figure 5. Snapshot of the Android screen inventory. For the full PDF which includes iOS, click here.
User Testing, Part 1
This led us to conduct a top-down hierarchical analysis, using task-based activities with users to evaluate understandability and accessibility around major use cases:
• Signing up
• Completing the genre picker screen
• Finding and listening to a desired station
• Finding a favorited/saved station
• Finding a recently played station that was not favorited/saved
We ran a couple rounds of the user testing with Android and iOS users on usertesting.com. To briefly summarize the results:
Signing Up
• 44% were annoyed or uncomfortable at having to sign up
• While the sign up experience was generally pain-free, many users didn't understand what was the purpose of signing up.
Completing the genre picker screen
• 33% expressed uncertainty or scrolled up and down the list of genres a couple times before making selections
• 17% couldn't find the genres they typically listen to
• During sign up, users understood the goal of the genre picker screen, but some felt that the list of genres didn’t accurately reflect their audio taste
• Even though the For You list of recommendations reflect the genre(s) the user selected on the genre picker screen, many ended up using Search to find what they want to listen to
Finding and listening to a desired station
• 22% were unsure if they were listening to a live or recorded station
• Users understood there were live stations, but were unsure why they were seeing live stations not from their local area
• Users were able to describe what is artist radio, but were then surprised when a different, but similar artist, started to play on an artist station
Finding a favorited/saved station
• Most users had no trouble finding a favorited/saved station
Finding a recently played station that was not favorited/saved
• Most users had no trouble finding a recently played station that was not favorited/saved
What We Learned
From the results, we learned that the discovery experience had areas for improvement, such as:
• How do we get listeners to listen to content they care about, in the quickest, most frictionless way?
• How do we make it simple, seamless, and enjoyable to find content they know and discover new content they’ll love?
• How do we acquire new users through highlighting what’s unique about iHeartRadio, in a way where we don’t just talk about it through a list, but engage the users in a conversational experience throughout the product?
• How do we cultivate a relationship with the users, to keep them engaged, and hooked on the experience enough to come back for more?
User Testing, Part 2
When the roadmap for this project reopened in 2016, I worked with two junior designers, one project manager, and my supervisor to:
• Survey over 1,000 participants - male, female, new, and returning iHeartRadio users - on what users expected iHeartRadio to offer
• Conduct card sorting and treejack activities with over 8,000 users - male, female, new, returning - through online tools and in-person on-site, and remotely
Through the survey, we learned that new users expected to:
Listen to the live station of their choice (51%)
Search for any station, song, artist, or podcast (49%)
Listen to the artist station of their choice (46%)
Returning users expected to:
Listen to the live station of their choice (53%)
Listen to the artist station of their choice (52%)
Search for any station, song, artist, or podcast (51%)
Analytics observed that:
• Search results in more uniques than directories combined
• Most searched content were artists, songs, local stations
• Once a user discovers the content he/she is looking for, future starts come from the player, For You, or My Stations
• “Browse” offers an intuitive and predictable way for users to navigate to desired content, especially until there is a more robust search experience
• A primary “Browse” sets a more accurate baseline against which we can perform future tests
How we decided on the bottom tab nav
Working with both junior designers, we conducted competitive research, and reviewed a number of existing mobile patterns for navigation (See Smashing Magazine and Nielsen Norman Group). Based on what we’ve observed through research and analytics, we understood the benefits and drawbacks of the hamburger menu as the following:
Benefits:
+ Made the UI look cleaner
Drawbacks:
- Made different content types less discoverable. Besides Live Radio, many users didn’t realized iHeartRadio offered Artist Radio and Podcasts.
- Forces the user to take a couple extra taps to navigate to another section of the app
- Hides the context of where the user is currently at
- Information scent was greatly reduced
- Pattern/rhythm doesn’t translate well into other platforms
After compiling our research, we decided to go with a bottom tab navigation pattern.
Benefits:
+ Exposed content types through the tab bar names, thereby helping the user understand what types of content iHeartRadio offered
+ Jumping from one section of the app to another is just one tap away
+ Made it easy to tell where the user is currently, at a glance
+ Information scent is greatly increased
+ Pattern translates better to other platforms
+ The structure is flexible enough to provide room for the expanding content types being released for on-demand
+ The structure can accommodate for a number of subenvironments under each tab
+ At the same time, the structure was rigid enough where, if the app’s content continuously evolved, there was still some order/consistency to the “messy” landscape
+ Located at the bottom of the screen, it was easier for the thumb to reach
Drawbacks:
- Restricted to a maximum of five categories due to limited real estate on a mobile device
To decide what the categories are, as well as the structure, organization, and labeling of content, I led multiple card sorting activities with the team.
Figure 6. Card sorting activities in-person.
These card sorting activities were crucial to the redesign of the navigation system because we needed to establish a strong, solid foundation which can take in the growing variety of subenvironments and content types. If you’re familiar with Stewart Brand’s “shearing layers of change”, this is equivalent to establishing the structure.
Figure 7. Stewart Brand's Shearing Layers of Change.
If this layer is not established well, we might run into issues with the rest of the inner layers in the future.
The Moving Targets
With on-demand being released during this project, we needed to account for the challenges of content organization affected by new functionality. Each function included brings new categorization schemes. For example, the save functionality now no longer just saves a station or podcast. Users will actually have the option to save songs, albums, playlists curated by iHeartRadio, and user-generated playlists. So, how should the saved content be organized? Should all content types (artist radio, live radio, podcasts, playlists) be combined into one area? Or should they each live under their respective navigation pages/screens?
To answer these questions (and others), hybrid and closed card sorting activities helped provide user provided feedback on the structure, organization, and labeling of content. In the card sorting activities, we included content types from a high-level invariance such as “For You”, to low-level flexibility, such as “Recently Played Live Stations”.
From the cart sorting results, we organized our learnings into observations, verbatims, and interpretations.
Figure 8. From How To Make Sense of Research Findings, by Abby Covert
Figure 9. Research findings organized
From our learnings, we were able to identify:
• The personas
• Experience stories
• What order the tabs should be in
• Patterns of what content types should go under each tab
Some common organizational patterns we found between the two:
- For You was expected to have mostly recommendations.
- My Library was overwhelmingly expected to have all types of saved content, except Podcasts. Users felt that all podcast material is very different from musical content, and should be completely separated. Some users also expected recently played songs to be here.
- Radio was associated with Live and Artist Radio content, whether directory, recently played, or saved.
- With the test version that included Playlists, users felt that directory and saved playlists were strongly associated here, while Playlist Recommendations should go under For You
- With the test version that included Music, the definition became a bit murkier, since next to it was Radio. Users placed iHeartRadio-curated Playlists, Artist Station, and Recently Played Artist Stations under this category. This is a mix of playlist music and radio content.
- All Podcast content was grouped under Podcasts, whether saved, recently played, or recommended.
- Recently played content was scattered across all respective categories - For You, Your Library*, Radio, Playlists/Music, Podcasts
*“Your Library” category used to be called “My Library” as you can see in the research analysis, but after we noticed inconsistencies in the voice perspective throughout the app, “My” was changed to “Your”.
When we ran the card sorting and treejack tests online, here is a summary of the results:
Results
After the release of the new navigation in 2017, we saw a significant increase in user’s awareness of the different types of iHeartRadio offerings. In some areas, like Podcasts, iHeartRadio saw a significant spike in usage. Through further user testing, almost all users were able to easily identify all of iHeartRadio’s content offerings: live radio, artist radio, playlists, and podcasts.
Overall, all users found that the new navigation was very easy to use. Here are a few sample quotes from the user testing pool:
“I thought the navigation was extremely clear and easy. The menu bar and search bar made maneuvering around the app incredibly swift and easy. The design of the app was also good to look at.”
"I liked the overall design and layout. The app was easy to navigate through and made it simple to find the different types of content that I needed to. The way everything was saved under one tab was a great design and made for a very user friendly experience.”
“I loved how easy it was to navigate and find what you are looking for. I also loved how incredible the variety is, there is stations and playlists for every artist and occasion.”
“It was so easy to use this app, and I feel like I might discover more new music via this app. I would love to use the app in future.”
“I like that it will operate with more customizations for the user. I like that I can have a playlist which I can quickly go back to and choose to listen to. And I like the whole "library" idea. It is what iPhone users are accustomed to. The language fits and then making the options customizable for the user, makes sense.”