BabyCenter Pregnancy Tracker & Baby App
Overview
BabyCenter LLC is an online media company based in San Francisco and is a member of the Johnson & Johnson family of companies. They are the #1 pregnancy and parenting digital destination, reaching more than 45 million parents a month in every corner of the globe through its 11 countries and supports nine languages. In the US, 8 out of 10 moms online use BabyCenter each month.
My Role
As a senior UX designer, I am working in the consumer division of the creative department, which supports all BabyCenter content and mobile development work with the product and development teams. I’m experienced working with iOS and Android platforms, responsive web, social and content-rich products. I’ve created wireframes, interactions, comps, prototypes using UX design tools such as Sketch, InVision, Adobe CC, etc.
Challenge
Profile Re-design
Re-design profile and adding baby loss handling option
The profile section of BabyCenter apps needed redesigning because many of the users had difficulty using the profile options to add a pregnancy or child and report a loss from the app. The stakeholders weren’t happy with the negative feedback from the users and the need for a redesign to increase the user engagement.
Problem-solving process
I was informed by our stakeholders that all user must go to the mobile web or a desktop to make an edit to there profile. Knowing this, I worked on conducting a research study on our competitors, interview with Stakeholders, creating A/B testing for the existing apps and gathering the user feedback. I also prepared a user flow to gain insights into the full process users must go through to properly use the app profile options.
*Baby profile management
Users pain points
Primary and secondary personas were created by the Art director and used to develop a journey map. I visualized our primary persona’s experience using the app and realized what can be added in our app profile handling options. I suggested that I can create a new design flow for a status change, create a new user flow for handling pregnancy, trying to conceive, baby loss and adding an option to add a new pregnancy or child. Also, granting access to the user to edit the profile from the app instead of the website.
Takeaway
While there is no question the profile section for iOS and Android app were confusing to edit, my solutions solve user pain points. I discovered through my research that the difficulty editing profile leads to drop the engagement occurred on the apps. Users were not able to use the app to make changes to their profile, add or delete the child profile from the app.
Design Solutions
With the information gathered, I decided this would be a two-part project in order to help solve the issue of profile handling. First I focused on creating a baby loss flow which didn’t exist, and second I redesigned the entire profile section for iOS and Android apps.
*Report a baby loss or remove a child from the profile
Profile handling and report a loss comps
Results
I made revisions following the usability test, and I build a prototype using InVision to show the full flow of the profile handling process.
The final design added steps not previously included in the original design plans and was a start to help solve the editing profile issue from the app. In addition to the final deliverables, I provided recommendations to make adding a new profile easier through the app. My suggestions may help moms who are using BabyCenter app on a daily basis.
The stakeholders and our users were happy with the outcome of my design, and they were excited to proceed with next steps using the design solutions.
*Baby loss flow
Photo Bumpie Tool
Photo Bumpie tool is a free photo tool for moms that make it easier than ever to document pregnancy using a smartphone or point-and-shoot camera. Bumpie photo diary is a simple pregnancy photo tool to capture weekly belly pics and turn them into a fantastic time-lapse Bumpie video to share or keep as your pregnancy journal.
My Role
UX designer, Tools: Sketch, InVision, Photoshop
Challenge
Our stakeholders informed me that the photo Bumpie tool on the BabyCenter app needs redesigning to increase user engagement. They weren’t happy about the old look and feel of the tool and showing to many empty slots for the photo album and ask me to redesign the entire photo tool to make it look modern and practical for our users.
User Pain Points
The biggest pain points of previous photo-sharing app were flow and the basic functionalities of the photo tool which didn’t satisfy the user needs. I began with gathering research, studying other photo apps and sketching new wireframes. There were no photo filters, no timeline, the album view showed many empty slots which is depressing. For video slideshow, there were limited video functionalities and no smart upload options such as choosing existing photos from the app timeline and no geo-location functionality. I found that the best practice for the photo diary tool on the app is to combine and integrate the Bumpie photo and Baby memory photo on the same timeline instead of separating them as tabs.
Wireframes
Design Solutions
With the information gathered, I’ve created a new user flow, and I focused on creating a timeline offering two views – gallery view and timeline view. I’ve created the timeline because the stakeholders wanted to run adds on the Bumpie tool. I design the continuous timeline with scrolling top to bottom. I showed the week info on top of each photo and a label on the picture. By clicking on the three dots on the top right of the timeline photos the user can add a photo detail, share, edit the description, or delete an image. I created a photo editing tools package for taking a Bumpie photo such as photo filters, crop tool, and stickers.
*Photo Bumpie tool design flow
One of the other major pain points for the user was creating a Bumpie slideshow. Users have difficulties selecting multiple images from the library, limited audio, songs, and limited sharing options. I redesigned the slideshow flow and its functionalities to allow users to have more freedom selecting photos from their timeline or browse from their phone and not be limited to the specific week only. I’ve created a music library with the verity of songs to select from for the background audio.
The full video editing functionality for creating a video is easy to use for our end users. Users have options to edit, move, add or delete images in the video editing mode or skip editing mode and quickly create their videos and share it on their timeline and via social media. Our user can save the different version of videos, and there are multiple sharing options for social media.
Results
My app re-design simplified flow and helped our users needs. It brings joy and delight to users daily lives. They can use the pregnancy photo tool to capture weekly belly pics and turn them into a fantastic timeline, and Bumpie videos to share or keep as a pregnancy journal. The final design added futures and modules not previously included in the photo Bumpie tool. The stakeholders were happy with the outcome of my design.
