MyPlanCF

Designing an educational parenting tool for women with cystic fibrosis, in partnership with CONVERGE at University of Pittsburgh.


TOOLS

CLIENT

Figma

Adobe Illustrator

CONVERGE at UPitt

ROLE

DURATION

User Research

Wireframing

Prototyping

UX Design

Usability Testing

March - April 2023

TEAM

Maggie Hung


We partnered with Dr. Traci Kazmerski and Olivia Stransky at the Converge Center for Innovative Research on Gender Health Equity, a university-based research center.

OVERVIEW

CLIENT

As new cystic fibrosis (CF) treatments become available, individuals with CF are experiencing improved life expectancy and quality of life. As a result, more women with CF are thinking about if, when, and how to become parents.

OBJECTIVE

We were tasked with developing a simple mobile tool to help women with CF make informed, values-concordant decisions about family planning, nutrition, and breastfeeding.

BRIEF


MyPlanCF

OUTCOME

An educational tool that provides information on CF-specific concerns related to family planning, such as new mom education, infant feeding, and managing CF as a parent.

I led user research and usability testing and played a main role in wireframing, prototyping, and UX design.

Onboarding screens introduce MyPlanCF’s 7 main sections. Users can personalize their app experience based on topics of interest.

Onboarding

KEY FEATURES


Each of MyPlanCF's 7 sections is designed to offer support, guidance, and resources relevant to the CF community. The below screens showcase the personalization preferences established during the above onboarding process.

CF-Specific Tools & Strategies

Nutrition & Health

Recipe tags highlight the recipe features that pair well with the demands of a CF care routine (i.e., “no bake” or “kid friendly”).

Recipes cater to different dietary needs, including options for breastfeeding and non-breastfeeding mothers.

Sleep

Peer perspectives offer strategies on different topics related to maintaining a CF care routine.

Each perspective underscores the message of “healthy mom, healthy baby.

Profile

“My Profile” offers users a centralized location to seamlessly access saved questions, reflections, and topics of interest.

Information is displayed chronologically and can be unsaved by tapping the “favorite” icon.


RESEARCH

How Does Cystic Fibrosis Impact Family Planning?

We partnered closely with our clients, doctors, and researchers at Converge at UPitt to understand the key considerations for women with CF when family planning, specifically with regard to infant feeding.

Key Considerations


To inform the design of our decision aid, we referenced the Ottawa Decision Support Framework (ODSF), a vetted tool for difficult decision-making.

How Might We Design a Decision-Aid to Support Difficult Decision-Making?

+

=

According to the ODSF, offering decisional support that addresses decisional needs leads to improved decisional outcomes.


Identifying the Problem Space


Design a simple mobile app that helps women with cystic fibrosis make informed, values-concordant decisions about family planning, nutrition, and breastfeeding.

Design Goal:


IDEATION

Initial Exploration | Whiteboard Sketching

Our initial whiteboard sketches examined ways to facilitate the exploration of primary topics related to CF and parenting. We initially focused on three sections: Nutrition, Medications, and Disease Management, which were later iterated and expanded on.

Concept Development | Defining Our Approach

We wanted the structure of information to support low-pressure exploration of educational content. With this in mind, we developed a dynamic user flow, which enables flexibility and minimizes cognitive load.

The onboarding screens follow a linear flow, allowing users to orient themselves to app features. From there, the app homepage introduces and exploratory flow, allowing users to peruse content as they wish.


DESIGNING MYPLANCF

Design Challenge #1

How might we create an approachable, educational experience that reduces overwhelm?


Creating a Warm, Supportive Space for Family Planning, Without a Clinical Feel

We leveraged a cheerful color palette, soft gradients, and custom illustrations to convey a tone of approachability and friendliness.

Design System

Color Palette

The color palette is intended to convey a warm, supportive, and energetic tone.

Typography

PT Serif was chosen for its classic design, which lends itself to easy reading.

Avenir was chosen for its clean, modern, and elegant design.

The illustrations were created in Illustrator using a combination of the color palette and the gradients. The style is intentionally rounded so that there are no sharp edges, creating a sense of gentleness and comfort.


Through interviews with CF patients, we learned about their key considerations when family planning. These insights informed MyPlanCF’s 6 sections: Nutrition & Health, Medications, Disease Management, Infant Feeding, Sleep, and Community.

Reducing Overwhelm By Breaking Key Considerations Into 6 Sections

Each section offers a variety of educational content, from tips and strategies to videos featuring moms with CF, to peer perspectives on maintaining a CF care routine as a parent.

The risk of cross-infection prevents individuals with CF from meeting in-person, so online CF communities are widely used. The Community section provides links to popular online CF communities where users can connect with and support each other.


Design Challenge #2

How might we effectively guide decisions about breastfeeding?


We wanted the tone of MyPlanCF to remain neutral and unbiased as it relates to infant feeding. Many women cannot or do not want to breastfeed, so we created the Infant Feeding section to enable the exploration of all options, with an emphasis on discussing further with CF care teams.

Shifting The Focus From Breastfeeding to Infant Feeding

In this section, users can explore infant feeding options, such as breastfeeding, bottle feeding, formula feeding, and milk banks. Video tutorials provide educational support. The “Favorite” feature enables saving to “My Profile” for future discussion with doctors and support networks.


Design Challenge #3

How might we facilitate personal reflection about family planning options?


In addition to functioning as a decision aid, the goal of MyPlanCF is to offer users information that empowers them when discussing family planning with their doctors. The “My Reflections” feature enables thoughtful interaction with topics and facilitates meaningful future conversations.

Incorporating Personal Reflection Into The Decision-Making Process

Users can also save questions and topics of interest to their profile, which can be revisited at any time, both for personal reflection and for conversations with support networks and CF care teams.


Design Process

01 | Wireframes

02 | Mid-Fidelity Screens


To ensure information accuracy and desired usability, my design partner and I conducted usability testing of our mid-fidelity screens with 2 target users.

Usability Testing

User Feedback Excerpts

The following samples from our usability testing illuminated common priorities and pain points for mothers with cystic fibrosis, which subsequently informed our design.


ANNOTATED WIREFRAMES

Onboarding Screens


Preference Screens



Profile Set-Up Screens


Homepage


Section Pages - Nutrition & Health


Section Pages - Medications


Section Pages - Community


My Profile


Saved Notes — Topics of Interest & Saved Questions


Reflections