Stephanie Lesperance
UX Researcher

Roon Remote App

Redesign of volume and zoning panels to improve the user experience

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 - had some issues making it difficult to use. 

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

Project type: Mobile App  // Industry: Music 

My Role: 

  • UX Researcher
  • UX Designer

What I Did: 

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

I want to thank the Roon team and its community of users with whom I was in contact during this project.


Full case study
(8 min reading)

Actual screens of the Volume Panel and Zoning functions

Actual screens of the Volume Panel and Zoning functions

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.

Business Analysis

Music App: Volume & Zones Panel redesign

Understand 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

Music App: Volume & Zones Panel redesign

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 which is compatible with Roon's Technology. The typical user is part of the upper-middle class, and is certainly tech-savvy or got Roon's license from a Home Audio installer.

  • Music & audio professionals: organizing and manage audio files or sell licenses to clients when installing home audio equipment.

Music App: Volume & Zones Panel redesign

UX Audit + User Flow

Notes while working on the user flow

Notes while working on the 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.

I wrote out the core tasks that users needed to accomplish most often. These included listening to a song or an album, adjusting the volume, using the search engine to find an artist or song, and using zonings (transfer or switch.)

This process helped me to design for all use cases and scenarios thoroughly.

Task model: Play music

Task model: Play music

Research

Notes taken during the interviews and usability tests

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.

Music App: Volume & Zones Panel redesign

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

Small buttons, not too big fingers. It's never user's fault!

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."

Small buttons, not too big fingersIt's never user's fault.

Small buttons, not too big fingers

It's never user's fault.

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 misunderstanding
 this function

All first-time users
didn't understand the difference between "Transfer" and "Switch" functions
100%
had difficulties to adjust the volume
(as well as left-handed than right-handed)
75%
complained they couldn't adjust volume easily, showing frustration

Wireframes

First concepts and wireframes

First concepts and wireframes

Wireframes and low-fidelity prototypes

I initially sketched some ideas/concepts. This method allows rapid tests and ideations, like a brainstorming.


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" to adjust the volume, 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 usability tests 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

Volume panel: from the first idea to the

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

Technical constrain: Roon is based on a framework

Roon was developed with a framework (certainly Xamarin). Before going further into the design of the potentiometerI 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

Wireframes

  • The  Volume Panel was redesigned to be more comfortable and more pleasant to use.
  • Switch & Transfer functions were redesigned to be understood (icons labeled) and grouped into a dedicated navigation.

Music App: Volume & Zones Panel redesign

Testing prototypes

Music App: Volume & Zones Panel redesign

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 having the possibility to play music was a big challenge I didn't think of. It has been difficult for some participants to immerse into the test fully.

“A big button like on my old stereo!”

— Bin

Music App: Volume & Zones Panel redesign

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 hesitations.
 The paint points concerned the navigation.

Ethnography

All different size of fingers had enough space to operate the tasks comfortably.

Final Design Solutions

Modifying the user path for a faster access to Zones:.This modification offers consistency between the Roon App and its Desktop version

Modifying the user path for a faster access to Zones:.

This modification offers consistency between the Roon App and its Desktop version

Iterations and final design solutions

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

  • Modify the user flow: modify the bottom navigation to access faster to Switch and Transfert zones. Note that Roon desktop has an identical path; this modification offers more consistency between the two platforms.
  • Volume: adding a visual indicator for volume, adding the name current Zone (speaker), the mute button goes near the minus button
  • Switch: the user can now switch directly from the bottom navigation, and close the screen by taping on the drop-down icon
  • Transfer: the option to adjust the volume was removed, the cover of current track and information were adding to make this panel visually more pleasant. 

A full demo of the interactive prototypes can be watched below

Music App: Volume & Zones Panel redesign

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)

New iterations always bring powerful results!