Helping parents get more support with Babycenter
How combining two apps into one was the best move for Babycenter to increase the LTV (life time value) of their users.
Overview
Synopsis
Babycenter is a leading resource for pregnancy and parenting. The Mobile Art Director and I worked together to re-design and consolidate BabyCenter’s two apps into one in order to extend the lifecycle of our users. 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.
Details
Team: Mobile team
Platforms: IOS/ Android
Role: Senior Product Designer
Timeline: 6 months from start to finish
Skills: UX/UI, Usability testing, Animation,
Problem
In 2015 Babycenter had 3 apps, each for different stages of parenting.
We found that even though BabyCenter provided an additional 2 year’s worth of valuable advice and content for new parents after they gave birth, most weren’t discovering the second app at the right time. This resulted in a huge drop off of use in our second app, My Baby Today. This meant for every dollar we spent acquiring new users, we only kept them for 9 months instead of over two years.
My Pregnancy Today
My Baby Today
Mom Feed
The company made a decision to combine My Pregnancy Today and My Baby Today apps together into one app.
Goals and metrics
Increase user LTV
We needed to increase user LTV (life time value) and prolong the use of Babycenter apps beyond the 9 months of pregnancy.
Update the visual design of the app
Both app visual styles were very out of date. Their color palettes were limiting to work with and the icons were not engaging or expressive.
Design audit
We reviewed both apps and catalogued some of the visual design and UX issues. Here are just a few on the home tab.
Project one
Tools revamp
While my art director focused on making improvements to the home tab, I focused on improving the tools tab, and settings tab. In addition to updating the visual design, we needed to think through how mom would access both pregnancy and baby tools once she had her baby.
How might we make the tools tab more engaging and versatile to show both pregnancy and baby tools?
Updating the illustration style
I carried out an exploration of migrating our simple icons into spot illustrations. This coincided with my explorations on revamping our tools tabs. My goal was to give the spot illustrations more visual interest and expressive of the Babycenter brand. I explored these elements:
Transitioning from single stroke icon to multi color fills
How to depict people and how much detail to show
Making our human forms from organic shapes instead of geometric
Ensuring all ethnicities were represented
User testing visual designs
While I explored different spot illustration styles, I also explored how best to depict our tools in the tools tab.
We conducted moderated in-person interviews with 6-8 existing users. We tested options A and B against each other, trying to understand how users felt about detail of the icons versus scrolling or not scrolling.
Findings
Most users preferred the higher fidelity colors and designs but did not like seeing faces on the people.
We Also learned they did not prefer to scroll in a 2-up layout.
Outcome
We combined the 3-up layout of option A with the higher fidelity and color combinations of option B to create a final design of option C.
Project two
The transition moment
One of the major challenges in presenting the baby content was knowing when to do so. The timely information on the stage of the baby is defined by the mother’s due date but every pregnancy term is different. Some mothers give birth early, some late. Some have miscarriages or complications, and our number one goal was not to default mom into baby content when the time was not right.
Congratulating a mother when she was 40+ weeks pregnant, sore, tired, and ready for the baby to be born could be seen as frustrating and annoying.
Congratulating a mother who had miscarried was completely insensitive and inappropriate and a missed opportunity to show support in other ways.
Of we congratulate a mother too late after she’s given birth, we’ve already lost her. She’s likely distracted, and mentally exhausted with her new child and unlikely to return to an app about pregnancy.
How might we get mom to signal she’s had her baby so that we can transition her to baby content.
Competitive audit
We reviewed several competitor apps, mapping out the journey in the last few weeks of pregnancy to see how other apps handled this transition point.
Some apps did nothing or automatically defaulted mom into baby content
Some apps terminated their content and support after 40 weeks. The congratulations was not intelligent and was solely based off the mother’s due date. This is the exact behavior we wanted to avoid.
Some apps prompted mom to input her baby was born
Some apps persisted a weekly prompt asking if mom has had her baby yet on prominent tabs. The weeks this prompt began to show up varied from week 36 - week 39 of pregnancy. This was a delicate balance. Showing too early could prove annoying and unhelpful.
Some apps gave mom a way to signal she has had a loss
I thought this was an important moment to acknowledge and support. Babycenter had content and community forums for these very use cases.
UX Goals
Get mom to tell us when she had her baby
Provide a moment of delight with an animated congratulations
Capture the baby’s birth date, photo, weight, and measurements in order to provide the appropriate content matching the the baby’s age in weeks.
Make the transition moment feel easy and seamless
Concepts
I took a hand-holding approach and a light (MVP) approach to what we could do in this moment. I pushed hard for the guided approach, but the team overall preferred to start small and build upon this experience, rather than investing too much time in the first launch.
The hand-holding approach gives parents an opportunity to announce their baby’s birth with a Babycenter branded visual that could be shared on social media.
It also has a few interstitials of on-boarding to the new experience.
The team felt an on-boarding flow was un-necessary for an existing user and decided not to prioritize this work.
They also thought the announcement idea was a nice-to-have, saved for another iteration, once we learned from the launch.
We moved forward with this approach, choosing to focus on nailing the moment of delight.
Designing the prompt
Explorations:
In-feed card style
sticky banner
modal style (not shown)
Variations:
Date of birth input
Announcing the gender buttons
One single button
Animating the transition moment
As soon as mom selected “Tell us the birth day”, we wanted to pause to say congratulations and make this a moment of delight.
I designed and animated a smiling baby that hovers as hearts pop in. The animation scrolls up off the page and presents a form about the baby’s birth information, which would help us provide the right content timed to the baby’s age in weeks.
I created this animation as a placeholder and we tested it with users, only to find that moms loved the baby animation so we kept this in the final product.
Outcome
We launched the final app My Pregnancy and Baby today 6 months after beginning the project. In subsequent testing, we found moms loved the visual design improvements. I left the team shortly after launching so I don’t have any insights into how successful the product changes were.
What I would do differently
Unfortunately, at the time Babycenter did not have the resources to conduct evaluative testing for all parts of this app re-design before beginning development. I would have preferred to test some of the fundamental architecture decisions that were decided without any research in order to have confidence in the directions.