Working on the paper prototype version of Roon App

Perfectea

A customizable timer App

10 min read

Summary

As tea amateur, friends often ask me about tea: what is the best tea for late afternoon? Is tea stronger than coffee? How long a green tea need to brew? During the 2020 pandemics, I worked on a personal project: an app that helps tea drinkers to prepare a perfect cup of tea: Perfectea.

Perfectea offers a customizable timer app to tea drinkers - from beginners to the most “enthousiasteas”. 

The challenge was to find a design solution that motivate tea-beginners to use the app. I used gamification to leverage people's natural desires of learning and mastering, using cute micro-interactions and quotes about tea.

Testing showed that participants were particulary receptive to the gamification of this app.


Project type: Food Ap
Industry: Music

This app is a personal project.

My Role

  • UX Researcher
  • UX Designer
  • Prototyper
  • UI Designer

What I did

  • Journey Map
  • Empathy Map
  • Persona Development
  • User Interviews
  • Usability testing
  • User Flow
  • Wireframes
  • Prototyping

UX Challenge

UX Challenge: how to motivate users to use a such app?

The challenge was to find a design solution that motivate tea-beginners to use the app. I used gamification* to leverage people's natural desires of learning and mastering, using cute micro-interactions and quotes about tea.

* What is Gamification? by the Interaction Design Foundation 

Album Artwork was fully part of an exiting experience for music fans

Illustration: Roon LLC

US Tea market

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

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

Competitive analysis -
Roon targets the audiophile public. The company has few robust competitors and some high-end audio equipment partners

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.

User Flow - low fi version

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.

Play music user flow

Research

Questionnaires filled

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
Two personas: Anthony the nerdiophile and Lisa the Professional

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. Furthermore, users with disabilities 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!

Paint Points

Wireframes

Low definition prototypes

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

Ideations of volume panel

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.
Wireframes of my final prototypes

Testing prototypes

Participants using the 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.

Paint Points

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.
Wireframes of my final prototypes

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


BE CURIOUS, HAVE A LOOK!

15 YEARS OF STRATEGIC THINKING

More projects I've delivered

More projects I've delivered

Why work with me


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