A place to reflect and gain a deep, guided understanding of your feelings
Client: Vibes
Sector: Mental Wellness
My Role: UX Researcher
Project Time: 2 weeks
Tools Used: Figma, Google Forms, Miro
OVERVIEW
Studies have shown that when people take the time to label their emotions and express them in words, they are able to respond to their feelings less reactively and more responsively. Labeling emotions reduces the brain’s “fight or flight” amygdala response, thus improving mental wellbeing.
Vibes is a mental wellness platform that helps people break down their feelings, analyze them over time, and build a greater sense of self-awareness in a completely private space. Users “express themselves” through a quick questionnaire where they indicate the current sources of joy and stress in their lives, then the Vibes algorithm provides a word to describe their emotional state. As users express themselves over time, Vibes helps them spot trends in their mood and recommends small daily actions to practice mindfulness.
Problem
Problem
The sources of joy and stress on Vibes’ “express yourself” quiz only have text associated with them. Text without visuals can be difficult for people to fully understand, especially children and people with English as their second language.
How might we increase comprehension of various sources of joy and stress in Vibes’ “express yourself”quiz?
Solution
-
Design and validate a set of icons to accompany the sources of joy and stress in Vibes’ “express yourself” quiz.
-
Assist all users in understanding the meaning of each source of joy or stress.
-
Add an element of delight to the UI/UX of Vibes.
-
Make the UI more flexible (for instances where there is not enough space to add a text label, an icon can suffice).
PROCESS
DISCOVER
Competitive Analysis
My client mentioned a similar competitor application that uses icons to describe various emotions and tasks. Before beginning research, I decided to conduct a quick competitive analysis of this app to understand areas that can be improved and set Vibes’ UI design apart. The main areas of improvement are summarized below:
.png)
Secondary Research
Before beginning the design process, I wanted to better understand current research around icons and whether there is a standard benchmark to indicate interface icon recognizability. Some key findings:
-
All humans develop the ability to recognize and interpret icons/symbols before they develop language skills
-
Outline icons are the most versatile and recognizable at small sizes (as long as the line is thin enough to show detail)
-
Icon recognizability leverages the prototype theory of cognitive psychology; there is a graded degree of belonging to a conceptual category, and some members are more central than others. For example, when you hear “bird,” the first thing that comes to mind is probably something like a robbin or a pigeon - a chicken is also a bird, but it is not the most “bird-like” according to our brain’s prototype of “bird” (prototypes vary across languages and cultures)
-
Previous studies have indicated that an icon is generally successful if it can be recognized 60% or more of the time
DESIGN
Once I understood the best practices for icon design and recognizability testing, I collaborated with a UI designer to create a uniform set of icons to represent 22 of the sources of joy and stress on Vibes:
TEST & DELIVER
To test the recognizability of our icon set, I created a simple google form to send to all current and prospective Vibes users. This survey introduced Vibes and the study, then asked users to identify which category they thought that each icon represented. Because the survey was (purposely) open-ended, we got some pretty entertaining answers…
Data Synthesis
To synthesize our data, I added up the number of correct responses for each icon and divided them by the total survey responses (27) in order to assign each an Icon Recognizability Rate (IRR).
After calculating the IRR for each icon, I compiled all the results in a table to allow stakeholders to easily scan and understand the study results:
.png)
Recommendation of Improvement
When presenting my findings to Vibes stakeholders, I also included recommendations for replacement icons for mediocre and vague icons with an IRR below 60%. NOTE: These icons are simply suggestions, and the weight/styling of some will need to be modified in order to coincide with the current icon set.
NEXT STEPS
-
Vibes stakeholders agreed to immediately implement all identifiable icons.
-
Out of the mediocre and vague icons, stakeholders decided that the next step will be to focus only on replacing the icons for sickness/pain, home upkeep, and work - these sources of joy and stress are the most commonly used in Vibes.
-
Vibes’ UI designer will be using my recommendations to create new icons for sickness/pain, home upkeep, and work consistent in style with the original set.
LESSONS LEARNED
-
Don’t reinvent the wheel: a wealth of information about human cognition and the evolution of digital icons is available online, which I leaned upon heavily for this study. When conducting UX research, existing research can provide you with valuable insight into your problem space and best practices to recreate.
-
Icon design decisions should take a wide-ranging audience into account: just because an icon aligns with my prototype for a category, does not mean that it aligns with that of my users! It is important to thoroughly research commonly used icons for various things, then take a big-picture view of all of the possible meanings that people can assign to it before making a final decision.
-
Cast a wide net, then let the data guide you: the survey sent out to Vibes current and prospective users was intentionally open-ended. I was curious to know how users would label icons without being given options. This led to answers varying widely, but also inadvertently gave me a unique perspective into the minds of my users and allowed me to provide tailored recommendations for future research.