SONOS App Case Study

I love my SONOS speakers. The sound is rich and fills the room nicely when paired with multiple speakers. The accompanying app is quite nice as well; the UI is clean and the onboarding/set up process was easy to follow. However, after using the app for a few weeks I noticed some areas that could be improved. This case study looks to improve the “My Sonos” (home) screen of the app by treating it as a music aggregator from all the user’s connected music service accounts, as well as simplifying the way a user manages their room settings with the app.

Research

I started the design process by mapping out the journey of a user browsing and selecting a song to play using the SONOS app. Through this exercise, pain points emerged from the home screen of the app and the browsing experience. First time users will see an empty home screen, even after they connect their music service accounts (Apple Music, Spotify, SoundCloud). To populate the home screen with songs and playlists, the user has to find the song/playlist they would like to add via the browse flow within the SONOS app. This leads to the next pain point: the browsing experience of finding a song/playlist within the SONOS app is different than what the user is accustomed to in their native music service app. Finding a song to play requires multiple decision points spanning multiple screens. How might we make "My Sonos" useful for the customer right when they connect their music service accounts?

Above: Current user journey of finding and playing a song

Next I went through the app and mapped out the user flow of adjusting my speaker settings for my room. A couple of pain points stood out during this process such as: room settings not a part of the "Room" screen, speaker settings hidden inside "Advanced Audio" and the option of removing a Sub or Surround speaker is separate from the rest of Sub and Surround settings. How might we make adjusting room and speaker settings quick and intuitive?

Above: Current flow of user adjusting their Room and Speaker settings within the SONOS app.

Solution

I decided to reimagine the home screen of the app as a music aggregator, that will pull data and automatically set up playlists and recommendations based on the user’s connected music service accounts. Once a user connects their music service accounts, they will no longer be greeted with an empty home screen that requires additional work to populate. Logo badges will inform the user where the song is connected from, and the layout is separated into 3 distinct patterns to keep scrolling visually interesting.

Within the Rooms tab, a user can view and adjust each room’s speaker settings by tapping on a defined room. Previously, tapping on a room will expand the music player tray and display which song is playing in the selected room. To me this wasn’t very helpful since the music player tray is already accessible at all times. From the room screen, the user can adjust universal room and speaker settings such as EQ, Room Name, TV Setup and Control etc. The top section of the room settings screen contains a diagram showing the speaker layout within the room. Tapping on a speaker within the diagram will open the speaker settings screen for the selected speaker. The option to remove a speaker is now found within speaker settings instead of room settings.

The new design brings instant value to the user via the automatically populated home screen, and the task of managing speaker settings within different rooms has been simplified from 8 screens originally to just 3 screens.

Interested in working together? Get in touch!

Email: richardli@richardlidesign.com
LinkedIn: linkedin.com/in/richardlidesign
Resume: view/download