Project overview

The Mobile Art Director and I worked together to re-design BabyCenter’s two apps into one. We focused on improving more native navigation, improving the transition of content from pregnancy to baby, and re-skinning the app with an updated visual design.

Project details

Team: Mobile team

Platforms: IOS/ Android

Role: Sr. Product Designer

Timeline: 6 months from start to finish

User problem

In 2015, BabyCenter had 3 different apps for different stages of parenting. We found that even though BabyCenter provided an additional 2 years worth of valuable advice and content for new parents, there was too much friction to find it. This resulted in a huge drop off of use in our second app, My Baby Today.

My Pregnancy Today

Babycenter's My pregnancy today

The leading pregnancy resource for moms-to-be.

My Baby Today

Babycenter's My Baby Today App before the redesign

A resource for parents of newborns through the age of 2 years.

Mom Feed

Momfeed

A parenting resource full of articles and social content for parents with children over the age of 2.

Design problem

HOW MIGHT WE CELEBRATE THE TRANSITION FROM PREGNANCY TO MOTHERHOOD AND HELP NEW MOMS DISCOVER BABYCENTER’S PARENTING CONTENT.

Product design - combining two apps into one

Design Objective

While the primary goal was to help new moms find the right content and continue to be supported by BabyCenter on their journey through motherhood, we had some additional goals as well:

 

  • Improving the navigation constructs
    • Make the navigation patterns more native on each platform
    • Introduce a new mechanism to switch between weeks on the calendar view

 

  • Improve the transition from pregnancy to baby experience
    • Solve for multiple profiles on the same account
    • Prompt mom at the right time to trigger the baby content

 

  • Update the visual look and feel
    • Add more icons and spot illustrations
    • make images larger
    • add more affordance on clickable buttons and navigational items
    • update the color palette

NATIVE NAVIGATION

Previously Android had tabs on the top of the screen and IOS had tabs on the bottom. Our goal was to adhere to a more native pattern for Android, which at the time was using a material design drawer menu. We tested the side drawer with Android users and found it more intuitive to use.

 

The dial

My art director did several iterations of how to switch between
The circular “dial” tells mom what week of pregnancy she is in and she is now easily able to navigate forward and back to other weeks.

IMPROVING THE TRANSITION FROM PREGNANCY TO BABY EXPERIENCE

Spot illustration - stork carrying a smiling new born baby by Loretta Widen - for BabyCenter

The number one reason for re-designing the app was to increase conversion rates once a pregnant user became a parent. We set out to create a simple flow that would pause and say congratulations and then ask for the information we needed to transition the user into receiving “child” content.

Competitive Analysis: Transitioning from Preg to baby

At the time a lot of competitors had already made a switch from multi-app to two apps. I studied what sort of prompts and messaging were asked.

Competitive analysis done for Babycenter

Findings:

  • Some apps like What to Expect placed a sticky prompt as early as 36 weeks pregnant. It forced moms to acknowledge the prompt with a yes/no answer daily, which we hypothesized would cause a lot of friction and anxiety around expected due dates.

 

  • Some apps hid a prompt in the profile section of the app, rendering it less obtrusive but also less visible or effective.

 

  • Apps like Glow prioritize data collection and as soon as a mother marked that she had given birth, the app requested a lot of additional information about the baby, such as weight, length, and head circumference as well as birth details.

 

  • Other apps like The Bump provided delightful experiences by adding a moment to say congratulations before prompting for other information.

Journey map

A mother’s journey from conception throughout her pregnancy and into motherhood is marred with so many moments of discomfort, volatile emotions, and self-doubt. Pregnancy terms are also not a one-size-fits-all experience. Every pregnancy starts out with a 40-week term, but some mothers give birth early, and some late. The key moment that we needed to solve for was getting mom to tell us she had given birth and was now ready for baby content instead of pregnancy content. This was the crux of this entire re-design.

 

Why is this signal so important?

Traditionally in the My Pregnancy Today app, at the end of 40 weeks, the app would end with a “congratulations! You’ve had your baby!” and provide a small prompt to go download the next app. This approach was not very intelligent or personalized to each mom’s unique experience.

 

  • Some mothers have their child late and do not appreciate BabyCenter assuming they have had their child.

 

  • Some mothers have their children early, and by the time we run out of content, we have missed the opportunity to tell them about the next app and they are no longer thinking of the app.

 

  • Lastly, some women suffer a loss at birth and the app does not take that into account. The messaging of “congratulations” is completely inappropriate at that moment and Babycenter has again lost the opportunity to be intelligent and show support.
Babycenter User Journey

Finding the right prompt

We weren’t sure how prominent we should make the prompt. We explored both an inline approach and a sticky approach.

 

Inline:

The inline approach was larger and had more room for visuals and buttons. The downside being that it would be more difficult to place it on multiple weeks.

 

Sticky:

The sticky solution has a more prominent placement, but less real estate to add in the messaging and buttons needed.

BabyCenter In-line prompt
BabyCenter sticky prompt

Visual Audit

Because we were starting from scratch with the code, we saw this as a huge opportunity to update the color palette and the visual look and feel of the app. We would focus on these things:

 

  • Bringing in more spot illustrations and more detailed iconography

 

  • making images larger and interactive when appropriate

 

  • Improving affordance for clickable buttons and objects

 

  • Updating the color palette
Babycenter App Visual design issues
Babycenter Apps design

PROCESS

To read more about the design process, check out the case study on the blog

Credits:
It takes a whole team to design mobile IOS and Android apps. Here are just a few that made it happen.

 

Design:
Art Director: Amanda Wu
Senior UX designer: Loretta Robinson

 

Product Management:
Stephen Klop

 

Developers:
Jully Lau
Alex Leite
Amir Rezvani