FLOURISH | Grace Guo

Flourish

PROJECT OVERVIEW

Catalia Health is a digital health care management company based in San Francisco, California. Their core product is an interactive personal assistant robot, Mabu. Catalia Health wanted to expand their product line by creating a patient community. The mission was to create a HIPAA-compliant product and experience that could help to improve patients' well-being through access to a greater patient community and personalized resources.

The goal is that by creating a safe space for patients to engage, patients will feel more informed about their condition, more motivated to adhere to their treatment plan, and a heightened sense of social belonging that could ultimately lead to better personal health care management. I worked as the lead UX designer in a small team of 4. Following an aggressive timeline, we were able to successfully research and design a high-fidelity prototype of the app, Flourish, in 5 months. 

RESPONSIBILITIES

Secondary research

Primary research 

Information architecture​

UX/UI Design 

User testing

TEAM

SUCCESSFUL OUTPUT

Grace Guo 

Alexa Steinhauser

Alex Rosales

Renee Reid

Interactive high-fidelity prototype, tested with chronically ill patients, which outlines the solution and demonstrates 2-3 user flows of key community features

PROJECT TIMELINE

OUR

PROCESS

Throughout our research and design phases, we followed the Double-Diamond Process Model. Founded by the British Design Council in 2005, this design process model clearly depicts the iterative nature of the design process. To discover and define the problem space, we conducted primary research. We developed our ideas through a series of sketches and wireframes. After multiple iterations and a round of user-testing, we delivered a high-fidelity prototype to our clients. 

RESEARCH METHODS

We had a total of 42 participants. We completed remote interviews with 13 chronic heart failure patients and administered a card sort and survey to the remaining 29 participants. From our one-on-one interviews, we hoped to: 

  1. Gain insight on daily life of a chronically ill patient

  2. Understand how patients currently engage in online communities 

  3. Get feedback on features important for an online patient community

 

We also sent out a card sort activity and pre-activity survey so that we could:

 

  1. Discover desired attributes and features of an online patient community

  2. Understand how patients currently engage in any type of online communities

  3. Find out the demographics of patients who use online communities

RESEARCH METHODS

PARTICIPANTS

RECRUITING

Remote 1-on-1 interviews 

Survey & Card Sort

42 CHF patients

13 one-on-one interviews

29 card sort/surveys

Facebook support groups

Heart failure subreddits 

Catalia Health patients

Personal networks

THESE WERE OUR KEY FINDINGS

Patients use community for a sense of belonging and giving back.

Patients felt that a community where users were identified (vs. anonymous) made them feel more supported.

Older participants preferred face-to-face interactions.

A majority of patients use their mobile phones; Not all participants had a computer.

A common pain point amongst patients was transportation and maintaining a good diet.

TITLE OF THE CALLOUT BLOCK

ARCHETYPES

We found three types of community user archetypes -- two archetypes (contributor and lurker) whose characteristics were independent of their progress in their patient journey and one archetype (mentor) whose behavior was tied to the length of time they had been a patient.​

  • Browse posts for informative content

  • Does not tend to contribute

  • Can be at any stage in patient journey

  • Use online communities to share personal story and connect with like-minded people

  • Can be at any stage in patient journey

  • Use online communities to help others

  • Often start communities or become mods

  • Further along in their patient journey

TITLE OF THE CALLOUT BLOCK

CONCEPT SKETCHES

We began our design process by using Miro to organize our thoughts around a potential concept. Using our north star and understanding of priorities, we brainstormed different aspects of the community by posting these ideas onto the Miro board. This took the form of an initial site map for the community, and included our main topics with pages that could support them, which helped us answer the following questions: 

 

  1. What is the main framework of our site?

  2. Which aspects from our findings would be important to display as navigation? 

  3. Are these topics placed where they are expected to be seen?

  4. Should we integrate Mabu? If so, how?

Using the initial concepts and ideas within our user story, we began sketching out the interface concepts for the wireframes. We used a few methods to increase the output of creative ideas, beginning with an activity called “Crazy Eights" established by Google. 

USER STORY

"I want to connect with other congestive heart failure patients and learn how to better manage my condition."

COMMUNITY FEATURES

COLLABORATION TOOL

Community

Education
Services

Miro

Crazy 8's Activity

Generating ideas with the team by sketching out 8 quick iterations at a time, sharing, discussing, and repeating until deciding on the most sensible approach.

Like what you see?

Let's chat.

TITLE OF THE CALLOUT BLOCK

DEVELOPING THE WIREFRAME

After the “Crazy Eights” activity, we collaborated on developing the wireframes as a team, taking the most compelling sketches and transforming them into a more organized, streamlined set of screens. Because this developmental process yields constant change, we used a whiteboard for the rest of our activities. We first created a hierarchy of navigation menu items, which in turn revealed both the “Explore” and “Community” pages as highlights of the app.

“Explore” would act as the homepage for users upon opening the app. After being onboarded (in which data points collected on the user would map them into one of the patient types on their patient journey), content on this page would be catered to the user.

 

Both content from official publications and the patient community would be featured under “Recommended Articles” and “Recommended Posts.” The article content would either be curated by Catalia Health or moderators within the community, much like editor’s picks for the Apple App Store. Posts from other users would be recommended or featured in the “explore” page based on user preferences. From this page, the user could then bookmark or comment on the posts and articles featured. With those two key features in mind, we mapped out two separate user journeys and used them as a framework to build out the rest of the wireframes. We walked through each journey and made sure to match the users’ mental models. 

USER STORY

"I want to connect with other congestive heart failure patients and learn how to better manage my condition."

COMMUNITY FEATURES

COLLABORATION TOOL

Community

Education
Services

Miro

Community Flow
communitywires (1).jpg
explore (1).jpg

TITLE OF THE CALLOUT BLOCK

PROTOTYPING &
USER TESTING

After increasing the fidelity of our wireframes through Sketch, we utilized Figma to create an interactive prototype. Upon completion of the first working prototype, we conducted user tests to validate our design work. Feedback was needed on usability, information architecture, interactions, visual design, and the mental model for personalization. 

We reached out to many of the original participants from our interviews. In the end, 5 participants volunteered to work with us to test the prototype remotely. The participants shared their screens and provided commentary as we asked them to perform tasks through two main scenarios on the “Explore” and “Community” features. 

Key findings revealed that: 

  1. Every participant is willing to use the Stories section to share their personal story

  2. Stories and posts should have titles to give readers a general idea of what their post is about

  3. Stories should also have an option to add pictures

PROTOTYPE

22 total screens

USER TESTING

PROTOTYPING TOOLS

5 previously sourced

   participants

2 scenarios

Adobe Illustrator

Sketch

Figma

TITLE OF THE CALLOUT BLOCK

BRANDING 

Our client shared with us their branding specs, such as specific fonts and colors used for both Catalia Health and Mabu. Since they did not have a formal branding guideline, we went ahead and used our best judgement in order to establish the look and feel of the app. While we wanted the design to feel similar to that of the client’s, we also wanted to separate it out from the existing product, Mabu.

 

For the main color, we chose a shade of teal that both compliments Catalia Health's blue and orange, but also stands well on its own. For the text, we chose a modern and easy-to-read san serif font, Avenir. We focused on making interface appear lightweight and clean through a minimal color palette, careful treatment of white space, and subtle shadowing. We hoped that a clean, bright interface would make the app more intuitive and delightful to use.

 

We chose the app name, Flourish, because it is a verb that means: to grow in a healthy way from being in a favorable environment. Meanwhile, the logo symbolizes both a flower in full bloom and the intersection of similarities. This correlates with the app because we hope that users of the app can meet like-minded people, grow together, and flourish within the community. 

Like what you see?