“How might we design an app that enables health-conscious individuals to log and manage their health and medical information, while also providing access to comprehensive features for improving physical and mental well-being?”

Role: UX & UI Designer


Scope: 8 months


Process: User research, interviews, surveys, competitive analysis, personas, information architecture, ideation, wireframing, prototyping, texting, evaluation.


Tools: Figma, Canva, Usability Hub, Optimal Workshop, Zoom, Microsoft office.

Problem

Users need access to a health and medical portal that is customizable, functional, and integrated in order to consolidate all information into one application...

Individuals may find themselves bouncing between numerous health, wellness, and medical applications on the market. Individuals are left unsure of which apps they should be using in order to reach their goals. Trying to juggle all of them is a challenge that is not sustainable. Reaching your version of health is challenging enough, your tools shouldn't be. That is why I created an all-inclusive health and medical portal for individuals to use how they want. Users are given the ability to customize their experience and use feature that best suit their lifestyle.

Research

Competitive Analysis and SWOT

MyID

MyID is an app that stores your medical profile, labs, medications, allergies, emergency contacts, and more. MyID’s slogan is “Your complete medical profile”. They state that their goal is to “empower the individual to take control of their health in order to live a long and happy life”. The purpose of this application is for users to be able to access and manage their health information at all times. MyID has products that can be purchased such as bracelets, sticker kits, and tags that all have a QR code of account so health professionals may see a snapshot of your health in emergency situations.

MyID is very easy to navigate through, everything is simple and to the point. The UI is nothing outstanding, but the typography is neat.

myfitnesspal

Myfitnesspal is an app that allows users to log food, track calories, and manage weight. Myfitnesspal claims that they are the #1 nutrition tracking app. Their slogan is to “Build healthy habits with the all-in-one food, exercise, and calorie tracker”. Their priority is to help users reach their health goals. They have a community in which individuals can give and receive support, inspiration, and information. The application is compatible with 35+ apps and devices to aid in syncing steps, weight, and workouts.

Myfitnesspal isn’t the easiest to navigate through, I think it could be simplified. The writing is great for beginner and advanced users, they do a great job at explaining each feature. The application is overrun with ads. It was also frustrating that I needed to pay to use the most basic features.

After conducting competitive analysis, I moved into validating findings through interviews, surveys, affinity mapping, and card sorting.

I utilized Optimal Workshop, and Zoom to perform these tasks, along with conducting in-person interviews.

User Interviews and Surveys

These interviews and surveys helped prove my initial hypothesis that users download multiple health apps that all serve a different purpose. I was able to narrow down the most used features, and understand the importance of tracking to the participants. Their definitions of health were pretty similar even with such large age gaps. Some prevalent issue’s participants run into that prohibit them from reaching their health goals are lack of time, consistency, and motivation.

I now take all the data acquired and perform a card sorting session and create an affinity map. Below is the sorted responses and quotes into health-related categories such as behavior, frustrations, and goals.

Card sorting and affinity mapping

Meet The Users

Personas, Task flows, and Journeys.

It is now time to add a human element to my findings!
I believe that creating a persona is one of the most important steps because they represent an entire target audience.

Taking the time to do extra research into the personas demographics, environment, behavioral patterns, and motivations is crucial. It allows me to better step in the shoes of the user, which enables me to craft a more user-centered design.

Personas, Task Flows, and Journeys

I turned all insights from prior research into Cameron and Kristin.

  • Journey Map

    Cameron

  • Task flow 1

    Log your exercise for the day.

  • Task Flow 2

    Log the last meal you ate.

  • Task Flow 3

    Make an edit to your journal.

  • Journey Map

    Kristin

Exploration and ideation

Information architecture and wireframes.

HealthyBlend is an all-in-one health and wellness application, therefore it has quite a few features. In order to eliminate confusion, I decided to create a dashboard that includes all the main features of the application, so the user can get anywhere in just one tap.

With this in mind, I found it important to run multiple tests to finalize the main features of the applications in order to categorize them. The 3 tests I ran to collect this data was a dendrogram, similarity matrix, and similarity IA. After analyzing this information I was able to create a sitemap of the dashboard, giving me the structure to start wireframing.

  • Similarity Matrix

  • Dendrogram

  • Similar IA

  • Sitemap

*66% of participants agreed on the categories created from card sorting. Leaving me with 4-5 categories for my sitemap.

Low-fidelity wireframes

By understanding HealthyBlends audience, I found it important to simplify its features and navigation. As shown in the low-fidelity wireframes, I categorized like features in order to contain all this app has to offer. This helps eliminate the guesswork. It was important that I included both a scan and search element when it comes to logging nutrition, maintaining health documents, and medications. Users can also link an external tracking device or manually input their data, allowing greater customization of the app.

Based on user insights and research, I found a dark theme to be appropriate. Black signifies luxury, and having good health is wealth to many people. Black also has no hue, so it can be a great pairing to some bright colors. As shown below, I incorporated bright colors that reflect health and wellness to my mid-fidelity wireframes.

mid-fidelity wireframes

For my usability testing, I conducted 6, moderated, in-person interviews. I used Figma to create a prototype of HealthyBlend, allowing the user to interact with the application. I created a script that briefed the participant of what to expect, and kindly asked them to think out loud and describe why they completed my scenarios and tasks the way that they did.

usability testing

Scenario 1:
You decided that you want to consistently exercise 4 times a week. So you decided to track your workouts on HeathyBlend.

Task:
Find where you would log an exercise and input a workout.

Scenario 2:
You are at a doctors appointment and your doctor wants to have an idea of your diet over the last week.

Task:
Find your previously logged meals.

Usability Test results and affinity mapping.

I created an affinity map to organize all feedback and notes I had taken. This visual helped me create a spreadsheet where I could rate the severity of the errors observed using Nielson’s Severity Rating Scale. This helped me to prioritize the features that needed more attention. This is shown below in the rainbow spreadsheet.

I also conducted a preference test on UsabilityHub.com. I decided to create a design preference test to see what color background users preferred, a light mode or a dark mode. The information I received helped confirm my choice of using dark mode.

  • Rainbow Spreadsheet

  • Participants

  • Affinity Map 2

  • Affinity Map 1

I took all of the data received from the usability tests and implemented the necessary changes needed to be made in my high-fidelity wireframes. Now is when I take the time to finalize my mood-board and organize the UI elements that I will be using such as such as icons, imagery, typography, and color. Here is a look at my final version of HealthyBlend, an application created from conception to implementation.

High-Fidelity Wireframes

in conclusion…

healthyblend taught me

How powerful research is. Performing different kinds of tests can shed light on some of the toughest obstacles. Designing is never a linear process and I learned that some stages need more time and attention than others. One of my main priorities is to design for the user, what better information is there than from the direct source.

To step into the user’s shoes. The second I started to approach each task like the persona would, everything started to fall into place. I felt more confident in my design decisions and was able to understand the need for solution better. Without realizing, I was incorporating my version of health in the project, and that is where problems came about. I am thankful that this project has made me aware of this so it is something I can avoid in the future.