See full case study below
Background
60% of US adults have a chronic disease, and 40% have two or more chronic diseases (CDC). They are the leading causes of death and disability, and lead to $4.1 trillion dollars in healthcare costs annually across the nation. On top of this 30 million Americans currently live with undiagnosed illnesses (NIH), and may not even know what is afflicting them and how to better their health. Groups especially susceptible to go undiagnosed tend to also have higher risk factors for chronic illness, like women and people of color.
Flourish is an app designed to help patients with multi-symptom chronic illnesses better track, visualize, and communicate their symptoms and triggers over time. Designed in partnership with partner organization Suffering the Silence, a 501(c)3 tackling the destimagization and support of people with disabilities and chronic illness, Flourish focuses on using data to empower patients. The app features the same 1-10 sliding scale for symptom scoring used by doctors, the ability to incorporate custom tags for health triggers, and log health factors like sleep, hydration, and medications.
Key Partners
Although the Flourish app was fully prototyped, no empty states had been designed yet. This meant there was little consideration for the first-time user (FTU) experience and what that would look like. My challenge was to create empty state designs that fit well into the existing flow of the app while feeling natural to the user.
My role: UX Designer @ Flourish, National Science Foundation (NSF) DIFUSE Grant Recipient, Neukom Institute for Computational Science Scholar, Product Designer @ the DALI Lab
How might we create a first-time user (FTU) experience that fosters delight?
My high-fidelity designs for the three important features of the Flourish App––Symptoms, Triggers, and Health Factors––and allowed them all to be logged easily for data tracking and analytics.
I also created a mental health and pain diagnostic survey to be used by Massachusetts general hospital for real-time impact, and created a full-stack atomic design system that standardized 45+ screens across the mobile and web with custom-made components, colors, and font styles.
I analyzed the V1 Flourish prototype’s existing approach to logging and tracking symptoms to understand the strengths and weak points of the current flow of the app. By reviewing the designs, I can be aware of how new empty states and logging structures can best mesh with the existing flow of the app, as well as identify any design/development weak points to bring up to the larger team.
– To do this analysis, I used 3 design heuristics from the Nielsen Norman Group (NNG):
Define – Identifying Insights & Takeaways
After review, I was left with 2 key insights to guide the design opportunities for our redesigned flow:
Insight #1: Categorization is Key
Flourish is trying to convey ease of use and to inspire delight. This message quickly becomes diluted when users cannot properly manage their data.
Opportunities
Consolidate the add and categorization stages for a separated out ‘editing state’, and have it save to a ‘saved state’.
Standardize the visual elements and user experience for symptoms, triggers, and health factors.
Insight #2: Adapt to Individual Schemas
Each individual has their own way of interpreting their symptoms and accounting for their health, and rather than making users work to accommodate Flourish’s abilities/limitations, Flourish should instead put users first.
Opportunities
Use optional components to make the editing process flexible so Flourish can be personalized and unambiguous.
Leverage prompts, terminology explanations, and easy-to-understand copy to simplify the first-use experience.
Once I had everything I needed to begin, I started off by sketching possible UX flows that the user could take while experiencing Flourish for the first time. Moving from pen and paper to low-fidelity greyscales, I began noticing clear distinctions and patterns between my ideas.
As I narrowed down the ideation process from grayscale to hi-fi and colors, I organized these broad distinctions into four categories of flows:
Out of these flows I created 4 hi-fi prototypes in Figma, and conducted usability testing via design critique and with external users. Click through the carousel to see user reactions and takeaways from each flow:
Given the feedback we received from users, we chose a combination of symptom first and mass add that allows for single-add [Symptom/Trigger/Health Factor]s with optional categorization.
To ensure our final designs were intuitive, efficient, and aligned with user expectations, we conducted a mix of asynchronous large-scale testing and in-depth qualitative interviews. This allowed us to validate our assumptions while maintaining fast sprint velocity—continuing development while collecting real user feedback.
Challenge #1: Unintuitive Content Labels
Users had a difficult time identifying symptoms/treatments/health factors because they did not naturally label them in their minds, or if they did, their vocabulary to describe it is different than that of Flourish.
Create a library that contains standard symptoms/treatments/health factors that would auto-fill as the user types to prompt them on proper examples of each. Eliminate defaulted categories to not confuse the user.
Challenge #2: Un-needed Categorization
Symptoms/ treatments/health factors could fall into many categories or have no well-defined category, making it frustrating to organize them.
Make optional the categorization of items, which allows the user to organize their data however they’d prefer.
Challenge #3: State-Dependant UI Confused Users
UI changed from creating new items (empty-state views) and when editing existing items, confusing users when they went back to make changes to their logs.
Standardize the look and flow of empty states and filled states from the first time people open the app to when they already have many items present.
I created a final, clickable flow that incorporates the results of our user feedback sessions and iterations and got implemented into full Flourish build.
On top of just redesigning the empty state experience, I also spent my time on Flourish developing an onboarding experience and creating a design system/hospital tool:
Design System
I created a full-stack design system to extends the component-based ideas of Atomic Design to be specific to Flourish and standardize the user experience throughout the app via a high-level guide.
Creating custom components and styles out of font styles, colors, and standardized weights/roundness/etc., I applied the system onto 45+ screens: redesigning them to be modular and cohesive.
MassGen Hospital Integration
Throughout this experience, I also created a Disease Activity Index (CDAI) and Pediatric Depressive Survey integration within the Flourish application for the Massachusetts General Hospital in Boston, Mass., that reminded users to log their symptoms on our mobile application in regular intervals, and processed that data for doctors in a backend web application.
Generating meaningful impact for one of the top-five hospitals in the United States was a rewarding aspect of this project I was really glad to have worked on.
“The trend analysis would save me so much time and it’s not something I’ve seen anywhere else.”
K.M., Patient
“This is how you pull in the non-analytical people, this is forward thinking.”
S.T., Patient
This project was extremely rewarding, as I was able to generate tangible impact for MassGen Hospital, as well as work on a project that would help a large and underserved group. Being able to hear the stories of our users and see our work come to life was amazing, and I’m excited to see the continued real-world impact delightful design and Flourish can have for the chronic illness community.
Most importantly, this project taught me to exercise creativity in the face of constraints. From Des/Dev collaboration and challenges to statistical constraints of data analytics to COVID-19’s shift to remote work, this project reminded me to always stay flexible and nimble while approaching design challenges.