Web App
Design challenges, scope and objective

The scope of the efforts with Baby Box University (BBU) was to create an online learning platform for new parents to help prevent SIDS and educate parents, with the offer of a free Baby Box after completing the online courses. I owned BBU’s end-to-end experience.

  • Users needed to hold their place in the course, meaning if the user stopped watching the course videos before their final quiz to receive a Baby Box, next time logging into BBU, they had to pick up where they left off
  • Baby Box University wasn’t available everywhere because we didn’t have the ability to ship to customer’s just yet due to constraints of the business at that time
  • 87% of baby box university users were on mobile, which meant that the online learning experience had to be mobile-first
  • After completing the program, new parents had to arrange to have a Baby Box picked up at a partner location (Hospital, women’s center, etc), shipped to a local UPS or FedEx store, or shipped to them for a small fee which included a map experience based off of the user’s location

I knew after users signed up from our landing page, I wanted the users to have a fun experience learning about parental best practices, while understanding the stakeholders’ constraints in the product.

I first started designing wireframes around the educational piece — specifically when they landed on the pre-course screen and the user journey. Once the user signed up on the landing page, we had a very low drop-off rate.

project babybox

Early BBU wires

Clear call to action to start the course, with a little information behind it.

Added some helpful activities and tips for parents as well, mostly because of whitespace but also because we wanted these new parents to get the most out of BBU, and there was so much opportunity to educate them more through design and copy.

I designed transcripts into the product for accessibility, but because the majority of the users were on mobile, I designed it in a way so the user could easily navigate to see transcripts if needed, but hidden if they wanted to, or could simply watch the video. Captions would have been the better solution for better accessibility, but working with the constraints of the business, I opted for transcripts for this launch.

project babybox

BBU Course Prototype Clickthrough

project babybox

BBU Activities

After a user completed the videos in the course, they needed to pass the quiz with 100% before becoming eligible for a Baby Box. This is where I was able to flex some extra design elements to match the brand — outside of a video experience.

Once a user passed the quiz, they become eligible, which is where the location portion of this product comes into play.

project babybox

Ship to store experience

project babybox

If a user needs to change their location

Using Mapbox, I designed the map to match our branding, and by pulling in data, we were able to determine if a user was eligible to pick up by a nearby partner location or if they were eligible for ship to store — if neither were available, we could ship it to them for a small fee (which we tested and it failed). Ship to store was a bit tricker because we had to pull in locations that were specific UPS or FedEx locations, and not locations that were ‘drop off’ locations.

Some of the business constraints hurt the product. For instance: we couldn’t confirm locations actually had a baby box for a customer or they ran out because we also offered in-person education at these partnership locations so inventory was an issue.. so the customer had to call the partner they selected to confirm they would receive a box.

The design strategy behind this included defining the product before it was created, which gave me really good insight into what would ultimately make this a successful product. Saving babies lives was enough drive alone to make this an exceptional experience.