Designing a Mental Health App for Expecting Mothers

May 2023 — August 2024

Moment for Parents is a startup committed to supporting mothers through pregnancy and their postpartum experience, providing a mental health app that guides users through reflection exercises via an AI-powered chat experience.

I spearheaded the design overhaul of the mobile app as the sole UX Designer at Moment for Parents, collaborating with the CEO, software engineer, and content strategist to relaunch the app. By September 2023, I developed a high-fidelity prototype and established a robust design system to streamline implementation and support future feature expansion.

Understanding the Target User

I began by conducting one-hour discovery interviews with 10 pregnant women to develop an understanding of the challenges our target users face as they transition into motherhood.

Creating an affinity map, I analyzed 140 interview quotes to identify recurring themes shared by the interviewees.

Challenges

Asking for Help & Support
Judgmental Online Forums
Internet Rabbit Hole
Changing Family Dynamic
Finding a Work-Life Balance
Limited Time for Self-Care

There's so many different resources, and a lot of them are great and beautiful and helpful. Some of them are not in any way. They're polarizing and they create this ‘us’ versus ‘them’ community, which I don't love.

Before we decided that we wanted to try to have children, I thought one important thing for me was that I didn't disappear in the whole process, you know? I think that's a concern I have as a woman and as a person who has done that in other stages of my life. I fully anticipate that having a newborn would be so all-consuming, and I'm very good at throwing myself into a situation in which I just become the thing I need to take care of.

Overall, the pregnant women I interviewed discussed challenges with preparing for birth and motherhood in a landscape of conflicting parenting advice and judgmental online communities. They expressed a desire for judgment-free resources that empower informed decision-making, as well as a space to prioritize self-care within their limited time outside the demands of work and motherhood.

Identifying Design Issues

To kick off the app redesign, I conducted a design audit of the company's brand kit and mobile app (formerly known as Poisera). The key issues I identified in the app included a weak typographic hierarchy, inconsistent UI elements, and insufficient color contrast for accessibility. I also noted usability issues from a previous usability study — some users didn't recognize the chat quick reply buttons as clickable elements, and others expressed discomfort over the lack of an option to withhold their children's information during onboarding.

screenshots of the archived Poisera app with annotations of design issues

Creating Wireframes

Following the design audit, I created a set of wireframes to determine the content and layout of each screen.

Objectives

Establish Visual Consistency
Address Usability Issues
Streamline Onboarding Flow
Add Library & Account Screens

wireframes in greyscale for mobile app design

Developing a Design System

Since the startup was simultaneously undergoing the process of revamping their brand identity, I began the process of developing a design system by creating mood boards for potential brand colors. After gaining consensus from the team, I defined a color palette of tints and shades for each brand color, as well as neutral and semantic color palettes. I also went through the process of selecting new brand typefaces, landing on Work Sans for headings due to its inviting, minimalistic style.

Because there wasn't an illustrator on the team, I needed to find a cost effective and flexible source for app illustrations. I discovered the perfect solution in Storyset, a large library of high-quality vector illustrations with relevant content to mental health and motherhood.

I further fleshed out the design system foundations by defining the typographic hierarchy, 4-point grid system, and set of icons customized icons from Google Material Symbols.

screenshot detailing color palettes, icons, illustrations, and typography

While developing the high-fidelity prototype, I added components to the design system for recurring UI elements, complete with defined variant properties. Within the design system, I also created a page to document recurring design patterns. By creating this design system, I established consistency across the mobile app and provided a scalable framework to support future development and collaboration.

Creating a Hi-fi Prototype

I developed an interactive high-fidelity prototype to showcase the complete app experience. The screens — created with auto-layout frames — streamlined development by enabling the software engineer to seamlessly convert the designs into React Native code using a Figma plugin.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

click to play

Managing App Updates

After the app relaunched in September 2023, I continued to manage app updates by designing new features and maintaining the design system. For instance, I recommended integrating a "to-do" list to the home screen based on feedback from usability testing to provide users with more daily content and a sense of accomplishment. In August 2024, I implemented additional design changes to support new initiatives by the CEO and content strategist to develop guided support plans.

Lessons Learned

This experience strengthened my ability to take ownership of the entire design process from concept to launch. Through working closely with a cross-functional team, I grew more confident in communicating design decisions to non-designers, learning to balance the creative vision for the app with practical, developer-friendly solutions to streamline implementation.