VitaHub is the culmination of an idea of merging health and fitness into one cohesive application where a user can track their physical health in two forms, both internal and external. With this project, I wanted to create a space where physical and mental health intersect to promote a longer and healthier lifespan.

Primary Stakeholder

CareerFoundry UX Course

My role

UX & UI Design Research

Tools

Figma

Scroll to view full scope of project

Background

The Problem

Many online tools allow people to track their health and find resources for mindfulness and wellness. Organizations and HR departments often use these platforms to encourage employee health and happiness. However, they often don't fully consider the needs of users with different physical, social, emotional, and mental health challenges.

Users need a health app that offers tailored guidance and ongoing support to empower users so that they can make positive health choices for improved well-being.

We will know this to be true by observing increased user satisfaction, engagement, and mental health benefits, supported by a 20% improvement in key indicators like stress reduction, mood regulation, and overall emotional well-being over time.

Objective

Enable people who care about their health to use a user-friendly health website to track their health details and access various wellbeing tools.

Project Requirements

  • Design for inclusivity

  • Educate the user

  • Be considerate of privacy and security

Empathize

Conducting competitive analysis of health apps showed a gap for a platform combining health data tracking and mental health support. This inspired the creation of VitaHub to stand out among competitors.

.

The Audience

The VitaHub app is primarily focused on catering to a youthful demographic, ranging from individuals as young as fourteen to those in their thirties. Mental health issues become more prevalent early on during childhood and adolescent years which can become overlooked as parents believe that it is just a “phase”. The application has to be designed to accommodate various user requirements, making it suitable for individuals of all age groups.

Research Goals

The research goals of conducting interviews were based on three main points that needed to be addressed.

Optimization - To determine which features improve patient care, from appointments to follow up visits.

Engagement - To determine if gamification elements help in user retention and interaction.

Assessment - To determine challenges and pain points with managing mental health.

Main Findings

  • Lack of personalized guidance inhibits adoption of healthy behaviors.

  • Generic health apps do not engage users effectively.

  • Prompts and custom reminders can help improve engagement.

  • Improved healthcare solution needed for communication, support, clarity.

  • Resource center can direct users to needed care.

  • Personalized surveys can enhance user experience and provide appropriate assistance.

Define

.

Based on interviews conducted in the Discovery phase, the following personas have been constructed to portray users with high stress jobs and would use VitaHub for managing wellness, health, and medical needs. Dave represents the ability to log and track progress, while both personas seek support for mental health and access to medical resources like Suzy. VitaHub integrates mental and physical health, allowing users to schedule appointments, manage records, and cultivate a health mindset to reach their fullest potential and lead fulfilling lives.

User Personas

Persona 1: Dave

Dave is a 28-year-old single man, based in San Francisco, whose job is to deal with children with autism as a Behavior Therapist. His occupation is emotionally demanding so he enjoys spending time outdoors and taking time to himself. Living in the city is very stimulating and this can put a strain on his well-being.

Goals & Needs

  • I need more accessible resources for handling mental health.

  • I need a way to understand my health benefits that outlines what it entails.

  • I need a way to document my journey to look back on for future reference.

Motivations

  • Uses Apple watch to keep track of exercise and progress.

  • To quit smoking cigarettes

  • To practice a health way of coping with anxiety.

Frustrations

  • Not having an easy method of handling mental stress.

  • Being overwhelmed with notifications.

Device & Internet Usages

  • Frequently checks phone for updates on social media such as Instagram, Facebook, and TikTok.

  • Occasionally uses computer for research purposes but is tech savvy with a mobile device.

  • Average time spent looking at a screen in a given day = 6 hours

Everyday Activities

  • Regularly works out to stay in shape.

  • Consistently meal preps in advance for the work week.

  • Enjoys a cold drink at the end of the work shift.

Notable Quotes

“I may not have it all figured out, but when I’m able to keep track of my health, I can remain on top of it.”

Persona 2: Suzy

Suzy is a single 25-year-old woman whose job is to cover the latest stories in the Los Angeles area as an Editor for a news station. Having to be on the go and dealing with mostly tragic stories, she has to separate herself from work when she gets home. She talks to her friends about these problems, but there appears to be some disconnect.

Goals & Needs

  • Be able to have a customizable experience.

  • Set reminders to stay on top of my health.

  • I need to be entertained or I’ll lose interest.

Motivations

  • Wants to look and feel her absolute best.

  • To combat on and off feelings of depression.

  • To remain on top of her ongoing projects.

Frustrations

  • Trouble finding more resources for women needs like menstrual-cycle track, pregnancy, or menopause.

Device & Internet Usages

  • Regularly on phone for funny videos and Youtube.

  • Doesn’t use computers except at work.

  • Average screen time in a given day = 4 hours

Everyday Activities

  • Walks her dog in the morning and at night.

  • Watches Netflix on the weekends and throughout the week.

  • Hangs out with her friends after work.

Notable Quotes

“I’m tackling my health challenges one step at a time, and I won’t let it define who I am.”

Ideate

.

After creating the personas, user flows were developed to help discover what pages are needed to help ensure that the personas’ needs were met. By observing the personas' point of view, it became easier to narrow down what should be included in the application to meet the necessary functions needed to complete a specific task.

User Flows

Dave’s Scenario: As a stressed person, I want to learn more about mental wellness through meditation so that I can develop healthy and effective coping strategies.

Entry Point: Open the application.

Success Criteria: Engage in a meditation session.

Suzy’s Scenario: As a concerned patient, I want to set up an appointment with a doctor so that I can get medical advice and obtain medicine for my health condition and discuss plans for birth control.

Entry Point: Open the application.

Success Criteria: Medical needs fulfilled.

Information Architecture

Card Sort

Through card sorting, it was determined that streamlining healthcare integration, health information, and medical records on a unified interface reduces complexity and improves user experience. A connection was found between appointment scheduling and messaging, as users often associate messaging with scheduling appointments. It is crucial to clearly differentiate between scheduling appointments and messaging staff within the dashboard.

Updated sitemap after survey results from over 12 participants.

Prototype

.

Mid Fidelity

The information obtained from card sorting led to the creation of the following wireframes, which had been further developed into a functional prototype for use in the user testing phase.

Scheduling Appointments

From the home page, users will proceed to schedule an appointment and choose a location.

After answering the questionnaire, users choose a date and proceed to review their information for final confirmation.

The questionnaire regarding health information

Listening to a Meditation

By accessing the Mental Wellness Center through the dashboard, users will navigate to search for a meditation and listen to their heart’s content.

Accessing Medical Records

When opening the medical records, all past health information is stored and can be accessed to view medications that are currently prescribed or were prescribed in the past.

Usability Testing

Goals:

This study aims to evaluate user interaction, usability, content relevance, and missing features of the application during the initial user interaction.

Methodology:

I will be conducting in-person moderated tests for local participants and remote moderated tests for those located in the Bay Area and beyond. Six participants were recruited for usability testing on January 20-21, with sessions lasting 15-30 minutes using mid-fidelity prototypes to test appointment scheduling, meditation listening, and accessing medical records.

Test Objectives:

  • Understand if the onboarding process is easy to comprehend and if the organization of the contents align with the purpose of the application.

  • Observe how long it takes for the participants to navigate scheduling an appointment from start to finish when given a theoretical injury. 

  • Determine if accessing the mental wellness center is intuitive along with the process of finding a meditation is understandable.

  • Rate on a scale of 1-10 on the overall application.

Issues:

  • The icons used for meditations are inadequate for explaining their content clearly.

  • Struggling to access a current medication list in medical records.

  • Multiple comments have been made about the home screen organization, particularly regarding the placement and importance of the Mental Wellness Center in relation to other essential functions like scheduling appointments.

  • Contents of the meditation process are unclear without proper guidance or instructions.

Suggested Changes:

  • Provide 1-2 sentence description of the meditation with an accompanying icon that best describes the meditation.

  • The "Medical Records" feature can link directly to a list of medications or complete the development of the "Pharmacy" function in the application.

  • Replace 'Mental Wellness Center' button with a more important function. Explore additional customization options for a tailored experience.

  • Offer progressive onboarding at the Mental Wellness Center to help users navigate meditation, lessons, and functions effectively.

The Positives

An empowering and confidence-boosting wellness journey with all relevant options included.
— Eric F.
It’s better than the app I am currently using!
— Jordan E.
Onboarding process was fairly seamless and relatively easy.
— Will B.
Your health app’s UX design effortlessly guides users towards their wellness goals and it has everything I need.
— Samantha H.

UI Elements and Style Guide

After the initial testing phase, VitaHub underwent a redesign to incorporate new UI features that enhance the focus of the application. Principles of UI design, including balance, Law of Proximity, emphasis, hierarchy, and proportion, were applied in the development of the high-fidelity prototypes.

Iterate

.

What’s Next?

I will retest the application with past and new participants, focusing on the Mental Wellness Center. This will involve making changes to the UI, adding new features, and recruiting testers. Adjustments will be made based on feedback, with retesting conducted until the app receives a rating of 9 from most participants to prepare for launch.

Let’s connect and create something remarkable together!