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 of the Sonos app controllers on iOS and Android.
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. I also did an independent internship project with future designs of touch points including wearable, mobile and hardware interaction that explores the possibility to improve time to music as well.
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
Beginner personaflowchart
Original Alarms page
After reviewing, I identify 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 a long running list the alarms overview page
  • Alarm plays sonos chime instead if the set playlist is shorter than the duration set
  • 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
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. Therefore, I was given an opportunity to look into the possibilities to improve users' time to music in about a year or two from 2017.
When I was working on the project, Sonos is preparing for the launch of their new smart speaker with voice control provided by Alexa. Therefore, the only way for users to control the content being played on the Sonos speaker is through the app controller. I did a task analysis trying to understand the number of steps needed for the task - listening to music on Sonos.
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
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. This varies based on the household's routine
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. The data I planned to utilize to inform the context are:
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 inform the context of 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
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.