Cisco Sunkist mobile app design

Companion app for a headset in development

ABOUT THE PROJECT

Cisco is trying to expand its audio equipment product line with the new headset "Sunkist". Sunkist headset is built on top of their first generation office use headset, but has a more consumer feel and more functionalities.
The vision is that the end user of the headset do not only use it in the office for meeting calls, but also for entertainment at home, during travel, etc.
I was brought to the team to help design the companion app for the headset.

MY ROLE

UI/UX and motion design

Team

Industrial designers, interaction designer, sound engineer, ux researcher

TIMELINE

Jan to Feb 2019

Understanding the users

The project team worked with a UX researcher to first understand who the users are by carrying out user interviews.
Our target users are not necessarily super into customizing sound quality.
Instead, she relies heavily on default settings to provide the best experience.

Persona
Current usage of office headset
Brands that people use

Define app usage

Together with stakeholders, we made the hypothesis around major usage of the headset companion app.
This assumption matches well with user interviews findings via user research later. Since initial setup is really important, we want to make sure the experience for on-boarding is optimized.

Initial setup
85%

Go through tutorials, set up bluetooth pairings with a streaming device, etc

Troubleshoot
5%

When user don't know why something goes wrong, or how to perform an action.

Modify settings
5%

Power users might want to go in and change settings like notification methods, noise cancelation level, different EQ modes, etc.

Perform updates
5%

Firmware updates to make the sound quality better.

Initial setup User flow

Making the Initial Setup User flow less energy consuming.

The approach we took was,
1. Only include essential steps in the tutorial
2. Allow skip action for all tutorials
3. Make tutorials interactive by having moving graphics and real time sensor detection
4. Default selections to make it less time consuming
5. Allow selection of EQ mode but save the Custom feature for advanced users at later stage

Site map after redesign
Animated instructions to spark engagement.

Information architecture design

Card sorting

In parallel with designing the on-boarding flows, I spent whole day mapping out the content and controls we got from PM and try to group them with card sorting activity.
This helped me gain a basic understanding of what's in the system and their relationship to each other. We also showed this grouping to other team members to get alignment.

If we had more time, we would test the groupings with real users.

Homepage

One of my personal focus was the homepage. The approach with homepage design was, while making a visual impact with big imagery, we wanted to enable users to quickly access a key feature --EQ switching. We also want to keep users aware of key info like battery life, updates available, and bluetooth connections.
Based on our assumption that people seldom utilize settings, we decided to not showing all setting categories upfront.

Visual design iteration

"Cisco Balls" is a continuing brand language, it also indicates that the headset is immersed in this selected EQ mode.
Different layouts were explored before we arrive at the final design.

Final visual design

We want to show a simple, lightweight, delightful experience using this app.
Iconography and colors were used to indicate different EQ modes (Blue-Voice, Yellow-Music, Purple, Cinema).
Dark grey is used as accents to draw user attention and also balance out the weight of the screen.

Adding a personal touch by introducing micro-interactions

Homepage EQ mode switching

Loading transition

Homepage to child pages transition

Update Modal transition

Design Equalizer Settings for office workers

Because I didn't have the domain knowledge of EQ settings, I went out and did some market research on apps that include EQ setting feature. If we expose all the EQ settings in front of our users, user would be overloaded with information and don't know where to start. We want to simplify it so that it's most useful to average users who're interested in changing EQ settings quickly.
This diagram is based on my personal audit, if I have more time, I'd like to perform more user interviews to validate it.

The exploration of customizing equalizer settings

By talking to sound engineers and immersing myself in desktop research on how EQ is traditionally configured, I've developed a better grasp of the EQ concept and started conception. A couple different ideas were explored, and showed in front of the team. In the end, we decided to go with the third option. Our hypothesis is that people who want to come here to adjust EQ settings are the group who already know a bit about it.

The outcome/Closing thoughts

The project team continued to do some user testing around app usage and general expectation on the headset. Our initial assumption of app usage matches with the research findings. Overall, the medium rating for the app experience is 5/7(sample size = 10). 90% were satisfied with 3 EQ modes to choose from during on-boarding.

Findings for on-boarding:
People don't know what ANC/Listen-in stands for.
The participants actually prefer to do an extensive all-rounded configuration and get it done with.  
Findings for homepage:
Participants find it not seamless to switch connecting devices–which is a core task that user expected to perform using the app.
The downward icon gives out a wrong visual cue to renaming.

Though I'm currently no longer in the project, I'm sure this app will continue to evolve and let's stay tuned for its release.