WELL-LIFE
Problem Statement
This case study investigates a fundamental question:
How can we support young adults through major life changes to balance their mental and physical health?
We recognize that mental health is often neglected and being affecting physical well beings. The World Health Organization reports that many mental health conditions are not treated.
Our goal is to create a digital tool that enables young adults to identify and manage early signs of mental and physical health challenges.
Interview Insights
Conducted focused interviews with young adults undergoing life transitions to understand their challenges related to mental and physical wellness. The conversations aimed to uncover the impacts of these changes on their daily lives and identify the support needed to maintain well-being.
Needs Assessment
Our needs assessment involved detailed discussions with young adults who are navigating significant life
transitions. We aim to understand their daily struggles with mental and physical health in the context of new job pressures or academic demands. The feedback revealed a strong need for tools that support stress reduction and sleep improvement without adding to their already full schedules.
By analyzing our interviews, we identified a pattern of requirements: a desire for a simple-to-use platform that fits into varying daily routines, provides quick stress relief, and enhances overall wellness. These insights were crucial in developing a user-centric digital solution designed to meet the unique challenges.
User Personas
Our user personas were crafted from rich interview data, representing the diverse experiences of young
adults we aim to support with our digital wellness platform. These personas encapsulate distinct motivations, challenges, and lifestyle factors that are critical in shaping the functionality of our solution.
Information Architecture
Our digital wellness platform is structured to offer intuitive navigation and easy access to a different resources. The sitemap is organized into four main categories: Community, Resources, Events, and Profile.
Community: This section connects users to support groups and communities relevant to mental health, physical wellness, substance abuse recovery, and LGBTQ communities, enabling them to find solidarity and support.
Resources: It includes a curated collection of podcasts, articles, and audio tracks, along with a directory to local health services and immediate help options, providing users with a range of tools to educate and improve their well-being.
Events: Users can discover webinars, community meetings, seminars, and workshops designed to engage and provide practical knowledge and skills for managing wellness.
Profile: The personal hub for users to access their information, track their wellness journey through a journal, review saved resources, and customize their settings for a personalized experience.
Navigation through the site is designed with simplicity in mind, allowing users to move from finding community support to learning through resources, attending different events, and personalizing their journey, all from the home page.
Interactive Wireframe in Figma
Overview
We utilize Figma's collaborative features to efficiently create interactive wireframes. Team members can work on the same file at the same time, sharing progress and ideas in real time. With the rich resources provided by the Figma community, we were able to quickly create low-fidelity prototypes, significantly improving productivity and design quality.
As shown in the screenshot, our overall wireframe illustrates a user's personalized journey through the platform. Starting from the homepage, users can access various modules according to their preferences: from 'Resources' users can browse articles, podcasts and music tracks, or from 'Events' they can find the webinar they want to attend and the community meetings; and of course, you can see your favorites and record your moods in the profile section for more personalized content. Each interactive element is designed to entice users to explore and engage, allowing them to select content and interact with it seamlessly.
Navigation Bar
We designed a navigation bar that focuses on minimizing the amount of work users have to do to find resources or support. Users can clearly find any section where they want to access resources and help.
Personal Profile
An unique feature in our profile wireframes is ‘ mood journey’. Users can see the question "How are you feeling today?" on the profile page. This interactive prompt encourages users to reflect on their emotional state. Users can use this feature to record their personal moods. The journaling feature and mood tracking then graphically shows the user's emotional trends over time, providing insights and customized suggestions to the user.
User Flow Diagram
In our SI582 project, our goal was to create a user flow that not only meets the diverse needs of our users, but also promotes a stress-free navigation experience.
Overview
Planning
Our user flow diagram (see image) was the backbone of our design process. We carefully mapped the user flow from the initial entry point on the homepage to different endpoints such as podcasts, webinars, community meetings or personal journals.
User-centered design
When creating the diagrams, we carefully considered the cognitive load of the user. We divided the process into streams based on the type of content the user needs - whether it's resources, events, or personal profile management. According to Hick's Law, each flow is designed to minimize the number of interactions required to achieve the user's goals.
Critical Path Analysis
The diagrams highlight the critical path - the most direct path for a user to complete a task. For example, starting from the homepage, users can quickly access specific podcast episodes with very few clicks, which is very effective.
Conclusion
Our user flow diagram played an important role in visualizing and refining the user journey. We believe that meticulous user flow diagram is essential to creating an engaging, user-friendly platform.
Usability Test Preparation
To evaluate the effectiveness and user-friendliness of our young adult mental and physical wellness website, we conducted a usability test. The test aimed to identify areas for improvement, ensuring the website is easy to navigate, engaging, and meets the needs of its target audience.
Methodology: Interview
Participant's profile: 8 students and working professionals between age 19-26 were recruited for this usability test
Tasks: We tested three user flows.
Task 1:
Create a journal entry and track mood
Objective:
To evaluate the effectiveness of the profile’s journaling feature and the mood tracking system.
Task 2:
Find and save a resource
Objective:
Assess participants' ability to find and use the music therapy feature for stress relief.
Task 3:
Navigate to webinars and register for one
Objective:
Determine how intuitively users can find the webinars and register for one.
Usability Test Results
Task 1:
Create a journal entry and track mood
Completion time:
30s - 1min
-
Quick and efficient discovery of journal entry.
-
Testers were able to easily understand and find their profile page.
-
Testers look for their past journal entries and want to see how they could interact with the diagram and monitor their emotional changes.
-
Testers couldn't decide which emoji to pick, since they think no emoji represents their mood.
"I like the journal entry function, but I wish I could track my journal history more easily"
- Participant A
Completion time:
45s - 2min
-
Prominent ‘Set my saved resources’ button made it easy for participants to access their saved article directly from the page.
-
Participants can easily save the article by clicking the heart icon.
-
Participants often struggled to locate their saved resources after they leave the page.
-
Searching time was longer due to navigation issues.
Task 2:
Find and save a resource
-
Lack of clear signs to Saved Resources.
"How could I access my saved resources?"
- Participant B
Completion time:
10s - 30s
-
Some participants could easily make the connection that webinars would be present in the “events” tab in the top navigation.
-
The prominence of the “register” CTA button made it easy to register.
-
Some users find it difficult to locate the webinar function as they tried to look for it under community.
Task 3:
Navigate to webinars and register for one
-
No feedback after pressing the register button.
"The registration process was easy, but how do I know if I've successfully registered after pressing the register button?"
- Participant C
Design Iterations
1. More User Control and Freedom
Added a personalized emoji feature.
-
It allows users to select custom emojis to express their current mood when the standard emoji set doesn't quite capture their feelings.
New check mood weekly or monthly feature
-
This provides a more comprehensive overview of their emotional trends.
Added "Check All History" button
In response to feedback from usability participants expressing a desire to review their journey history for improved mood monitoring, we have added a "Check All History" button.
2. Better Flexibility and Efficiency of Use
Added shortcut button
To address participants' difficulties in navigating to saved resources, we've implemented a shortcut by adding a "See Saved Resources" button. This enhancement is expected to speed up the interaction.
3. Better Visibility of System Status & Easier Recognition
Error Prevention
-
Added a "Back" button in case users made a mistake and would like to go back to the previous page.
Recognition instead of Recall
-
Instead of asking users to type in the webinar they want to register for, we've added a drop-down menu for them to easily select the desired webinar.
Added Registration Status Feedback
-
We added a "Registered Successfully" page to ensure that users receive timely feedback on their actions and to prevent any confusion.
Visual Design Elements
Contribution Report
-
UX Process: Renhao Li
-
Interviews Needs Assessment Personas: Renhao Li
-
Information Architecture Sitemap / Navigation: Renhao Li
-
Interactive Wireframes in Figma/ Axure: Shuo Xie
-
User Flow Diagrams: Shuo Xie
-
Usability Test Preparation: Yiming & Maheema
-
Usability Test Results: Yiming
-
Support your design choices with metrics and user quotes: Yiming
-
Design Iteration (improvements you made based on the usability testing results): Yiming
-
Visual Design (color, imagery, consistency, typography, etc): Maheema