Volume Panel Redesign

Roon App

Summary

Launched in 2015, Roon is a powerful music library management software & mobile App. The usability tests I run on the App showed that an essential function - controlling the volume - was labourious to use.

Testing showed that the final selected design practically eliminated the users difficulty to adjust the volume. 

The challenge of this revamp project was to create a design solution that aligns with Roon's emotional design without access to Roon Labs internal knowledge and tools.

Being an adventurous designer, I contacted to Roon Labs. The team has been so enthusiasted by my whole project that I had opportunity to meet personally Enno Vendermeer, CEO and co-founder.

Project type: Music Library Management App
Industry: Music

This project was completed as part of a UC Berkeley Extension course.

My Role

• Product Design Strategist
• UX Researcher
• UX Designer
• Prototyper

What I did

• Business Analysis
• Persona Development
• UX Audit
• User Interviews
• Usability testing
• User Flow
• Task models
• Wireframes
• Prototyping

Product Overview

Actual screens of the Volume Panel and Zoning functions

Roon - a powerful music library

Launched in 2015, Roon is a powerful music library management software & mobile app. It was designed as a surfable magazine about users' music.
Roon regroups any music files into a same visual platform, even if these files are stored in different devices. Users can listen to music on any connected speakers, as Sonos.

Project overview

I focused my project on the mobile app. I explored Roon and defined issues to improve its user experience.

UX Challenge

UX Challenge: How to (re)design for a niche market?

Roon cross-platform products are based on Emotional Design to increase their clients engagement. 

The challenge was to redesign the volume panel that focuses on finding new design solutions to fix functional issues and increase the User Experience.

Illustration: Roon LLC

Business Analysis

Understanding the Music Industry trends

Contrary to popular belief, 44% of people still purchase physical and digital music* CDs, Download and... Vinyls!

These 44% represent the largest audience that Roon LLC can target.

*Music Consumer Insight Report, published by IFPI (International Federation of the Phonographic Industry), in September 2017

Competitive Analysis

44% of internet users purchase off-line and on-line music, yet only a few solid audiophile publishers exist on the market. I added to the analysis the indirect competitors: they target the general public, the quality of streamed files is not considered as real high-quality by audiophiles but do offer zoning options (Air Play, Bluetooth.)

Market analysis

I ran a competitive analysis of Roon's market. With only 44% of music consumers purchasing physical copies of music or paid downloads, few robust software editors are actually on the market.

Who's ready to pay $499 for a lifetime license?

Roon targets a niche market of: 

•  Audiophile, owning high-end audio equipment compatible with Roon's Technology. The typical user is part of the upper-middle class, and is certainly tech-savvy.
  
  
• Music & audio professionals: manage audio files or sell Roon licenses when installing home audio equipment.

UX Audit + User Flow

UX Audit

To evaluate and identify problems, I ran:

•  A teardown to explore the product and
• Task models: I documented the flows of the experience I was working on.
  

🧐 This UX Audit helped me to design for all use cases and scenarios thoroughly.

Notes while working on the user flow

Task model - Listen to Music

I wrote out the core tasks that users do the most often. These included listening to music, adjusting the volume, using the search engine, and using zonings (transfer or switch.) This gave me a good overview of how the app screens were related and the opportunity to find a few features that I had missed in the teardown.

Research

Notes taken during the interviews and usability tests

Interviews & Usability tests

To rank these issues and define on which ones I should focus on, I conducted four 1-on-1 user interviews and usability studies, both in-person.

Persona Development

My previous product analysis and research concluded with the development of a suite of two comprehensive user personas.

• Anthony the Nerdiophile: he has a vast music collection, is a Tech Savvy, and already owns high-end audio equipment
• Lisa the Professional: she has a real interest in using Roon every day in her professional environment

Interviewing a Super User:  he set up a volume limitation as he can't adjust the volume using buttons and slide bar (UI issue)

Usability tests

The usability tests showed how real users use Roon App. I didn't imagine that most users would have such difficulties to adjust the volume - as it is such basic and common function.

The top issues I heard were:

• "My fingers are too big. I can't I can't adjust the volume."
• "I can't find the transfer button."
• "I don't understand the different between Transfer and Switch."
• "There's no search result when I  do a typo."

🚩 Red flag on accessibility

These tests showed the importance of following good design practices: the comfortable minimum size of tappable elements is at least 44 x 44 pixels*.

The actual volume tappable zone on Roon app is only 24 x 24 pixels - according to a study** the most preferred size is 60 x 60 pixels.

Not following design standards can lead to a poor user experience. In this case, not only users with disabilities but most users can't use this essential function.

* Understanding Success Criterion: Target Sizes, published by the Web Accessability Initiative (W3C) 

** Optimal Size and Spacing for Mobile Buttons, published by UX Movement, Feb 2019

Prioritizing issues

From those tests, I was able to prioritize a list of issues that users had with:

• The Volume Control Panel is difficult and unpleasant to use (participants expressed frustration)
• Zoning: its hierarchy of information and iconography are unclear (no labels), leading to misunderstand this function

🤯 The usability tests revealed issues on main essential functions. Very annoying issues for a remote control app!

Wireframes

First concepts and wireframes

Wireframes and low-fidelity prototypes

I initially sketched some ideas/concepts. This method allows rapid tests and ideations. I did my best to be respectful of Roon’s visual identity, and ensure the visual consistency between the existing app and my solutions.

Challenge: (re) design for a niche market

 On audio equipment, the volume can be adjusted with a potentiometer. I had then the idea to design a "Big Button", contrasting with the design of the actual user interface, to make the function easier (and fun) to use. 

 + Implementing a skeuomorphic element* might please Roon's nerdy-audiophile core users (reference: the Persona Anthony the Nerdiophile?)

🤗 Observing the reactions of the participants discovering and using this new element had been a particularly exciting part of this project!

*Skeuomorphic Design: Don't Apply It Blindly by Bruce "Tog" Tognazzini, Nielsen Norman Group

Is the "big button" possible? Technical constrains

Roon was developed with a framework (certainly Xamarin). Before going further into the design of the potentiometer, I did some researches confirming that leveraging HTML 5/JS/CSS3 should be possible to rotate an object*. 

Ideal recommendation

If Roon had been a native iOS application, each rotation of the potentiometer would trigger a slight vibration of the phone.

* Zingtouch, A JavaScript gesture detection library for the modern web

Volume panel: from the first idea to the "big button" concept

Early wireframes

• The Volume Panel was redesigned to be more comfortable and pleasant to use.
• Switch & Transfer functions have now labels and are regrouped into a dedicated navigation.
  Once a song has been swithed to another zone, a confirmation message appears.

Testing prototypes

Usability tests

Using Invision to create interactive prototypes, I organized a new round of usability tests with 6 participants (One-to-one usability tests). Some participants tried to turn up the volume button!

🧐 Testing a music app without the possibility to play music was a challenge I didn't think of. Some participants struggled to immerse into the usuability test.

“A big button like on my old stereo!”

Bin

Feedback & Paint Points

• Volume Panel

The main paint point was that participants didn’t expect that the mute button was near to the volume block, on the right top of the screen. “I would put the mute button next to the minus volume, not on the top.”

• Switch & Transfer zones

The participants selected the Switch and the Transfer buttons directly, with very few hesitation.
 The paint points concerned the navigation. The transfer screens need to be simplified. "Transfer is tranfer! No need of a confirmation message"

🧐 Ethnography - all different size of fingers had enough space to operate the tasks comfortably.

Final Design Solutions

Iterations & final design solutions

After analyzing the different feedback and observations, I made some iterations:

• User flow: modify the bottom navigation to access faster to Switch and Transfert zones.
• Volume: adding a visual indicator for volume, adding the name current Zone (speaker), the mute button goes near the minus button
• Switch: users can now switch directly from the bottom navigation, and close the screen by taping on the drop-down icon
• Transfer: the screens have been simplifed: the confirmation message once the song transferred to another zone was removed. I added the cover of current track to make this panel visually more pleasant to use.
  

Second version of the prototypes (animated with Invision)

Conclusion

This project was the opportunity to work on an existing app and design some solutions to improve it through Research and User Tests.

What would I do differently today?

If I had to work on this project again:

• To collect more various feedback, I would include in my researches 50% of Roon users (both early adopters and new users) and 50% of non-users
• I would go further while testing the prototypes by organizing an evaluative research: how users modify the volume when they use Roon at home? What is the position of the phone: on a table, in their hands? Do they use the big volume button? Who's using it, who's not?...

Adding a vocal assistant

Another possible lead: after conducting a Survey about implementing a Vocal Assistant to Roon. Designing a VUI (Voice User Interface) would be an exciting future project (the current version of Roon app doesn't support VAs.)

LET'S BUILD SOMETHING MAGIC TOGETHER

Send me a note

Whether you are looking for a seasoned Product Designer to add to your team or just curious to know more about this case study, reach out and tell me what's you're up to. 
I am always on the lookout for my next challenge!

© 2020 Stephanie Lesperance   |   All Rights Reserved

↺ send me back home