CBS Radio

Listen to your favorite music, news, talk, sports, and podcasts online.

Competitive Analysis
Market Research
Data & Analytics
Product Development
Wireframing
Prototyping
Brand Identity
Mobile Design
Mobile Development
Web Design
Web Development

Overview

With an agenda to completely overhaul the radio.com user experience, business objectives had to align with user goals. This meant, a strategic implementation process had to be in place for new optimizations to thrive. With tens of millions of daily active users, it was crucial to put the them first.

Work Environment

The radio.com team consisted of 5 groups: System Ops, Engineering, QA Testing, Design, and Support.

We embarked on our two week sprints with a planning session identifying the highest priorities for each group. We set up strategic daily standup meeting, where we discussed our tasks for the day - and at the close of each sprint, prepared for the next fortnight.

My Role Within the Team
As the lead UX interface designer - I utilized a user-centered approach where I envisioned, analyzed, and helped implement the most effective and efficient ways for radio.com users to stream and listen to over 175 radio stations and over 350 podcasts for free - anytime, anywhere. My role to steer the team through the revamp of radio.com was in the order as follows:

  • Research
  • Design
  • Testing
  • Implementation
  • Measure

How do we figure out what users actually need?

User Research

Using research, the team recorded how users were currently navigating and interacting with radio.com. The results helped inform important design decisions and arrange the final architecture of the site which would then put into action a revision that would more accurately meet the user’s end goals.

Delving into problems that users face is the best way to build better products that provide value and growth.

Letting go of your assumptions and listening with an open mind is the only way you will succeed at making a truly innovative application. I live by that.

Research Process
  • Observe, interview and listen to users who come from a variety of backgrounds that brought different experiences within the product
    • Establish personas
    • Jot down user flows
    • Record feedback on product
  • Evaluate why users are behaving the way they are and accommodate it within the product requirements
  • Gather results and data from user research to help support evidence of new design decisions when presented to management and stakeholders

Throughout the research process we quickly revealed where problems came up and uncovered valuable information about our users, their behaviors, goals, motivations, and needs for using this product.

What did we find?

Immediate Changes
  • Too much information, users get lost in news and content
  • Station Directory hard to navigate
  • Designs were not responsive
  • Very slow load times
  • Navigating site lost audio streams
  • Need an engaging on-boarding experience
  • Search lacked rich results
Nice to haves
  • Seeing the station’s Play History
  • When certain radio personalities went ON AIR
  • More present Favorite’s list
  • Related Podcasts
  • Error pages lead nowhere
  • Explaining features like “Demand it”, “Alpha Stations”

Using the data gathered we quickly found which ideas were worth pursuing. With a list of user focused changes, it was time to consult with the engineering team to prioritize a feature list and find out what items we could successfully implement.

Devising a Plan

Ideas need criticism to thrive and engineers are the best / excellent critics. This all starts with communication. Conducting a brainstorm session was the perfect environment to lay out all the options and discuss what was feasible and what could be done within a sensible timeline. With their constructive feedback our good ideas became great and achievable ones.

Noting the team’s thoughts and ideas, I now had a solid foundation to explore UX and UI options to see what would be the best design solution - something our users actually want to use.

Design

Easy navigation was at the core of radio.com’s redesign. We focused on functionality and usability, rather than colors, textures, and fancy interactions.

It was understood that users were overwhelmed by too much information, finding specific stations was a difficult task, and the site did not have a responsive web design. We had to figure out a way to slim down the content and bring the listening experience up front and center.

Wireframing

Like blueprints for architects, wireframes represent the skeletal framework of a website. They are quickly executed to display different variations of content and information to best accomplish a particular purpose.

The results of user research are put into practice and these are visual representations of how the site might look like. Location of content, images, buttons, and other interactive elements are shifted around in order of importance to the user, their expectation, and end goals. The wireframes will help prep for a more detailed specifications in the form of a prototype.

Prototyping

The intent behind each feature really blossoms and becomes clear in the prototyping phase. Here we can fully explore and experiment with ideas, functionality, and usability of the site before development. Internally testing the prototypes, we saw how the designs worked together and fixed any inconsistencies and errors.

Desktop Prototype
Apple Watch Prototype

As soon as we had a good working demo, we put it in front of stakeholders to experience the interactions in real time, gather more feedback, and note any ideas for improvements. Changes in this phase can be made easily.

After the thumbs up, we could finally get it in front of potential users to validate our ideas and iterate based on how they experienced it.

Testing

Testing is another fundamental and core part of the UX process. Here, we see if any of the design changes we made held up to the standards of actual users. Our hard work is finally being put to the test! This phase eliminates any last second problems that couldn’t be found internally.

Before putting our prototype in front of real users, we came up with a solid test plan that would validate our designs and check off business objectives.

To start, we had potential users fill out a questionnaire which screened the candidates weeding out ineffective and biased participants. After the selection process, we had users perform explicit tasks and led them to give sincere feedback about the usability of our new designs. This ended with answering some follow up questions recapping their entire experience.

The goal for user testing was to:

  • Observe how users responded to product and jot down every action the user takes.
  • Listen to users talk through their thought process and actions as they make them.
  • Let users act and decide on their own and not influence their decisions.
  • Obtain true insight into what’s goin on in the user’s mind while using the product.

Once completed, we analyzed our findings, produced reports with the results, and presented a highlight reel to stakeholders and management. The viewing party gave a chance for the team to see how testing with real users uncovered a vast majority of usability problems and revealed the most valuable solutions, thus making a greater impact on the ensuing quality of the product. Now it’s time to implement the user’s recommendations.

Implementation

Working with dev team

The relationships across the team felt real and pragmatic. We were determined to launch a product our users wanted and without honesty, transparency, and hard work playing an integral role within the team it would not have happened.

Working shoulder-to-shoulder with the engineering team we strived to reach every sprint’s milestones. It was really cool to see the team hard at work transforming my designs ideas into a real, working application.

Below are examples of the OLD radio.com vs the NEW radio.com:

Player - Old
Player - New

Directory - Old
Directory - New

Subdirectory - Old
Subdirectory - New

Location - Old
Location - New

Where is CBS Radio today?

Today, CBS Radio has completed its merger with Entercom Communications (officially announced on Nov 17, 2017). The alliance makes it the No. 2 radio operator, with a total of 244 stations, in the United States. Entercom and radio.com continue to use the designs I created while I was at CBS Radio.

LET'S WORK TOGETHER


© 2018 Yoknee, LLC. All rights reserved.