Be patient, good things take time :)

Internship @ Sonos
Improving music listening and IoT experience for 5 million households
00 Introduction
CollateralSonos iOS & Android App

TeamInteraction Experience (IX) team @ Sonos

My RoleUI & UX Design, Prototyping, Communications with developers and PM in AGILE environment

ToolsSketch, InVision, Framer, JIRA
Sonos is a wireless home sound system that can fill home with music, room by room. With years without major design update, the task time required for users to navigate within the app and get to play music in the desired room is still significantly long. There is room for improvement for UX design in the way users control their Sonos speaker.

My manager gave me a particular task to look into improve music scheduling on Sonos speakers, as some users expressed the want to schedule music on their Sonos speakers in advance.
A new app controller design is introduced and shipped to improve navigation as well as time to music with new UI & UX design of the iOS and Android app. On one hand I did a redesign of their Settings page to improve navigation experience. On the other hand I pushed for immediate improvement in Sonos UX with redesign the existing alarms page to improve existing scheduling experience.

I also focused on the task given by my manager and refine the problem statement after solid research. Then I proposed future designs of touch points including wearable, mobile and hardware interaction to solve the real problems users were facing.
01 Redesigning app controller
Beginner personaflowchart
Original Sonos app
Original state & Our task
The main way to control a Sonos speaker is with the Sonos controller app. The goal of this project was to improve the Sonos controller app focusing its navigation as well as time to music for Sonos users. The IX (Interaction experience) team did a heuristic evaluation of the previous version of the app, which remained the same for 3 years before the team came in. I joined the team and study the information architecture and usability issues of the previous app together. Some of the issues uncovered were:
  • Hamburger menu with a lot of menu items buried and hidden
  • Users' favorite music are all stored in the Sonos favorite page with a long running list in alphabetical order
  • Hamburger menu with a lot of menu items buried and hidden
  • Users' favorite music are all stored in the Sonos favorite page with a long running list in alphabetical order
The team came up with a new design to improve navigation and time to music with an updated information architecture in new tabs navigation design to simplify navigation. A new "My Sonos" tab is also introduced, which serves as the home tab for users with good organization of different favorite content.
Beginner personaflowchart
New Sonos controller app with tabs navigation design
As we studied the usability issues of the previous app, I came to discover a number of issues with Settings and Alarms (now moved under the more tab) . Users can easily feel lost in those two pages with yet-to-improve information architecture such as long running list, less frequently used items being placed on top of list...etc. I started redesigning those two pages.
Beginner personaflowchart
Original Settings page
After reviewing, I identify the following issues with the original Settings page:
  • Long list of settings items grouped together. It creates a heavier cognitive load for users to locate specific setting item
  • Less frequently used settings item (e.g. add new sonos player) is listed on top while the more frequently used ones are in the middle/bottom of the list
  • Some of the nomenclature (e.g. BRIDGE & BOOST) are confusing the new users
  • App settings takes users from Sonos app to iOS settings - users can be easily feel lost if they accidentally hit the system settings instead
Hoping to improve the usability of alarms, I redesigned the settings page with a main focus to reorganize the information architecture. I did some user research to help me to identify the best approach to do so. First, I worked with the data team at Sonos to obtain data regarding frequency of use of menu items in the settings page. Then, I invited 20 users to participate in a card sorting exercise to understand how can items be grouped better in a way that makes most sense to the majority of users. After research, I proposed a reorganization of the information architecture as the following:
Beginner personaflowchart
Comparison of IAs of original settings and redesigned settings page
Here are some of the screens from the updated design of Settings. Not only is the IA cleaned up with better organization supported by user data, the UI design is also updated to respect the new Sonos UI library pattern.
Beginner personaflowchartBeginner personaflowchart
Time to music is always a key metric for Sonos to identify usability and success - the faster the users can get to play music on their Sonos speakers, the sooner they can start enjoying the Sonos experience. They can immerse in their home which is being filled with their music. With the focus on improving time to music, my manager gave me me a task with the following prompt:

Users want to schedule music to be played on their Sonos speakers to improve their time to music but fail to do so. Design a solution to address that.

I started looking into the area of music scheduling. As I reviewed research done by researchers at Sonos and conducted 5 contextual inquiries myself, I realized the alarms page has been used by Sonos users as a "hack" to schedule music. Yet there are a number of issues in the existing design creating frustrations in use. Therefore, I decided to focus on improving the alarms experience first to make sure existing users using the alarms for scheduling can have a better experience immediately.
Beginner personaflowchart
Original Alarms page
After reviewing and completing heuristic evaluation, I identified the following issues with the original Alarms page:
  • Requiring users to take extra steps to achieve basic tasks (e.g. Switch on/off; Change time)
  • IA - Functions such as duration/group rooms/shuffle playlist are hidden within advanced
  • Inconsistency in functional & UI design across different platforms
  • Difficult for users to identify multiple alarms set in the alarms overview page
  • Selection of music is inconsistent with the existing Sonos music selection paradigm
  • Hard to use it as an actual alarm. Lack of immediate dismiss and snooze
Hoping to improve the usability of alarms, I redesigned the alarms page as following:
Beginner personaflowchartBeginner personaflowchart
Overview of the redesigned alarms page on iOS and Android
Here are the quick overviews of the design:
  • Instant access to alarms toggle and time picker
  • Reorganized IA and order of item providing faster access to features
  • Better room and music selection updated to stay consistent with new app design
  • Introducing labels to alarm for users to recognize alarm in list in an instant
  • Polished UI to ensure it stays consistent with Sonos UI library pattern
  • Introducing notification of alarm for users to snooze/dismiss alarm immediately
Not only does the new design improves IA as well as UI design of the alarms page, it also improves the UX by providing an actual alarm experience with notification for users to dismiss/snooze the alarms immediately. Together, the redesign of Settings and Alarms provide a better and more consistent user experience for Sonos users.
02 Independent Project
As I was given the task to solve the problem of "improve music scheduling for Sonos users as they are struggling with it", I wanted to see what I can do other than improving the alarms to improve music scheduling experience for users immediately. Therefore, I decided to take a deep dive into understanding how are users using Sonos and what are the pain points they are struggling with.
When I was working on the project, the only way for users to control the content being played on the Sonos speaker was through the app controller. I did a contextual inquiry with 5 users trying to understand the number of steps needed for the task - listening to music on Sonos and the pain points users are encountering. I then synthesized the findings from my own research as well as other previous research findings from other team members from Sonos into personas so that I can understand the goals and frustrations of the Sonos users better.
Personas & Task Analysis
One major discovery at this stage was that users were not really struggling with music scheduling, as some of them find alarms as a hack to schedule music in advance (but some usability issues of alarms were also uncovered at this stage, leading to the redesign of the alarms shown in the previous section). Rather, their main struggle was with the number of steps it requires to play music on Sonos speaker when they want music as well as the difficulty in selecting appropriate music to support a particular moment/activity happening at home. This can be informed by a breakdown of the task analysis below:
Beginner personaflowchart
A task analysis of Sonos' users path to music
While Sonos brand the Sonos experience as something as simple as "Pick a Song, Pick a Room, Hit Play", it is actually not as easy and simple as it sounds. It requires multiple steps for users from recognizing the need to play music to actually finding the content they want and play the music on a Sonos speaker.

In order to empathize with the users and understand their needs better, I used qualitative data provided by researchers at Sonos to form the following personas and identify the key users' need.
Users' needs
Both qualitative data and quantitative data both suggest what the users really need is faster access to their favorite music. With the research result, I was able to refine the problem statement from "how to improve music scheduling" to "How to provide users with easier and faster access to their favorite music when they need/want music". I highlighted 3 key needs in the process:
Convenience in Control
Users need to be able to find their favorite/appropriate music and play it on Sonos speaker with ease
Efficiency in Control
Controlling Sonos speaker and playing music on it should be faster, so that the time to music is not long for users
Supporting routines
Different music/audio content is needed by users at different time of the day to support different moment/activity in a household
The Context (Foundation of the design)
With the needs identified, I began the design stage. As I was given the opportunity to explore ideas that can be adopted by Sonos in a year or two from 2017, I explored various directions and possibilities. Ultimately I explored designs that can utilize more data sets obtained from different ways to inform the context, which can lead to anticipatory design to reduce cognitive load for users hence create a better experience. The data I planned to utilize to inform the context include:
Current time and dates
The room or area the Sonos speaker is placed in/the user is closest to
The user listening to the music (Utilizing profiles)
Sessions of music being played on Sonos
By using these few sets of data, we can tell what kind of music is needed by users in a certain area at a certain time of the day easily.

As users are easily overwhelmed with the choices available, an experience designed to anticipate when and what the users want can help to minimize the cognitive load for users. Therefore, the design aims to detect potential audio moment - moment where music is needed. With the audio moment detect, we can provide users with a few sessions of their favorite music.
Design - Overview
Beginner personaflowchart
A mock up of how does Sonos Snap work
Beginner personaflowchart
Sonos Snap - notification based on audio moment detection
The design proposed is called Sonos Snap. It is a design that covers touch points including wearable, smartphone apps and hardware interaction. By detecting the moment users is connected to the Sonos system/activity from users as well as potential integration with Calendar, it detects audio moment when users need music in the background (e.g. the moment user is connected to the Sonos system after a long time of inactivity can represent a coming back home moment). With the moment detected, Sonos Snap can prompt user with a notification and invite users to select a favorite music session out of 5 suggested ones (suggestion is based on users' history - the when, where, who and what). Here is a storyboard illustrating how does it work:
Beginner personaflowchart
Design - Prototype
Sonos Snap - Prototype
I focused on designing and prototyping the wearable experience, as it is one of the most convenient touch point for users to be reminded of the audio moment detected and take quick action afterwards. At the same time, I pictured how can this be applied across various controls Sonos is currently providing:
Beginner personaflowchart
With this new experience designed, it is anticipated that the number of steps required for users to complete the task to play music on Sonos speaker will be drastically reduced as the diagram illustrated as below. It is expected that the ease of use, the satisfaction of use as well as time to music will be improved for users, and ultimately creates an even better Sonos experience for users.
Beginner personaflowchart
Measuring success
With the limited time I had, I was not able to test out the design. However, I did leave the design with the researchers and identified key metrics to inform the success of this design:
Task time
The task time for users to play music on Sonos speaker should reduce with the new design
The ease of use should be improved hence there should be an improvement in SUS score
Customers will be more satisfied with their Sonos experience and will be more willing to promote it
03 Takeaways
I have learnt a lot from this internship. Here are some of the key takeaways

1. Defining MVP and communication with other stakeholders

This is the first time I work in cross functional team setting. It is definitely exciting to have a lot of other team members to help to realize the designs and make the product even better. At the same time, it also taught me an important lesson to communicate with other stakeholders thoroughly so that we can prioritize designs and define MVPs to be shipped for users.

2. Iterate fast - kill your darlings

Working in sprints is definitely exciting. Seeing your designs come in live and available for testing within two weeks is great, because it gives designers and the product team an opportunity to learn from mistakes fast as well. With problems identify early, we can iterate fast. Sometimes it means killing some of your dearest ideas, but it is important to be adaptable and flexible at this stage to make sure the design works best for our users.

3. Data driven design decision

When in doubt, use data to help make a decision! Quantitative data (users stats, SUS) and qualitative data (usability testing results) are all really helpful in helping to identify what is the best design decision to be made for our users, as they are data obtained from users.