Overview: The growth tracker is an important tool that is frequently used on the Babycenter mobile application and on the responsive website, www.babycenter.com. It allows mothers to track their child's growth and provide them with medically accurate information regarding their children's growth rates. In early 2017, the user experience on the Babycenter mobile application was completely redesigned but the responsive web portion was left outdated.
Role: I was the only UI/UX designer for this project.
Responsibilities: User flow analysis, wireframing, usability testing, and user interface design.
"Simply copying the mobile experience onto the website would ultimately create a incomplete and poor user experience overall for the tool since certain user flows wouldn't be accounted for."
The Growth tracker tool on babycenter.com currently has 2 user flows: a logged out and logged in flow, whereas the mobile application only has one user flow: a logged in flow.
The experience for the web tool would need to address certain user flows and interactions that do not currently exist on the mobile application.
Designed a new experience and interface for Babycenter's growth tracker tool on responsive web that incorporates all user flows and edge cases.
1. Understanding the current user flows and addressing different edge cases.
When I started this project, what seemed like a simple addition of a "logged out" with the "logged in" user flow into the responsive web seemed like a quick project to solve. As I was doing a user flow analysis, I quickly discovered that this turned into a more difficult problem...
Various edge cases was discovered during the initial research process as you can see below:
Questions I asked in response to the current understanding of the user flows:
How many new edge cases are there in responsive web user flow?
Viewing these new flows, would it affect the form, for data input, users have access to?
Logged out users have gated access. How would these form fields be different? Would they be different?
Being a visual person, I went to the whiteboard and sketched out different ideas on how to solve this problem. I sketched out the different flows and questioned what additional input fields were needed to for each use case to get to the same destination, the growth tracker data. At the same time, I had to think of the what the growth tracker table would look like, how the percentages would show, and how to incorporate existing data views and create an edit data flow.
I had to shift my focus to figuring out how would the form fields change and at what point would users see the same forms or different forms (additional input fields and blocked fields).
2. Establish that each edge case would have specific flows that would ultimately lead them into the same place. How do I get there?
I established and designed out a new user flow that addresses which specific forms are necessary for them to complete and what access do they have (gated versus non-gated access).
The ultimate goal was to get every user to the growth tracker screen.
To improve design hand off, interaction descriptions were incorporated into the user flow breakdown to show what would happen in each situation.
Final design on here
Different form fields
The left shows the form for 1. a logged out user who doesn't have a child yet and 2. a logged in user without a child. These two users are missing essential information that's needed for the growth tracker. They both would need to enter these additional fields in order for the tool to calculate their first sets of data before arriving onto the growth tracker dashboard.
The right shows the form for a logged in user with a child with the minimal fields needed to add data to the growth tracker tool.
Designing a gated experience
Another goal was to increase Babycenter account sign ups. The growth tracker tool was used as an incentive to drive sign up rates, we wanted to entice users to utilize the growth tracker tool with a sneak peak and strategically incorporate a modal pop-up to prompt account creation. The modal pop up was placed in a way that doesn't interfere with the main growth tracker tool, since we wanted users to complete the flow, and appeared at the end.
Addressing the logged in user edge case: first time inputing data for a new child
Before entering the first data points, a safety feature was implemented to help the user double check if they're entering the data for the right child. Users can edit the name, birthday, and sex before they confirm the child. Of course, this information is still editable through their account dashboard.
Tying it with Babycenter's branding
When we view medical data, it's text heavy and very black and white. To match Babycenter's brand of being "we're your friendly neighbor you can ask for help" while still providing medically accurate data, we added a visual design touch to the graphs that matched Babycenter's brand colors making it more family friendly.
NEXT STEPS AND Key Learnings
- Sometimes, a certain feature can have multiple edge cases. It was important for me to know how to balance and handle each edge case and decide between if we should answer all edge cases or handle only the important and common ones (due to time constraints).
- Design (interaction, flow, etc) hand off to the developers can be a messy process, it's important to keep the transparency and figure out ways that help both parties understand what's expected of each other.
- Different platforms have different limitations, it's important to study the platforms your project is on and note what you can and can't do.