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?
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.
- 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
- 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.
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.
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.
- 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
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:
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.
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.
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.
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.
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.
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.
So how were we going to get mom to tell us that she has had her baby?
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.
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.
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