10 min read
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 deﬁned issues to improve its user experience.
Being an adventurous designer, I contacted to Roon Labs. The team has been so enthusiastic by the whole project that I had opportunity to meet personally Enno Vendermeer, CEO and co-founder.
Project type: Music Library Management App
This project was completed as part of a UC Berkeley Extension course.
What I did
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 ﬁles into a same visual platform, even if these ﬁles are stored in different devices. Users can listen to music on any connected speakers, such as Sonos.
I focused my project on the mobile app. The app was designed to be also use as a remote: the user can use it to control her audio equipment.
I explored Roon app and deﬁned issues to improve its user experience.
Actual screens of the Volume Panel and Zoning functions
Even if this project was completed as part of a UC Berkeley Extension UX Design course, I conducted the researches as if Roon Labs was 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 need that the general public. This challenge was one of the reason 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).
In order to better understand Roon's market, I started by taking a closer look on 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... 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
If 44% of consumers purchase off-line and on-line 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 (Air Play, Bluetooth.)
With only 44% of music consumers purchasing physical copies of music or paid downloads, few robust software editors are actually on the market.
This analysis helped me to understand that Roon Labs targets a niche market for their products made up of two different profiles:
To evaluate and identify problems, I ran:
🧐 The UX Audit helped me to find some issues and design the new solutions more 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.
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 function. The top issues I heard were:
Interviewing a Super User: he setted up a volume limitation as he can't adjust the volume using buttons and slide bar
The buttons to adjust the volume are not “fat fingers friendly”: this is one of the reason why users have such difficulties to adjust 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 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
The usability tests revealed issues on two essential functions:
🤯 Roon app also acts as remote control app, it's very annoying to find some issues on major functions!
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*.
If Roon had been a native iOS application, each rotation of the potentiometer would trigger a slight vibration of the phone.
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.
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 into the usuability test.
“A big button like on my old stereo!”
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.”
The participants selected the Switch and the Transfer buttons directly, but still don't get the difference between these two functions. 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:
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!
If I had to work on this project again:
According a 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 be also a great addition for the accessibility of Roon app.
Since the project, I grew as Designer and now I'm specializing into 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 designer a vertical slider to control the volume**.
* Study Finds Consumers Are Embracing Voice Services, Adobe Analytics, 2018
** Slider Design: Rules of Thumb, Nielsen Norman Group, sep 2015
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!
© 2020 Stephanie Lesperance | All Rights Reserved