Onboarding and Dashboard Design for a Journaling Focused Wellness App

Project Summary

I created a wellness app focused on journaling as the main feature after the results of my research suggested that a percentage of people find relief in writing down their thoughts to process them more effectively.

Backbone’s unique value is the mood-tracking feature that users can cross-reference with journal entries, providing deeper introspection.

My Role

I was the only UX/UI Designer throughout the project cycle, from planning and meeting project requirements to collecting and synthesizing user data, wireframing, designing the product’s features, and prototyping.

The Challenge

About 80% of the users I interviewed felt confident in self-managing their stress levels. Due to this finding, I wanted to design a product to empower people by digging deeper into the context of their moods.

Solution

I created the onboarding flow for setting goals and expectations, a mood-tracking dashboard to visualize data, and a journaling feature with prompts to guide users. I also designed activity-tracking features to incentivize users to track their moods.

For the journaling flow, the goal was to meet the needs of the goals set during onboarding, such as journaling for gratitude or self-discovery. I created different paths for different journaling needs, such as blank and guided journaling. To assist users in their wellness journey, they can share their journal entries with their wellness coach.

Project Scope

Design a wellness app targeting the stress-relief category

Client

The National Wellness Institute

Tools

Figma

Project Duration

4 Weeks

Research Findings

The Stress Relief Market and Backbone’s Value Proposition

To better understand the landscape of stress management products, I analyzed four of the most popular stress relief apps and hyperfocused on two of them, Shine and Sanvello. I wanted to learn what features were popular in the stress relief market and what areas my product could innovate.

I was surprised to find the market was split into behavioral therapy-backed products— like Sanvello, and lifestyle-based products— like Shine. Due to stress and anxiety being health conditions, the behavioral therapy-backed products used their expert-backed programs as their value proposition, while lifestyle-focused products relied heavily on self-care and the benefits of a wellness routine.

Analyzing Backbone’s competitors.

Behavioral therapy-backed apps like Sanvello and Calm (not pictured) provided heavier data reporting, while the lifestyle-focused Shine and Happify (not pictured) did not.

This insight helped me recognize Backbone could maximize its value by providing data reporting through the mood-tracking feature. I also noticed that 1/4 apps had a journaling feature, while only 3/4 apps had a mood-tracking feature.

Who is Backbone For?

According to a 2018 study, journaling , specifically “positive affect journaling (PAJ), an emotion-focused self-regulation intervention” can be an effective tool to reduce stress and decrease symptoms of anxiety and depression.

I researched the goals and motivations of people who might engage in constant introspection. Specifically how stress impacts them, and what tools they use to manage it.

The users were between the ages of 28 and 42. 4 out of 5 users stated their personal life was their biggest source of stress. 100% of users shared a positive outlook on their ability to manage stress and overcome adversity, which helped me realize empowering users could be a goal for the journaling feature.

Themes & Insights

Discovering the Backbone User

I created a user persona to put all the insights I gathered from the user interviews into the profile of a potential Backbone user. This tool helped me understand how someone looking to manage their stress levels might use my product.

As I gathered more data on what helps people self-regulate their stress, I brainstormed some features using my user persona’s goals and pain points. One of the biggest goals for my user persona was to have a safe space to express their thoughts and practice self-reflection, which I then used to brainstorm some guided journaling prompts.

Mapping the User Journey

I created a User Journey Map to understand how a user like Laura might discover Backbone. This map helped me brainstorm for the onboarding questions as they were inspired by some of the goals and pain points of my user persona.

Defining the MVP

Creating the Information Architecture

I created a site map of Backbone to organize the information architecture and strategically place screens and content where users would need it the most.

Site Map

Although I wasn’t able to design all the screens in my site map, I know now where to focus my efforts on the prototype.

User Flow Chart

Guiding users through setting the prototype by setting goals, tracking their mood, writing their first journal entry, and sharing their results with their wellness coaching

Designing Backbone

Low Fidelity Wireframes

Once the user flow chart was done, I began sketching the Low Fidelity Wireframes starting with the onboarding flow and data dashboard. Then, I tested my wireframes with the same set of users I had previously interviewed. I received the following feedback:

• Include clear instructions for each onboarding step.

• Remove some of the demographic questions, as users shared they felt redundant.

Mid Fidelity Wireframes

I designed the Mid Fidelity Wireframes by focusing on the visual functionality of the features I had brainstormed. Then, I created components to communicate the stress-relief goals in my problem statement visually. While designing the wireframes, I kept referencing the MVP , User Flow and Site Map to stay focused.

I tested the Mid-Fidelity Wireframes with the same users and received the following feedback, which I later added to the next iteration:

• Increase the font size.

• Include instructions for how to read the data dashboard.

• Maintain the seamless onboarding experience

Mood Board

I created a mood board to start brainstorming the aesthetic of Backbone. Visually, I kept thinking about crystals, specifically Amethyst, which is believed to help reduce stress and anxiety. I also drew inspiration from paintings of pearls and sculptures and used the calming nature of spheres as a starting point for creating the logo.

UI Kit

I created a UI Kit to keep all the components in one place. For the typography, I wanted a modern yet warm font, so I went with Be Vietnam for the body text and Quicksand for the titles. Then, I created a background gradient incorporating the brand's colors. I created the onboarding and dashboard components by focusing on maintaining consistency throughout the use of the branding colors and keeping some elements light and fun for the target demographic.

High Fidelity Wireframes

Version 1.0 of the original wireframes, dating back to late 2022.

Version 2.0 of the wireframes, with an improved onboarding flow and prototype animations. Completed by the fall of 2024.

Prototype & Reflections

Prototype

Learnings

This was my first solo project as a UX/UI Designer and my first time focusing on a mobile-only project.

I enjoyed the experience of researching the stress-relief market and found tools like Lean UX to be crucial to help me narrow down why my ideas and focus on the value I could bring to users and the market.

My biggest challenge was designing the data dashboard, as my biggest goal was to have it feel intuitive enough for users to log and see their data constantly.

Next Steps

I would have loved more time to develop some additional features for Backbone. I drafted a feature called Happy Corner, which I envisioned as a hub for users to upload pictures that make them feel happy (think dog pictures and sunsets at the beach)

I would have also liked to incorporate a custom category for the mood-tracking feature, as it would add value for our users wanting to track a broader range of categories than the ones provided.

In addition, I would have liked to include face-id for opening the app and password protection for journal entries. I want users to feel empowered to be vulnerable, but the missing layer of privacy might prevent them from fully expressing themselves.

Overall, I had a lot of fun creating Backbone, as I had the opportunity to put all my creativity into a product I felt could be essential to many people. I learned a lot of lessons from this project, and look forward to improving the prototype as time goes on.