Revel: the UX behind the habit of gratitude and building long-term momentum

Timeline

January - June 2021

Location

Vancouver, Canada (remote)

My Role

UI/UX Design & Research (solo)

Platform

Mobile

The Project

What is Revel: A Gratitude and Mood Tracking App? This project was inspired by the knock-on effects Covid-19 has had on people’s mental health. Since different countries and demographics have been impacted by Covid-19 with varying levels of intensity, different mental health solutions are required across the globe. This project is targeted for people who are seeking ways to improve their own self-care practises. Since mental health problems have worsened amid the pandemic, people need more support. The goal is to help people integrate and sustain a long-term gratitude practise through daily mood tracking and exercises tailored to promote self-reflection. This app is designed to accompany other methods of self-care to help people cultivate their ability to improve their mental health and become more resilient.

Step 1: UX Research

1 out of 5 Canadians suffer from symptoms of depression, anxiety, or PTSD. - Statistics Canada

Problem

The pandemic has worsened mental health problems across the globe and people need more support.

Solution: A Deep Dive into Gratitude

An article published on Harvard Health titled “Giving thanks can make you happier” discusses research conducted by a number of well-known psychologists, including Dr. Martin E. P. Seligman and Dr. Robert A. Emmons, about the effects gratitude can have on happiness. The findings conclude that gratitude breeds appreciation and can help people focus on what they do have in their lives rather than what they don’t have. Shifting this attitude takes practise and requires habit creation.

Recruiting The Right Users

Onboarding the right participants was crucial to learn firsthand about how the pandemic has impacted people's mental health. The research plan laid out the steps that were taken to find with the right people that have a connection with this project.

Understanding the Users

I recruited six participants who experienced general mental health problems during the pandemic and found that the changes prompted people to re-evaluate their priorities and values in life. The pandemic caused everyone to change their self-care practises. For people that were really struggling, they became open to new methods of self-care they never considered before. People are willing to adopt the right tools that make their life easier.

Users and Audience

• age range: 25-60
• going through a career transition
• struggle with common mental health disorders
• full-time responsibilities: full-time students and parents
• interest in self-care
• familiar with technology

User Interview

Empathy Map & Personas

Four out of the six participants lost their jobs during the pandemic. Each person used different combinations and forms of self-care, such as exercise, prayer, meditation, breathing exercises, positive affirmations, and gratitude. Three distinct characters emerged, however, and the one that was struggling the most became my primary persona.

Meet Leah

Leah was laid-off. She wants to build a stronger mindset because she is easily influenced by negativity. She fears self-expression and wants to develop her self-esteem.

How Might We Help Leah’s Mental Health?

The following “how might we…” questions reframe the project’s problem - the pandemic has worsened mental health problems across the globe - and incorporate our persona, Leah. These questions were asked throughout the project’s progression to ensure the right questions were being addressed.

• How might we provide space for Leah to become grateful?
• How might we help Leah become mindful of her emotions?
• How might we create a positive outlook for Leah so that she can always find the silver linings in life?

Step 2: Ideate

User Stories, Affnity Map, MVP

The user story process bridged the gap between the project’s problem with the functional needs to incorporate in the product. I cross referenced the user stories with the “how might we...” questions to see which ones fit the appropriate categories. The Minimum Viable Product (MVP) became: viewing life positively, understanding one’s mood, and prioritizing a daily practise.

•As a user I want to set the time to practise gratitude so that I can practise daily.
•As a user I want to be reminded to count my blessings so that I can view my life positively.
•As a user I want to track my mood so that I can have a better understanding of my frame of mind.

Site Map & User Flow

Revel Site Map gives an overview of how the pages will be prioritized and linked. The User Flow maps out the potential scenarios a user may take while moving through the app.

Red Routes

Taking into consideration what the Minimum Viable Product (MVP) requires, two red routes were identified: a daily gratitude exercise and a daily mood tracker.

Step 3: Study Design Principles

Competitor Analysis

I evaluated three highly-rated journaling apps to see what current products exist in the market. Using Nielsen Norman Group's 10 Usability Heuristics for User Interface Design, I assessed three principles for interaction design: Error Prevention, Recognition Rather Than Recall, and Aesthetic and Minimalist Design.

Weaknesses Discovered:
• Feature-laden apps can overwhelm the user.
• Some language is poorly chosen (not not widely recognizable or understood by most people)
• Variety of colours, texts, emojis creates a busy interface, causing overwhelm

Key Takeaways:
• Design for simplicity and provide appropriate feedback in a sophisticated way.
• Data presented needs to benefit the user.
• Design needs to feel clean.

Step 4: Design

The Evolution of the Design

A main discovery during my user interviews was that people have a difficult time overcoming their emotional blockages. This insight prompted a “Mood Filter” feature to help people become aware of their emotional patterns and identify the factors that contribute to their emotions.

Low Fidelity Usability Testing

Five rounds of remote usability were conducted on low fidelity wireframes to test for usability and uncover pain points within the designs red routes.

Main insight discovered during user research:

I began with the notion that the user would be in charge. After the usability test, I quickly learned confusion was felt because I was asking the user to do too much work which made navigation difficult rather than intuitive. The participants did not interpret the pages the way I assumed they would. I had to rethink everything.

Wireframes

Going through a cycle of re-assessing my design, I revised the wireframes multiple times.

Step 5: Create the Style Guide

I wanted the mood of this app to provide a feeling of relief and relaxation to support someone like Leah who is fearful and anxious. An earthy palette of yellow and green were chosen to set a calming tone to resemble nature. These colours were integrated into the wireframes to represent the brand.

Style Guide

Step 6: Usability Testing and Insights

I built the prototype using InVision and conducted two rounds of usability testing. Due to lockdown restrictions, all testing was conducted remotely. Despite the differing insights, interactions, and preferences, common pain points were felt. The overall design needed to be simplified and direct the user through the channel of my app more efficiently. It needed to narrow the user’s attention and do the work for them.

User Testing

The Usability Test

Severity Rating Scale:

Table from the Usability Evaluation:

Step 7: Reflection and Lessons

• While experimenting with different colours and shades, I learnt that colour combinations that look good are not always the most accommodating for people, especially when designing for accessibility.
• This app is meant to be an asset to someone’s life. The redesign needed to reduce navigation and help the user flow through the journey of the app in a guided fashion. The user should walk away from it feeling better and gain something after engagement.• The overall architecture of the app needs to operate as a coherent design system. This requires that each layer that makes up the foundation and structure of the app needs to be consistent. All functions with the same interactions and patterns need to follow the same design principles.

• Intentional design creates an experience that aligns with the purpose of the project while meeting user needs. The hierarchy of information needs to activate user engagement so they are willing to use this everyday.
• If I knew then what I know now, I would utilize sketching and learn from design guides that already have an established design system to save time.
• If I were carrying on with this project, I would use colour psychology to incorporate into the emojis and moods. The mood stats would look like visual auras to represent the user's mood through their representative colours.

Clickable Prototype