A customizable timer App
10 min read
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
This app is a personal project.
What I did
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
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
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. Furthermore, users with disabilities can't use this essential function.
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*.
If Roon had been a native iOS application, each rotation of the potentiometer would trigger a slight vibration of the phone.
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!”
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!
© 2020 Stephanie Lesperance | All Rights Reserved