CASE STUDY / UX

Better Health Starts with Better Health Education

Unleashing AI's Potential to Foster Personalized Achievement in Health and Wellness

TIMELINE

4-Months

ROLE

UX Researcher, UX/UI Designer, UX Writer

TOOLS

Adobe XD, Photoshop, Illustrator, Figma

PROJECT BACKGROUND

Introducing Olive! But hold on, let's take a step back. Allow me to introduce you to the source of inspiration behind Olive. The initial idea for this web application originated from the project brief I chose during my participation in the Immersion program within CareerFoundry's UX Design Bootcamp. This assignment tasked me with creating an inclusively designed, responsive web portal (app). The primary goal was to offer comprehensive health and wellness information while also providing users with a platform to store their medical records and appointments.

Allow health-conscious individuals to log in to a responsive health and wellbeing portal to record their health and medical information, and access general physical and mental wellbeing features.

INSPIRATION >>

HYPOTHESIS

Before embarking on a solution, my first step was to comprehend the problem from the user's standpoint. After dedicating time to analyze competitors and gaining initial insights, I formulated a hypothesis—

"If an app provides personalized guidance tailored to the unique needs of each individual, then it is more likely that they will maintain inspiration and motivation, ultimately leading to positive results. I believe that incorporating AI capabilities will better personalize, thereby enhancing the user experience."

RESEARCH GOALS

With my hypothesis established, I proceeded to try to answer the following questions:

What motivates our users to want to lose weight? What barriers prevent them from getting or staying motivated?
What type of support and tools do potential users desire to help keep them motivated to meet and maintain their wellness goals?
What pain points do potential users face when using health and fitness apps to help meet wellness goals?

USER INTERVIEWS

Continuing my research phase, I directly engaged potential users. After distributing an initial insights-gathering survey, I virtually met with four potential users. In these sessions, I asked questions covering their health conditions, attitudes, and wellness experiences. Some questions asked were:

Are there any medical conditions that might hinder your capacity to manage weight, engage in physical activity, or maintain wellness?
What obstacles, whether actual or perceived, act as hindrances to you taking the initial steps towards wellness or adhering to a wellness plan?
Concerning wellness education (such as understanding calorie dynamics, the role of protein, the long-term benefits of mobility exercises, etc.), how influential is it in your ability to sustain a wellness plan?

Some pain points reported were:

"Limited time without having help with daily responsibilities."

"Difficulty finding exercises that won’t aggravate conditions."

"Difficult to find motivation without a partner."

"Not being informed of any result when working toward a goal is discouraging."

These initial communications also affirmed my belief in the potential for integrating artificial intelligence into the functionality of Olive. The process of searching the internet for comprehensible and reliable information to support one's weight and fitness objectives can be laborious and time-consuming, often leading to more frustration than success. The prospect of enhancing Olive through AI, granting her the capacity to learn and recall information, thereby transforming her into a comprehensive one-stop resource, was enthusiastically received and thus maintained as an integral aspect of my app concept

CONCEPTUALIZATION >>

USER PERSONAS

To better comprehend my users' viewpoints, I synthesized data from surveys and interviews. This formed a comprehensive understanding of their identities, usage context, motivations, and challenges. This resulted in the formation of a couple distinct personas, with the primary being—

Layla, the Ultimate Caregiver

Layla, as the primary persona, accurately embodies the potential user demographic I am targeting. Struggling with the challenges of excess weight, Layla regularly faces physical strain and fatigue. Regrettably, her demanding caregiving obligations leave her with limited time to tend to her own health, let alone dedicate herself to the task of researching effective solutions. This scenario is reflective of a substantial portion of users who confront comparable time constraints due to their caregiving responsibilities, which may encompass parenting, spouse care, or attending to elderly parents. It is precisely these challenges that make Layla a compelling representative of my intended demographic.

“You’re doing something and you’re not seeing the results and no one is telling you the results—that’s more detrimental.”

IDEATION

With my persona developed and solidified, I reached the point where I began contemplating how to devise a solution. This solution needed to be not only beneficial but also engaging, ensuring that Layla would find the motivation to interact with it on a daily basis. Prior to crafting visuals to represent my concepts, I recognized the importance of establishing a clear anchor point. This involved finalizing my problem statement.

Layla needs a way to create a healthier lifestyle to improve overall health without the pressure of lengthy workouts and food calorie tracking.

We will know this to be true when we see an increase in average calories burned and/or activities completed and reduction in joint pain on a regular basis.

INFORMATION ARCHITECTURE

Before delving into the design of my web portal, my first step was to grasp the crucial content that required sharing. For the initial assessment, catering to both the user's requirements and project criteria, I prioritized four key features:

Dashboard
Medicine tracking
Fitness and meal tracking
Education

These selections formed the basis for devising a well-founded user flow. Through a card sorting activity involving anonymous volunteers, the flow was refined to better synchronize with real-world user expectations.

Original flow based on assumptions about how users would interact

Revised flow based on user feedback received during a closed card sort exercise

MOCKUPS

The moment arrived to infuse vitality into my concepts. I initiated the process by generating swift prototypes and outlining my notions using my iPad. Once I had a clear sense of the path I was heading, I progressed from low-fidelity mockups to mid-fidelity iterations, gaining a more comprehensive perspective on them. These, in turn, paved the way for crafting high-fidelity wireframes, which were poised for eventual testing.

Lofi mockup of 'My Meds' screens

Midfi mockup of 'My Meds' screens

ITERATION >>

PROTOTYPING

With a design mocked up it was time to move on to the testing phase. I used Adobe

XD to pull everything together and create my first functioning prototype. I created a test plan with a simple goal of assessing the mobile prototype’s:

Learnability
Efficiency
Elimination of pain points

In addition to identifying usability friction points, some capabilities I wanted to confirm were:

Medication logging
Accessing workout from scheduled wellness plan
Accessing education library
Satisfaction with offered features

TEST RESULTS

Five tests were conducted successfully, and despite encountering minor challenges, all participants expressed overall satisfaction and found the prototype easy to use. Feedback was evaluated through the process of affinity mapping. The issues that arose were categorized and evaluated using Nielsen's severity rating scale for usability problems. The most significant problems were documented in a report prioritized and resolved in the next iteration.

“ I think this will be a great app!”

—Potential user

EXPOSITION >>

VISUAL PRESENTATION

Before further testing, it was vital to define the web portal's visual style. A more lifelike experience would yield higher-quality feedback for my iterative changes. This involved selecting colors and their meanings, a font family reflecting the app's tone, and visualizing Olive.

I generated multiple logo options, experimented with colors and mood boards, and gathered unbiased feedback to make informed decisions about the most effective style for my web portal.

Original logo options

BRANDING

After contemplating the emotions I wanted to evoke and ensure they harmonized with the purpose and objectives of the application I settled on a primary color palette that leans towards bluish-green, accompanied by a reddish-orange shade.

Blue, widely associated with healthcare, and green, symbolizing health, nature, and growth, were combined to unite these concepts

Reddish-orange retains the essence of the heart symbol in the logo while conveying warmth and excitement

Olive is the vibrant heart and soul of the Ask Olive app. Serving as the app’s primary personality, she is the delightful main character with whom users engage, bringing a world of healthy possibilities to their fingertips. As such she should feel relatable, so I scraped the fun and childlike version for a more mature iteration.

Original Olive

Final Olive

To complete the visual aesthetic of the Ask Olive web portal , I formulated a series of UI guidelines and documented them in a couple of references for future use.

Brand Style Guide

Design Language System

PEER REVIEW

I revamped my prototype in Figma, applying these stylistic changes and refining it based on the new guidelines. I then shared my work for peer review via Slack, gathering volunteers for feedback. While most comments were positive, noting minor overlooked improvements, some substantial criticisms arose due to a misunderstanding that the prototype targeted a native app. Still, I found valuable suggestions that I either incorporated or noted for future use.

ACCESSIBILITY REVIEW

The most recent review I conducted focused on ensuring accessibility, so that all types of users can benefit from this app. Based on this assessment, I made adjustments in the following areas:

Color contrast
Font sizes
Spacing

SOLUTION >>

MEET OLIVE!

Ask Olive has transformed into a comprehensive web portal application that seeks to leverage AI to cater to the needs of individuals grappling with health and wellness challenges. Upon signing up and completing a thorough questionnaire, users gain the opportunity to receive personalized meal and fitness plans aligned with their specific requirements. The days of scrutinizing article credibility for helpful advice are over. Users can simply ask Olive at any time, receiving not only answers but responses tailored to their unique health conditions and insights from repeated interactions.

The Ask Olive app facilitates medication management, enabling users to log their medication intake. It also hosts a repository of health resources, encompassing articles, fitness videos, and alternative meal plans. Moreover, it fosters community building by enabling users to connect with friends within the app.

Following months of empathizing, defining, ideating, prototyping, testing, and iterating, I've crafted an application that not only fills me with pride but also possesses the potential to transform lives.

ROUND 1

ROUND 2

FINAL (CURRENT)

View Full Prototype

demo

LEARNINGS

Throughout this process, I've gleaned a couple of lessons—and not just about the process itself:

A significant number of individuals feel neglected when attempting to enhance their fitness due to the limited consideration given by most apps to those dealing with chronic illnesses or conditions that present exercise challenges. It's crucial to ensure they feel acknowledged and to provide them a voice in their personal journey. This app is dedicated to fulfilling that role. Consequently, obtaining continuous feedback from this specific demographic will play a pivotal role in the app's success.
I can't profess a genuine concern for the well-being of those often overlooked without integrating accessibility into design. I hadn't previously considered factors like color contrast, font size, or element spacing. Moving forward, I'll incorporate these and many other considerations into every phase of a project.

WHAT'S NEXT?

Several additional steps are necessary to prepare this app for public use:

Establishing a comprehensive database of health-related information for Olive to access.
Developing an in-depth questionnaire that tailors itself based on the given responses.
Creating additional sections within the app, such as a feature for monitoring crucial data like test results and upcoming medical appointments, as well as an account settings area.
The dashboard requires significant enhancements. It's crucial to guarantee that it exudes the same level of positivity and encouragement that the app was designed to promote.
Evaluating the 'Medicine Cabinet' section to ensure its coherence and clear differentiation from the 'Tracking Log' situated above it.

CONCLUSION

For many, meeting wellness goals can be challenging. It's not merely a matter of calories in versus calories out. Numerous factors, including genetics, physical condition, psychological aspects, and learned behaviors, come into play. The average person often lacks the necessary training and knowledge to navigate these complexities. Having access to an app capable of swiftly accessing, analyzing, and providing guidance holds the potential to significantly transform one's life. That’s because better health starts with better health education.

Just ask Olive!