Sprout

A mobile web portal aimed at improving mental health and well-being through goal setting, habit tracking, and professionally curated educational resources.

The Project

Acknowledging our physical needs is generally intuitive, but when it comes to recognizing our mental health needs, those may not be as cut and dry. Sprout is a project designed for those dipping their toes into beginning their mental health journey. By utilizing research-based goal setting strategies to build self-care habits, this project aims to promote mental health awareness in accessible and digestible ways.

Role

UX/UI Designer

Timeframe

4 months

Tools

Figma, Usability Hub, Optimal Sort, Google Forms

OVERVIEW

When life gets busy, it's easy to put yourself last and push aside your current self-care practices. Sometimes just knowing where to start in your self-care journey can be daunting, and many questions can arise...

Where can we go to find the support we need? What happens when traditional therapy isn't an option? How do we know if we're making progress? Will my information be safe and secure?

RESEARCH & EMPATHY

With the problem identified, I wanted to know what was already out there. I performed a competitive analysis to explore the existing solutions. I started logging my moods, tracking my self-care habits, setting mental health goals, and journaling across several apps and portals. In doing so, I identified strengths and weaknesses, and based on these insights, I determined market opportunities.

Problem

Health-conscious individuals need support in creating and maintaining daily habits to promote mental health. For those who may require additional support, connections to licensed professionals will be beneficial for continued success.

Solution

By creating a platform that offers structured goal setting and habit tracking, educational resources, and the ability to search for and schedule an appointment with a licensed therapist, users at all stages of their mental health journey will be supported.

Overall Strengths

Efficient mood tracking with word banks (time is already of the essence!)

Educational materials
Data and analytics
Direct, in-portal connections to therapists

Overall Weaknesses

Limited functionality for free versions
Lack of customization
Inefficient goal setting and habit logging
Confusing information architecture

Opportunities

Educational resources catered to user goals and needs as well as options to save resources to access offline
Guided goal setting support when entering the platform as a new user
A gamified approach to tracking growth

Summary of strengths, weaknesses, and opportunties from competitive analysis

To deepen my understanding of the overall market, I then identified the target users and sought their help. I recruited licensed therapists and individuals who actively work to maintain self-care habits and conducted a series of user interviews with the following goals in mind:

Identify effective self-care practices and progress tracking methods used by licensed therapists and those who have established a self-care routine.
Pinpoint user needs, motivations, and pain points with their current systems.

What does it all mean? Key issues were rooted in a lack of customization, inefficient systems and interfaces, and a desire for additional support. Interviews also revealed that educational materials were primarily accessed outside of the app or portal being used, and often no one solution met all user needs.

After understanding the problem, I focused on understanding user motivations, behaviors, and challenges. I identified two distinct types of users.

Needs

Tracking systems that are efficient and customizable
Direct goal-setting support and tracking
Recommended practices for coping and self-care
A single platform to track, monitor, and connect with a therapist
Relevant and easy to access educational materials that can be implemented in the day-to-day

Insights

Goals should be broken down into smaller, manageable chunks for greater success
Efficient tracking systems are needed to maintain user interactions
HIPAA compliance will increase the success of connecting general users and therapists
Educational materials with an action step can provide additional support

Needs and insights gathered from user interviews

”Often times what we’re tracking is so personal and so it needs customization.”

"...But then it got a little complicated. I think maybe they had too many features. I had one that helped with habits, but then I needed to use another one to track my moods."

- Therapist quote

- User quote

Affinity map created from user interviews

Meet Summer, a brand new user, with goals of familiarizing herself with setting and tracking mental health goals and learning new coping strategies to decrease stress and anxiety to improve her mental health.

Meet Mia, a current user with experience tracking mental health habits and goals, who is seeking support from a local licensed professional that fits her busy schedule so that she can continue her mental health journey.

CONCEPTUALIZATION

Summer and Mia represent users at various stages of their mental health journey and each has unique goals and motivations when using Sprout. I used qualitative data gathered during the research phase and developed user journey maps to highlight key events, motivations, and friction points within a user's experience. This also provided insights into key opportunities to focus on while developing the main features.

Objective 1: As a busy mother, teacher, and coach, Summer wants to track her self-care habits so that she can achieve her mental health goals.

Objective 2: As an individual experiencing stress and anxiety, Summer wants to quickly access relevant educational resources so that she can have coping strategies to use in order to decrease anxiety.

Objective 3: As an individual who is struggling to find time for self-care, Mia wants an efficient way to find support from a local licensed professional so that she can receive the help she needs.

Informed by the key opportunities identified in the user journey maps, I created user flows to represent the individual tasks users would need to take to complete their goals.

Creating journey maps and task flows ensured that designs stayed user-centric and gave insight into the screens needed to complete tasks, leading to Sprout's first sitemap. After drafting the first version, a closed card sort was performed to confirm or reject initial information architecture decisions.

The following changes were made based on results from testing:

Revisions in the page hierarchy and organization of topics.
Include multiple pathways to booking a therapy session
Highlight mental health goals and habits upon login
Remove the step of choosing action steps for goals, as it seemed redundant to have both action steps and habits.

Original Sitemap

Final Sitemap

DESIGN

Armed with a strong understanding of the target audience, a clear idea of the tasks that users hope to accomplish, and a system of organization, I moved on to Sprout's first sketches. This phase of the design process included the creation of wireframes - lots and lots of wireframes - of the portal's main navigation, onboarding, and flow of key features. Sketched wireframes were recreated and improved in Figma and strung together to create Sprout's first clickable prototype.

Follow the flow! Sprout's first prototype included account setup, user onboarding and its core features as identified by the needs of the primary and secondary personas.

1. Sign up

2. Onboarding questionnaire

3. Goal setting and choosing associated habits

4. Exploring resources and saving to personal library

5. Finding therapy and booking a session

USABILITY TESTING

The next step was to conduct usability tests to determine the usability of Sprout’s main features and identify any critical errors. Participants for this study were recruited based on their prior experiences with tracking systems or an already existing interest in self-care for improving mental health.

A total of 6 participants were recruited to test Sprout's mobile prototype. Session notes were sorted into the following top level categories: Observations, Positive Quotes, Negative Quotes, and Errors. Data was input into a Rainbow Spreadsheet to further organize results and detect visual patterns. Follow-up interviews provided insight into frictions encountered while using Sprout, and issues were then categorized based on severity.

Test Objectives:

How efficient is the login and onboarding process? Do users value the progressive onboarding or is it generally skipped?
Observe efficiency of flow. How quickly can users add goals and connect habits? Are users able to navigate through various screens to locate information?

Metrics: Jakob Nielsen's scale

0 = I don't agree that this is a usability problem at all

1 = Cosmetic problem only

2 = Minor usability problem

3 = Major usability problem

4 = Usability catastrophe

Goals: Observe if users are able to complete basic functions such as signing up, creating a health goal, searching for educational resources and booking a therapy session with minimal friction.

"I don't know what to do on this page. What am I supposed to do here?"

"There's always that initial learning curve, but it's very straightforward. After you go through it once or twice, you would know exactly what to do."

"I like that it felt simple and doesn't feel overwhelming. It only takes a few taps to get it done."

ISSUE 1: Tapping on "+" icon before interacting with the in-app tutorial pop-up. (Medium)

Suggested Change: Restructure the purpose of the in-app tutorial.
Evidence: 5/6 participants tried tapping “+” icon before interacting with the in-app tutorial pop-up. 6/6 did not have trouble with the interface and navigation of creating a goal.

ISSUE 2: Not understanding how habits relate to goals (Medium)

Suggested Change: Progressive onboarding will be refocused on goal setting rather than the interface. For new users, a tip box will appear before each goal setting page.
Evidence: Only 2/6 participants utilized the “?” for additional goal setting support when confused, and 6/6 had some form of confusion around choosing habits.

ISSUE 3: Not enough options for customizing frequency (Medium)

Suggested Change: Add additional customization for setting frequency and goals
Evidence: 1/6 participants wondered about setting more specific goals for each habit. Not all habits were easily tracked by frequency/week and required additional units of measurement. 1/6 participants had questions about how to set frequency for chosen habits.

ISSUE 4: Not recognizing icon (Low)

Suggested Change: Add text to support menu icons or use a different icon for “Explore.”
Evidence: 2/3 participants were unfamiliar with the chosen icon to represent ”Explore.”

ITERATION

Following testing, I began revising Sprout's prototype based on observations, feedback, and data. The significant changes included:

Altering the purpose of the progressive onboarding
Restructuring the Home page to accommodate multiple habits
Adding additional frequency settings for each habit.
Elimination of the user onboarding questionnaire to make the onboarding process more efficient.

At this stage, I improved the visual design by developing UI components. A preference test was performed to confirm design decisions. During this test, 23 participants were presented with two designs of Sprout's Login/Sign Up screen.

A: 48%

B: 52%

"It feels more clean and that is what I like when navigating signing up or signing in."

- Participant quote for Design A

"It's easier to spot a path forward."

- Participant quote for Design B

Despite having extended the testing pool, the test did not yield a statistically significant result. Ultimately, I plan to continue with Design A for the following reasons:

Design A feels cleaner without a break in the middle for the tabs.
It is more classic and recognizable than Design B.
Users only need to sign up once, so the “Sign Up” tab would be utilized less often.
Two participants noted that the active tab indicator in Design B was initially confused with a progress bar.

Having completed usability testing of the main features, Sprout was ready to take on a new form with a more refined design and polished flows. Sprout's primary and secondary colors, along with their variations, were intentionally chosen to evoke specific emotional responses of trust, safety, and change, as indicated by Plutchik's Wheel of Emotions. Fonts were selected based on readability, and Material Design's type scale informed textual hierarchy. To boost user engagement, it was also crucial for Sprout to have a developed personality and tone. The desired tone is seen in the choices of iconography, illustrations, and language. A style guide was created to maintain the overall cohesiveness of the design and for use in future iterations.

Opportunity 1: Simple sign up procedures and progressive onboarding for new users to quickly learn how to use the platform.

Opportunity 2: Intuitive and engaging goal setting and habit tracking flows to increase efficiency.

Opportunity 3: Relevant educational resources to support users in achieving mental health goals.

Opportunity 4: In-app opportunities to connect with licensed professionals for users to receive additional support if desired.

Key opportunities identified based on research and user journey flows

User Journey One: Beginning a mental health journey and looking for initial support.

User Journey Two: Searching for additional support to continue mental health growth.

At this stage, Sprout was well on its way to completion. However, before finalizing the design, I turned to fellow designers to lay a fresh pair of eyes on the project. As it can be easy to get attached to the design, this was an important step to ensure that all design decisions were ultimately for our primary persona and, in turn, for the majority of users. Feedback responses ranged from general UI suggestions to more significant questions about features and flow.

The final iterations included checking the entire design to ensure Web Content Accessibility Guidelines compliance. While some factors were taken into consideration earlier on in the project, additional changes were made to improve the overall level of accessibility.

Along with accessibility checks, checks were made to ensure that designs were pixel-perfect and that the prototype functioned as similarly as possible to the fully developed product. The established flows address solutions to the overall problem and demonstrate the functionality of the key opportunities identified during research and ideation. With these last adjustments made, Sprout was ready to present.

Early design considerations:

Using understandable language and an appropriate reading level for greater comprehension.
Providing context sensitive help and clear labels for sections and pages.

Compliance changes:

Altering colors of buttons and chips to meet Level AA requirements for minimum contrast.
Designing a confirmation screen to meet Level AA requirements for error prevention.
Adding additional text resize options for large text blocks found in the resources section.

CHALLENGES & REFLECTIONS

An initial challenge was narrowing the scope of this project. With mental health awareness growing in recent years, the number of resources available and research in this area has also grown tremendously. Though initial research was made simpler by increasing public awareness, it was also easy to get carried away with systems and features for the design. My initial plans were much grander, much broader, and in turn, much less focused. User interviews helped narrow the scope, but even then, I ended up with too many different personas. That was my sign to start narrowing the focus even further! Ultimately, I chose to cater the design towards self-care and self-learning, with the option of finding professional help if desired.

On the design side of things, I knew I wanted Sprout to have a certain voice and personality. With such a specific vision, I needed to create many of my own vectors to truly represent the desired tone. Animations were a delightful challenge that I ended up incorporating to bring the design to life.

WHAT'S NEXT?

While this phase of the project has come to an end, Sprout will undoubtedly continue to evolve. In its current state, the calendar page does not have a lot of functionality. Without the functionality, it appears that it focuses purely on tracking appointments. In addition to appointment tracking, the calendar's purpose is for users to access data for specific days. Tapping a day in the past will reveal any active goals and habits, notes made for individual habits, and completion analytics for that day. Prototype improvements can also be made to the goals page so that there is a better feel for what editing and sorting set goals and habits could look like. I’d also like to implement a function for users to access analytics and notes of individual habits.

Try it out!

Here's what you can do...

Opportunities 1 & 2: Create an account and complete onboarding to set first goal and associated habit. For the purposes of this prototype the developed flow is as follows:
- Goal - Think Positively
- Habit - Recommended, Journal

Opportunity 3: Explore learning materials and save a resource to favorites.

Opportunity 4: Browse available therapists and book a 1:00pm appointment with Idris Gutierrez.