Roon App
10 min read
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
What I did
Actual screens of the Volume Panel and Zoning functions
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.
I focused my project on the mobile app. I explored Roon and defined issues to improve its user experience.
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
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.)
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.
Roon targets a niche market of:
To evaluate and identify problems, I ran:
🧐 This UX Audit helped me to design for all use cases and scenarios thoroughly.
Notes while working on the user flow
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.
Notes taken during the interviews and 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.
My previous product analysis and research concluded with the development of a suite of two comprehensive user personas.
Interviewing a Super User: he set up a volume limitation as he can't adjust the volume using buttons and slide bar (UI issue)
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:
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
From those tests, I was able to prioritize a list of issues that users had with:
🤯 The usability tests revealed issues on main essential functions. Very annoying issues for a remote control app!
First concepts and 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.
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
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
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
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.”
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.
After analyzing the different feedback and observations, I made some iterations:
Second version of the prototypes (animated with Invision)
This project was the opportunity to work on an existing app and design some solutions to improve it through Research and User Tests.
If I had to work on this project again:
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
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!