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