Fovi Postpartum Coaching
How do we help women talk about
their postpartum symptoms?
Fovi Postpartum Coaching App | UX + Visual Design
Duration: 4 weeks
For a 4-week group assignment in my Product Design Studio class, we worked in teams of five with a local client. Our client, Chelsea, is the founder of a text-based postpartum coaching service called Fovi.
Fovi was created to fill the gap of care after delivery. From our first conversation with Chelsea, we learned that there are several common physical and mental conditions that women experience after delivery, however they lack the resources and support. In order to help women diagnose and manage these symptoms, Chelsea introduced Fovi, initially as a text-based service but with the intent of creating a mobile app. As she moves towards a mobile app, Chelsea required help with determining the look and feel of Fovi. The only constraint provided by the client was to avoid exaggerated feminine styles (color, typography, etc.).
Establish a visual identity for Fovi
Create high-fidelity screens for user testing
Platform: Native mobile app (not Apple- or Android-specific)
User: Prenatal and postpartum women in the U.S. with mild to moderate symptoms
In order to ensure we delivered the product in time, I developed a project schedule and assigned roles based on each team member’s strengths and preferences. For the product definition phase, we were split into two teams: three members worked together to develop low-fidelity wireframes, while I worked with a team member to create a lightweight design system and develop the copy.
After speaking to Chelsea, we quickly realized her top priority was the on-boarding flow. The on-boarding flow needed to be engaging and trustworthy to encourage users to not only feel comfortable about speaking about sensitive and sometimes awkward topics, but also understand the value of sharing this information. As a result, our guiding question was:
How can we build trust upfront so that users are more honest and forthcoming with their postpartum needs?
I worked with the team to sketch the typical onboarding flow to help guide the development of wireframes and copy.
Because Fovi lacked any visual direction — color, illustrations, typography, etc. — our first step in building a design system was to create moodboards for inspiration. The moodboards not only inspired color palettes, but also helped us articulate the brand identity and values of Fovi.
Based on an examination of our moodboard and color explorations, we identified four common themes, which we aimed to communicate through our design:
DeSIGN SYSTEM HYPOTHESIS: CREATE A DARK THEME
Chelsea indicated that women typically utilized Fovi at night, therefore there is a need to design a mobile platform that limits sleep disruption. Our first instinct was to create a dark theme to be mindful of night-time use.
We created a color style guide based on a dark theme, but to visualize what the theme would look like, we applied it to two main screens: the landing screen, and an on-boarding screen.
While we thought we had effectively solved the need for a night-mode as well as a not-overly-female color scheme, we learned that the screens failed to communicate a sense of comfort and warmth. We also realized that we over-emphasized the need for a night-mode, because most women would not be on-boarding in the middle of the night, and in service of avoiding stereotypically feminine colors, we failed to indicate this was a women’s health app.
With all of these insights in mind, we were back to the drawing board to create a new design system that better communicated our core values.
wireframe hypothesis: ask all questions upfront
Fovi’s core value is in its personalized symptom tracking, coaching, and exercises, which requires users to provide information upfront about their prenatal and postpartum experiences. Our first wireframes asked all the required questions upfront, so that the users would see a personalized dashboard after completing the on-boarding process.
We learned that by asking all of the questions upfront, we increased friction and risk that the user would abandon the process. As a result, we decided to change the user flow to begin with the basic profile information (name and email), and then give the user the option to continue the on-boarding process or jump into the app itself.
Lightweight Design System
I spearheaded the rebuild of the design system while my teammate worked on the copy and fine-tuned symbols. Based on the input we received from classmates, the client, and our instructor, we chose to move forward with a light theme, to better convey calmness and support.
Based on the wireframe, we divided the screens. I was responsible for the introductory screens including: landing, value propositions, name input, and user type.
In total we created over 70 screens to indicate the difference in copy based on user type (prenatal or postpartum), highlight error states, and illustrate various states (e.g., default, active, complete).
To maximize compatibility with Web, Android, and iOS, our instructor recommended that we design for an iPhone 8.
We wanted to communicate the purpose and value of Fovi upfront to encourage users to sign up. We chose to present this information in a more approachable and engaging way by placing each value proposition on a different screen.
Each screen on the on-boarding flow features a casual, personal, and conversational tone to maintain the human touch that is present in Fovi’s current text-based service. We also felt this tone, along with frequent messages of encouragement, would further alleviate any concerns or hesitations, and create a safe space for users to provide honest information about their prenatal and postpartum experiences.
We originally had a laundry list of questions that our client wanted to know upfront, but we worked with her to separate the items into must-haves and nice-to-haves. Our final design gathers the information needed to construct a personalized dashboard (the must-haves), with the hypothesis that once the user sees the value of their input, they would be more inclined to provide the nice-to-have information. Upon client request, we included a few nice-to-have questions in the onboarding flow, however these questions also included a “Skip” option to reduce any friction. The form also dynamically adjusts based on the user’s responses to avoid questions that do not apply to the user.
Rather than concealing sensitive responses, such as loss of pregnancy, we wanted to list it alongside the other options to indicate that it is not something users need to hide or should be ashamed of.
As we were defining the project plan, I was excited to include and be a part of the development of a design system because it allowed me to dive into the world of color, typography, UI components, grids, and more. It also effectively facilitated the process of working with a group of designers by ensuring consistency and alignment.
One of the biggest realizations of this project is the critical role of visual design. I was unaware of how powerful a change of theme (dark to light) can be for the overall perception of and experience with the product. When shaping the visual design, we had the brilliant challenge of not only establishing the product as a reliable health service but also creating a calm and soothing space to openly talk about sensitive topics. While I feel we made great progress on the visual design throughout the course of the project, I feel it has not quite hit the target, and so I am curious to continue exploring other styles.
Lastly, I strongly emphasize the need for feedback throughout the process — from defining the design system through high-fidelity mockups. The feedback provided by my classmates, client, and instructor was valuable, but it would have been more beneficial to talk to prenatal and postpartum women especially given the sensitivity of this topic.