Working on the paper prototype version of Roon App

Volume Panel Redesign

Roon Mobile App

Estimated read time: 12 minutes

Summary

Launched in 2015, Roon is a powerful music library management software & mobile App.

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

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

Project type: Music Library Management App
Industry: Music
Duration: 6 weeks

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

My Roles

  • Product Design Strategist
  • UX Researcher
  • UX Designer
  • UI Designer

What I did

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

Key Achievements

  • Conducted ten usability tests and interviews
  • Identified three blocking usability issues
  • Implementing a solution that respects the actual technical constraints (framework limitations)
  • (Re)Design for a niche market, keeping the brand consistency
  • Usability testings showed that the final design practically eliminated issues with the volume function
  • Presented thise case study to Enno Vendermeer, CEO and co-founder of Roon Labs

Overview

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 gathers any music files into the same visual platform, even if these files are stored in different devices. Users can listen to music on any connected speaker, such as Sonos.

Project overview

I focused my project on the mobile app. The app was also designed to be remote: the user can use it to control her audio equipment. 
I explored Roon app and defined issues to improve its user experience.

What is Roon? Roon is a music library management software able to manage a vast collection of music
Actual Screens of Roon app

Actual screens of the Volume Panel and Zoning functions

Challenges & Obstacles

How to (re)design for a niche market?

Even if this project was completed as part of a UC Berkeley Extension UX Design course, I conducted the researches as if Roon Labs were a new client.

The main challenge of this revamp project was to create a design solution without having access to Roon Labs' internal knowledge and tools.

The second challenge was its specific demographics: (re) designing some features for a niche market, audiophiles, that don't have the same expectations and needs as the general public. This challenge was one of the reasons why I chose Roon App for my semester project.

The third challenge was to implement a solution that respects the actual technical constraints (framework limitations). 

Business Analysis

Music industry trends

To better understand Roon's market, I started by taking a closer look at the current state and trends of the Music industry. According to the Music Consumer Insight Report published by the IPFI (International Federation of the Phonographic Industry),  44% of people purchase physical and digital music* CDs, Download and... Vinyl!

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

44% of consumers purchase music (CDs, download, vinyls)

Competitive Analysis

If 44% of consumers purchase off-line and online music, only a few solid audiophile publishers exist on the market. I added to my analysis Roon's indirect competitors: they target the general public, the quality of streamed files is not considered as real high-quality by audiophiles, but they do offer zoning options (AirPlay, Bluetooth.)

Competitive analysis -

Market analysis: a niche 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?

This analysis helped me to understand that Roon Labs targets a niche market for their products made up of two different profiles: 

  • Audiophiles 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: they manage audio files or sell Roon licenses when installing home audio equipment.
Roon targets the audiophile public. The company has few robust competitors and some high-end audio equipment partners

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.

🧐 The UX Audit helped me to find some issues and design the new solutions more thoroughly.

audit

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.

User Flow representing all the task a user has to do before being able to listen to music

UX Research

Questionnaires filled

Notes taken during the interviews and usability tests

Interviews & Usability tests

To rank these issues and define 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
Two main personas: Anthony the nerdiophile and Lisa the Professional

Usability tests

The usability tests showed how real users use Roon App. I didn't imagine that most users would have such difficulties adjusting the volume - as it is such basic and function. The top issues I heard were:

  • "My fingers are too big. I can't adjust the volume."

  • "I can't find the transfer button."

  • "I don't understand the difference between Transfer and Switch."

  • "There's no search result when I made a typo."

 

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

An impacting Accessibility issue 🚩

The buttons to adjust the volume are not “fat fingers friendly”: this is one reason why users have such difficulties adjusting the volume. The actual touch target area of the volume button Roon app is only 24 x 24 pixels when the comfortable minimum recommended by the Web Content Accessibility Guidelines (WCAG 2.1) is (at least) 44 x 44 pixels*.

* Understanding Success Criterion 2.5.5: Target Sizes, in Web Content Accessibility Guidelines (WCAG)
and Optimal Size and Spacing for Mobile Buttons, published by UX Movement, Feb 2019

bigfingers

“My fingers are too big. I can't adjust the volume.” 
— Anthony

Prioritizing issues

The usability tests revealed issues on two essential functions:

  • 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

🤯 Roon app acts as remote control app, and it's very annoying to find some critical issues on major functions!

Roon Paint Points

Wireframes

Low definition prototypes

First concepts and wireframes

Wireframes

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

Early wireframes

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

Is the "big button" possible? Technical constraints

Roon was developed with a framework (certainly Xamarin.) Before going further into the potentiometer design, I did some research 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 potentiometer rotation would trigger a slight vibration of the phone.

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

Ideations of volume panel

Is that "Big Button" possible? A Designer should always search or ask if a concept is technically possible to develop before going further in its design. 

Testing prototypes

Participants using the prototypes

Usability tests

Using Invision to create interactive prototypes, I organized a new round of six one-to-one usability tests with new participants. Some of them 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 themselves in the usuability test.

“A big button like on my old stereo!”

- Bin

Paint Points

  • Volume Panel

The main paint point was that participants didn’t expect that the mute button was close 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 but still didn't differentiate between these two functions.
 The paint points concerned the navigation. The transfer screens need to be simplified: "Transfer is transferring! No need for a confirmation message."

🧐 Ethnography: all different sizes of fingers had enough space to operate the tasks comfortably.

paintpoints2

Final Design Solutions

Iterations & final design solutions

After analyzing 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: Simplify the screen. Users can now switch directly from the bottom navigation and close the screen by tapping on the drop-down icon

  • Transfer: the screens have been simplified: the confirmation message once the song transferred to another zone was removed. I added the cover of the current track to make this panel visually more pleasant to use.

  • UX Writing: adding a sentence explaining what are Switch and Transfer options.

final_wireframes

High-Resolution Prototypes

This final step was a good opportunity to modify some original UI elements to improve the accessibility of the app:

  • Better Color-Contrast Ratio: I modified some UI elements to provide enough contrast between text and its background to optimize the readability (Criterion 1.4.3: Contrast Minimum)

  • Line height: I modified the line height of the body contents from 120% to 150%. This will improve the reading experience (Criterion 1.4.12: Text Spacing)

  • Target touch area:  I modified the target sizes to be large enough for users to activate them easily (Criterion: 2.5.5 Target Size). 

  • Fonts: I enlarged the size of some contents to improve the readability. I also replaced the Nato Sans Light for its regular version for the same reason (UX & Accessibility best practice.)

High Definition prototypes

Conclusion

Being an adventurous person, I contacted Roon Labs on Social Media to present this case study. 

I would never think that the Roon Lab's founder and CEO, Enno Vandermeer, would directly contact me. Enno had the generosity to open his busy schedule to meet with me. We spoke about my research, Roon Labs projects, and of course, about music. What an incredible and intense experience!

What would I do differently today?

If I had to work on this project again:

  • I would collect more various feedback and 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

According to an Adobe Study, 70% of Virtual Assistant owners ask it to listen to music. 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.) A Vocal Assistant would also be a great addition for accessibility.

 

Update 2021: Making Roon more accessible

Since the project, I've been specializing in accessibility. The big button was one solution to control the volume, but it might not be ideal for people that have tremors or can't use their hands. One solution I thought was to design a vertical slider to control the volume**.

  • Better accessibility: this gesture complies with the WCAG 2.0 (Web Content Accessibility Guidelines)
  • The gesture demands less cognitive effort (can be done with one hand)
  • It might be more adapted to older users and people who have less steady hands
  • Users with tunnel vision and both left and right-handed users can see the volume values without moving their head or eyes to the top of the screen
  • Easier to use when the phone is on a table or desk or while walking in the house compare to turn on or off the Big Button (based on informal usability tests made with friends)

* Study Finds Consumers Are Embracing Voice Services, Adobe Analytics, 2018 
** Slider Design: Rules of Thumb, Nielsen Norman Group, Sep 2015

A user with "big fingers" testing the vertical slider to control the volume. The size of the cursor is 60 x 60 pix - the tester was comfortable moving it easily with only one hand.

Contact me 📬

Whether you are looking for a Principal 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!

hello@stephanielesperance.com

“Accessibility allows us to tap into everyone’s potential.” – Debra Ruh


© 2021 Stéphanie Lespérance
  Email   |   LinkedIn   |   Twitter

Illustrations by Leni Kauffman   |   Icons by Eucalyp   |   Fonts by atipo foundry