Babycenter app - my pregnancy and baby today app design. UX, UI Designer in San Francisco

THE DESIGNING OF: MY PREGNANCY AND BABY TODAY APP RE-DESIGN

HOW MIGHT WE IMPROVE THE TRANSITION EXPERIENCE FROM PREGNANCY CONTENT TO BABY CONTENT FOR OUR USERS?

 

In 2015, BabyCenter had 3 individual apps for parents in different stages of parenting: One for pregnancy, one for parenting a child in it’s first year, and one for parenting beyond a year old.

 

BabyCenter had three apps in 2015

 

We found that pregnant women actually are eager to come back each day to read and re-read content for both their week and weeks before and into the future. Once they have their children, we found that they lacked the time to come back daily, and come back weekly instead.

 

So we decided to combine our pregnancy app and our baby app into one: My Pregnancy and Baby Today.

 

 

PROJECT GOALS

 

  • Modernize the look and feel of the app
  • Improving engagement with the tools tab
  • Increase longevity of the app for users by improving the transition rate from pregnancy content to baby content.
  • Adhere to native OS constructs for navigation, interaction, and iconography

 

 


 

MODERNIZING THE APP

 

comparing the old and new calendar feed in babycenter's apps

THE CALENDAR

  • changed from one long feed of content to weekly feed
  • removed the “bands” of color and replaced with a modern “card style”
  • added more photos to articles to improve view-ability
  • added the “dial” at the top that grounds user in their week
  • Improved the use of colors in the app

 

The modernizing of the calendar was mostly done through design. We took on a new “card style” approach, included more full width featured images, and created a more subtle solution to separate out the content for each day. The “dial” at the top is the biggest improvement. It tells the user what week of pregnancy she is in or weeks old her baby is and how far she has to go. The user can also tap on the circles to the left and right to visit other weeks, where previously they had to just keep scrolling down to get to the following week’s content.

 

 

 

 

 

Calendar Testing

One of the biggest questions we had when designing the calendar, was “how can we get mom to come back daily to read more content? Does she even want to come back daily? Or would she prefer weekly?”. We created different iterations of the calendar that allowed us to test these questions.

 

 

 

Babycenter's My Pregnancy and Baby Today app - navigation ; LorettaMay Design - Senior UX Designer in San Francisco

 

 

NAVIGATION

While the navigation construct on IOS didn’t change drastically, we made huge strides in adhering to Android constructs by following the material design guidelines. Rather than using 4 tabs with icons at the top, like our previous app versions, The android app uses three tabs at the top with a side drawer for all the user settings. This approach has allowed us to create designs that feel more native to each platform.

 

Comparing the old app tools and the new tools tab redesign

TOOLS TAB

  • Changed from list view to icon grid to save space
  • Developed an icon system based off user testing preferences

To start with, the My pregnancy Today and My Baby Today tools had very low usage compared to the calendar. The previous navigation tabs for both my pregnancy today and my baby today apps used a list view approach which felt very bland and wasted a lot of space. The icons were simple outlined representations of the tool itself and after we had created a number of tools, it seemed that it was harder to find the tool  you were looking for due to the fact that all the icons were the same color. We decided that placing icons in a grid of circles would save space and using multiple colors would allow for more differentiation.

 

 

TESTING THE TOOLS TAB

Testing Babycenter tool tab options

The tools tab made the most improvement in design and was tested. We tested two iterations: Version A and Version B.

 

Users liked the size of version A icons because they could see them all on one page. Users did not like the size of version B icons because they had to scroll to see all the tools. They also did not like the faces on the moms. They did like the more detailed look for version B.

Version C was our iteration that came out of testing A and B. When we later tested C, reactions were overwhelmingly positive, which validated the design.

 

This testing helped us develop a set of rules around iconography:

 

 


 

IMPROVING ENGAGEMENT

ICONOGRAPHYBabycenter Tool icon design by LorettaMay Design : Senior UX/UI designer in San Francisco

The previous apps used the popular thin outlined style that came with IOS 7 for the app’s icons. We used icons mostly for navigation and to represent tools. During the re-design, we tested multiple styles of icons and chose the finals based off insights that came from user testing.

 

 

FULL COLOR

After testing all the different styles, we learned that users felt most delight when seeing more illustrative and full color icons instead of simplified outlines.

Testing icon styles for the my pregnancy and baby today app

 

 

MULTIPLE ETHNICITIES

In the past few years BabyCenter has made huge efforts in representing mothers of all ethnicities in our brand photography. We continued that effort in the app through representing icons of people in different skin tones.

 

Designing icons for the my pregnancy and baby today app - UI design by Loretta Robinson ; Senior UX designer in San Francisco

 

 

 

 ORGANIC SHAPES

With every designer that contributes to the look and feel of a company’s brand, there will be slight variations in style, especially with of iconography. When I started, illustrations were only used on the site for technical style drawings of products or of concepts we couldn’t easily photograph. In the app, we had more freedom to use illustrative icons in more places. We decided to switch from geometric shapes to drawing more freehand organic shapes so that the illustrations looked more friendly and real. I felt validated in my decisions when users gave positive feedback every time they saw the icons.

 

switching to more organic shapes for icons

 


 

IMPROVING THE TRANSITION EXPERIENCE AND INCREASING LONGEVITY OF THE USER

The number one reason for re-designing the app was to increase conversion rates once a pregnant user became a parent. The problem we were facing was that once a user got to the end of their pregnancy term, they either didn’t come back to learn to download the baby app or the effort was too great with a newborn to bother. In result, only about 30% of our users were continuing on with our baby content.

 

This meant that we spent all this effort on an app that people would only be using for 9 months.


RESEARCH

After compiling some competitive analysis, we saw that some apps in the pregnancy space choose to assume mom has had her baby on her due date and start serving her content for new moms. We believe that this approach is insensitive to the majority of mothers who do not give birth on their due dates, especially those who experience loss. We knew we could do better.

2015-04-20-10-05-15-2 2015-04-20-10-05-36 2015-04-20-10-05-52

 

 

 

So how were we going to get mom to tell us that she has had her baby?

 

UX sketches for transition to baby flow UX sketches for transition to baby flow UX sketches for transition to baby flow

 

 

USER TESTING

We tried and tested several iterations until we found the perfect balance between attention-grabbing, delightful, and un-obtrusive.

Our goals were to get her attention without annoying her, taking a pause to delight and congratulate her, and then asking for important information we needed to serve her up the right stage of content. It all had to feel seamless and quick.

 

Babycenter app - transition experience process

 

 

 

Babycenter - Pregnancy to baby flow - UX

THE ANIMATION

We took an MVP approach to designing this interaction by animating the congratulations screens in-house. I created a simple animated gif that we then tested in a prototype with real users. The response was wildly positive. Users felt appreciative that we paused to give them a moment of delight and show our enthusiasm for the birth of their child. They liked the animation so much that we kept the original concept and didn’t spend the extra budget to have it done in an outside agency.

One learning point was that it was actually easier for IOS to take the assets I created and code the animation. The android developers needed an .mp4 format video instead of an animated gif.

 

 

 

 

 

Credits

It took countless hours and many individuals across multiple teams to create this app. I can’t name everyone, but here are a few of the core team:

Art Director: Amanda Wu
Senior UX/UI Designer: Loretta Robinson
Product Manager: Stephen Klop
Mobile Lead: Jully Lau
IOS Developers: Alex Leit, Amir Rezvani, Scott Richards
Android Developer Leads: Austen Lux, Brandon Carter

 

The Calendar tab design and UX was done by Amanda Wu
The Tools tab and More tab were designed by myself. See the full project

No Comments

Post a Comment