4
Sonos
Overview
Sonos Radio offers not only a high-quality streaming platform but also design that facilitates listening effortlessly, endlessly.
Goal
Build a digital home for the Sonos Radio brand that showcases its premier offering as a discovery and listening platform devoted to expanding the experience and importance of music.
Role
User Experience Research
User Experience Design
Wireframing
Prototyping
User Experience Design
Wireframing
Prototyping
Team
Creative Direction: Mike Renaud
Designers: Adam Rodriguez, Becca Christman, and Collin Joyce
Developers: Camp Quiet
Producer: Kelly McHugh
Strategy: Jazz Robinson
Designers: Adam Rodriguez, Becca Christman, and Collin Joyce
Developers: Camp Quiet
Producer: Kelly McHugh
Strategy: Jazz Robinson
Tools
After Effects
Figma
Figjam
Photoshop
Illustrator
Figma
Figjam
Photoshop
Illustrator
Context
In 2020, Sonos unveiled their own robust radio offering to the world. They soon needed a website to showcase their diverse and comprehensive catalog, allowing users to discover and explore everything it offered.
My specific role on the team was to lead the UX/UI and present the approach to user flows, wireframes, and assisting with hi-fi design and prototyping.
My specific role on the team was to lead the UX/UI and present the approach to user flows, wireframes, and assisting with hi-fi design and prototyping.
Initial Research
Our initial integration with the Sonos team included an entire project audit based on needs and wants, surveying the current radio ecosystem, and learning what restrictions they had on their current systems. They released the Sonos Radio app in 2020,showcasing exclusive shows with artists, curated stations, and over 60,000 global broadcast stations.
The problem was that the Sonos app was only accessible if you had the hardware, leaving it a mystery to most. The radio guide was meant to be an extension of the app, allowing anyone to access via web browser. At the same time, it was to be exclusive and it's own entity, existing outside of the app and not pushing any updates.
The problem was that the Sonos app was only accessible if you had the hardware, leaving it a mystery to most. The radio guide was meant to be an extension of the app, allowing anyone to access via web browser. At the same time, it was to be exclusive and it's own entity, existing outside of the app and not pushing any updates.
Challenges
1
Parity between Apps
The radio guide was to be an external experience from the app, meaning we weren't updating the current app but instead creating a third party application via website. It was to be its own entity, but an extension of the current brand.
2
No Existing Data
Normally, I would do a UX audit on the existing Sonos app, however they do not collect any analytics or have any user data. With so much emphasis on discovery for the user experience, I turned to user personas and A/B testing to help steer the user flows.
3
Showcase Sonos HD
The existing app was free and only available if you had the Sonos equipment/speakers. Users could upgrade to Sonos Radio HD which featured ad-free listening, lossless audio, and access to exclusive stations. We had to keep this in mind for KPI's and driving users to upgrade.
Design Solutions
After the rapid research and current UX audit, I began to uncover more insights and identify and prioritize needs and wants.
Home
Primary avenue for discovery
Familiar user interface
Quick access to archive
Parity between apps and the site
Station Detail
Provide high-level info about station (ex: description, genre info, curator, featured artists)
Highlight benefit of subscribing to HD Radio + CTA for sign up
Collection Detail
Full list of stations that fall under collection including exclusive stations, genres, moods
Station linking and discovery for quick navigation and keeping engagement
Artist Detail
Primary purpose of artist pages are to show which stations they are featured in
Not to be used to educate users about the artist - all the emphasis on the station and platform
0.0
Home
1.0
Explore
2.0
Features
3.0
Search
4.0
Legal/Misc
1.1
Station Detail
1.2
Artist Detail
1.3
Collections
2.1
Sonos HD
2.2
News/Blog
Flows to consider:
A
How does a user learn about newstation releases/consumes them?
B
How does a user search and find a station related to their interests?
C
How does a user become a Sonos HD customer?
D
How does a user discover something unexpected?
E
What key functions do we keep from the existing app experience?
User Flow A
Discovering Curated/Featured Stations
User Flow B
Discovering Mood Stations
Initial Wireframes
With the user flows done, I began drafting some ideas with a predominant focus on discovery and organic exploration. We wanted to make sure the user could play and navigate to a collection on first arrival of the homepage, along with station detail. Sonos HD would be featured on the home page along with detail pages. The footer would remain the same as the official Sonos site store to allow ease of navigation between the radio guide and store version without any confusion.
Home
v1.0
Search
v1.0
Search
v2.0
Search Results
v1.0
Search Results
v2.0
+
Shows more information via each search (stations, genres)
+
Includes category results
+
Genre tagging allows further exploration
Creating the directory
Due to the size of the catalog, we had to figure out a way to visually archive news, sports, and talk from over 60,000 global broadcast stations. In doing so, we'd also have to be aware of the current app experience and weigh what features were vital to maintain parity between the two. After analyzing all of the Sonos station data we grouped the directory into categories and included a filtered sort with HD toggle access.
Each category contained subgenres which led the creation of our CMS tags, allowing us to filter and add/subtract. Some of the categories were brought in from the app such as Sleep & Environments, a new feature Sonos wanted featured, along with terrestrial which had local access to talk and sports radio.
Each category contained subgenres which led the creation of our CMS tags, allowing us to filter and add/subtract. Some of the categories were brought in from the app such as Sleep & Environments, a new feature Sonos wanted featured, along with terrestrial which had local access to talk and sports radio.
Creating the directory
Music > Genres
Explore Page
Explore - Genres
Show Detail
Station Detail
Setting the mood
We developed two directions—one that drew from Sonos' existing branding but punched up with more immersive user experience and vibrant, fun colorways, and a second, moodier direction that prioritized discovery to mimic the “record store” appeal. Both directions feature moments that engage users with fun interaction and styling.
Reflection
This was my first major role in a project at Varyer and it was a great introduction for working under high-level timelines with remote teams to deliver on a major product that launched successfully in 2022. I learned a lot of hands on user experience and thought process thinking - as well as brainstorming together as a team creatively under pressure. The radio website was submitted to AIGA Year in Design and was revealed as a winner earlier this year.
“The playlist generator is delightful with unexpected results—enjoyed the utility of discovering new music from normal routine listening. The content offerings feel purposeful and curated rather than overwhelming. Consistent visuals with the Sonos brand with a pop of color to make it a distinctive service.”
- Juror comments via AIGA
“The playlist generator is delightful with unexpected results—enjoyed the utility of discovering new music from normal routine listening. The content offerings feel purposeful and curated rather than overwhelming. Consistent visuals with the Sonos brand with a pop of color to make it a distinctive service.”
- Juror comments via AIGA