TuneIn: Delivering Personalized Digital Radio UX When People Need It Most

For more than a decade, TuneIn has served as an audio streaming service for its listening base, providing everything from live events for sports fans to up-to-the-minute news. With a background as a global radio aggregator, TuneIn features more than 100K streaming radio stations. It's a service that is particularly in demand now, as the global COVID-19 pandemic has made it more important than ever for people to have access to the latest information and developments, at home and around the world. For the UX team at TuneIn, their top priority is to deliver personalized experiences that make it easy for people to access the information and entertainment radio they need. Now, as the team has shifted to working from home (and so have most of the audiences they serve), they have adapted both the workflows and the experiences they're delivering to be most effective right now. Read on to see how TuneIn's approach to UX has changed during these challenging times, and how Adobe XD has helped them collaborate to deliver the experiences their users rely on most. Designing for the times at TuneIn: The need to collaborate remotely like never before As the COVID-19 pandemic forced workplaces to send their employees home, TuneIn was no exception. Being an audio streaming platform bringing together live sports, news, music, podcasts, and radio , the team saw their user base turning to them in record numbers to get the latest up-to-date information from stations around the world. This happened just as the entire team went remote, working with each other under very new circumstances. Fortunately, the team had spent quite a bit of time in Adobe XD after switching from Sketch more than a year ago. They were already designing, wireframing, and collaborating with each other in-app, using Adobe XD's live Coediting feature, and sharing their prototypes via XD with various stakeholders across TuneIn for feedback. Hongwei Huang, senior product designer, had also invested a great deal of time creating and maintaining a comprehensive design system that all designers could easily access from home. This had, to a certain degree, set up the organization for success even in difficult circumstances. “We have the ability to share everything in the cloud and we have the ability to push our new designs to everybody as a team. That's been a big advantage for us right now,” said Hongwei. “We've really collaborated even though none of us are in the same room together,” added Yuri Ono, TuneIn's senior director of product design.

by Simon Williams

posted on 05-07-2020

For more than a decade, TuneIn has served as an audio streaming service for its listening base, providing everything from live events for sports fans to up-to-the-minute news. With a background as a global radio aggregator, TuneIn features more than 100K streaming radio stations. It’s a service that is particularly in demand now, as the global COVID-19 pandemic has made it more important than ever for people to have access to the latest information and developments, at home and around the world.

For the UX team at TuneIn, their top priority is to deliver personalized experiences that make it easy for people to access the information and entertainment radio they need. Now, as the team has shifted to working from home (and so have most of the audiences they serve), they have adapted both the workflows and the experiences they’re delivering to be most effective right now. Read on to see how TuneIn’s approach to UX has changed during these challenging times, and how Adobe XD has helped them collaborate to deliver the experiences their users rely on most.

Designing for the times at TuneIn: The need to collaborate remotely like never before

As the COVID-19 pandemic forced workplaces to send their employees home, TuneIn was no exception. Being an audio streaming platform bringing together live sports, news, music, podcasts, and radio , the team saw their user base turning to them in record numbers to get the latest up-to-date information from stations around the world. This happened just as the entire team went remote, working with each other under very new circumstances.

Fortunately, the team had spent quite a bit of time in Adobe XD after switching from Sketch more than a year ago. They were already designing, wireframing, and collaborating with each other in-app, using Adobe XD’s live Coediting feature, and sharing their prototypes via XD with various stakeholders across TuneIn for feedback. Hongwei Huang, senior product designer, had also invested a great deal of time creating and maintaining a comprehensive design system that all designers could easily access from home. This had, to a certain degree, set up the organization for success even in difficult circumstances.

“We have the ability to share everything in the cloud and we have the ability to push our new designs to everybody as a team. That’s been a big advantage for us right now,” said Hongwei.

“We’ve really collaborated even though none of us are in the same room together,” added Yuri Ono, TuneIn’s senior director of product design.

A design system created in Adobe XD for TuneIn

TuneIn’s design system in Adobe XD.

Hongwei has been refining TuneIn’s design system and component library over the past year to capture and easily distribute TuneIn’s components and color palettes. The design system also lays out the interaction patterns, what transitions to use, and how animation should be incorporated into product experiences. Like other design teams, he is constantly iterating on his design system, finding new ways to bring a little brand flavor into the experience. The ability for the entire design team to pull components from the design system library, while using repeat grid and the other collaborative features, has been key as content velocity has increased.

TuneIn also has a lot of different experiences, so using the above design system has been instrumental in maintaining brand consistency across many touchpoints. The audio experience lives within iOS, Android, and web environments in addition to partner environments. Meanwhile, TuneIn is pre-installed on Sonos and Amazon Alexa smart speakers and is also part of Tesla’s and other automobile manufacturers’ entertainment systems. That adds up to a lot of prototyping. Since the design system is accessible for all designers via XD, keeping experiences consistent despite TuneIn’s new all-remote workflow has been possible.

Adapting experiences for the changing ways consumers listen to content

COVID-19’s effects around the world have changed TuneIn users’ behavior. Although there is a break in live sporting events, the desire to stay connected to sports hasn’t gone away. Recognizing this, TuneIn features classic game replays, live sports radio, sports documentaries and podcasts from around the world. User experience elements, such as dashboards, need to focus on showcasing new types of content that would be equally of interest during this time Yuri is focusing heavily on onboarding flows and using them in TuneIn to learn more about the interests of listeners; the goal is to discover what they want to listen to and immediately curate content that is relevant to them.

“Now that we’re in this situation with COVID-19, we’re really looking closely to see how we can deliver the content that our users most want to listen to, quickly. It’s about delivering a balance of content that is not strictly about the pandemic, but a mix of content because listeners need breaks from the news,” said Yuri. Her analytics research showed top search terms, which previously would have been likely sports focused, have been replaced by popular news outlets; at the same time, music has remained a popular category.

Meanwhile, mobile app downloads are way up in several international markets. Yuri mobilized her UX team to focus more on personalizing experiences for these users with the above points in mind; since the pandemic began, TuneIn has begun curating content experience on their homepages based on the location where the user is accessing the app.

“We’re constantly evolving our product to become more personalized so that our users find what they want to listen to. Audio experiences that are similar or broad-based can enhance a user’s mood, provide intellectual stimulation, or just provide some means of mentally escaping self-isolation. These are important right now.” she said.

TuneIn's coronavirus coverage screens, prototyped in Adobe XD.

TuneIn’s coronavirus coverage screens, prototyped in Adobe XD.

Adjusting voice experiences as smart speaker usage peaks during the pandemic

Naturally, being a radio aggregator, TuneIn’s voice experiences on platforms like Amazon Alexa and Sonos have been a key focus for the company for some time. TuneIn has seen an explosion of growth in the number of people accessing its services on smart speakers from home. People are using their voice to search for news, especially from trusted local, national, and international sources, at levels the company hasn’t seen before.

Yuri and her team use Adobe XD’s voice prototyping features to design and iterate on TuneIn’s voice experiences. Since so many users are using voice features along with gesture and desktop experiences, at the same time, the UX team has had to constantly prototype across multiple platforms. Product designers are continually testing and discovering the voice commands/utterances people are using to access features, along with how those experiences translate across platforms.

Voice prototyping TuneIn dialog flow in Adobe XD.

Voice prototyping in Adobe XD.

Since voice interactions, and how they manifest in experiences, are constantly evolving, the TuneIn team is investing in building stronger relationships with voice platform providers at the same time. They’re currently working with the team at Apple to fine tune Siri interactions within the app. The team continues to face a key question when it comes to voice UX: do they create your own voice commands, within the TuneIn product experience, or continue to rely on Apple, Google, and Amazon’s language/utterances. For now, especially during these particularly challenging times, the UX team is doubling down on making sure TuneIn provides the best experiences possible using existing frameworks.

Constantly changing user circumstances demand nimble teams

“Our job is to always improve the experience and deliver what our listeners expect, while also helping them discover new things to listen to,” said Yuri. “And I think how we can do that is just connect them to that listening experience, and if we’ve done that, then we’ve succeeded.” With this goal in mind, to connect users with the third-party radio product they’re looking for, TuneIn needs to ensure that every interaction is seamless; every experience needs to be engaging while offering the ability to find new and desired listening content.

Promo banner for TuneIn's compatibility with various platforms and devices.

As the global coronavirus pandemic evolves, so do the ways TuneIn users access and consume their audio content. The UX team needs to be extremely nimble and sensitive to user wants and needs during these uncertain and trying times. Adobe XD allows TuneIn product teams to focus on designing, prototyping, and collaborating on these experiences, overcoming the challenges of designing for multiple platforms, input methods, and diverse localization needs.

Topics: Design, COVID-19

Products: Creative Cloud