Case Study | BabyBin — Mobile-first eCommerce Website

Irving Rivera
Design Portfolio
Published in
6 min readDec 20, 2018

BabyBin is a subscription-based eCommerce website for essential baby products.

Empathize

We started our domain research by exploring our target market of millennials mothers. Discovering that becoming a new mom is a lifestyle change that drastically alters a woman’s habits in both digital and retail spaces. Representing a market opportunity of $13,127 — annually.

Not only that, but now new moms see digital technologies, like the smartphone, as an important parenting tool that informed them on how to make better parenting and shopping choices.

Reason why we decided to make this design mobile-first.

Competitive Analysis

In our competitive analysis, we discovered numerous baby registry providers such as buybuy BABY, Amazon Baby Registry, etc.

However, none of them offer a subscription-based model — outside diapers replenishment. Additionally, our visual study informed us that they treat expectant mothers the same as they do their regular customers.

User Interviews

To better understand the goals, frustrations, behaviors, and motivations of our target customers we conducted six interviews with moms on different phases of their motherhood journey, producing the following affinity map.

Define

As a result of our user interviews, we developed two main personas. The first-time mom, like Lily Evans, which is new to the baby shower and baby registry process and needs all the help she can get.

On the other hand, we have the experienced mom, like Andrea Redding, which for her having another baby is just another part of her life and family plan.

As featured on uxpin.com

Persona

As per our recommendation and with the client’s buying we decided to design for Lily Evans, the first-time mother. Since she better fits our business goal of early customer acquisition. In order to drive a longer retention cycle for BabyBin’s subscription services.

Given this customer journey map we concluded that new moms like Lily have this primary problem:

New mothers need an easy way to ensure they have all the supplies they need for their first-born baby but lack the transparent and personalized information to do so.

Design Principles

Based on this problem statement, we defined the following design principles as a metal compass to guide us as we solve LiLy’s problem:

  • Trustworthy — it should be a reliable and transparent source of essential baby information that parents can trust
  • Convenient — it should be a flexible and easy-to-use service that provides a blueprint of what parents really need
  • Personalized — it should include streamlined information dependent on the child’s age and needs
  • Supportive — it should include a caring advocate who offers helpful recommendations and provides encouragement to simplify the decision-making process for parents
  • Collaborative — it should encourage conversation and exchange of ideas among the users’ family, friends, and peers

Ideate

Knowing that we wanted to onboard users into a baby registry process based on a subscription model we concluded that we needed to build two types of interphases. A building phase to create the registry and a managing phase to control the shipping and inventory of baby products at the user “mother” level.

Based on this website architecture I decided to focus on designing the building phase of this site. Creating the following paper prototype to quickly put it in front of users.

Interactive Invision Paper Prototype

The overall functionally of the prototype was well received. Since it reminded users of the Amazon shopping experience. However, the message that this product is a subscription-based system was not well understood by users. Additionally, they did not welcome the idea of having to manage two years worth of inventory while at the same time pre-paying for all the goods at once.

Mental Model Pivot

Given that users did not welcome the idea of a subscription service. We conducted a second round of exploratory research on congruent sectors like the physical storage market. There we found MakeSpace an on-demand storage service. After careful consideration, we decided to apply this new type of mental model to our baby registries service — which we named BinList.

Prototype | BinList

Interactive Invision Prototype

Test

Now with this new high-definition prototype on hand. We conducted a formal round of usability testing to see if users will now welcome the idea of a subscription-based baby registry.

Again we did not face any usability issues. Users did not experience any heuristic errors or miss understandings of the website workflow. However, this time, users hated the idea of having to make too many choices about the future needs of their yet to be born baby — especially being first-time mothers.

Divergence

This meant that we needed to perform yet another round of research to find a mental model that could address all of the users' concerns about having a subscription service for baby products. Given that both the typical eCommerce experience and storage service approach did not work. We went for far remove ideas and services like crowdfunding and makeup products stores — in search for the perfect gift giving model.

Convergence

After, a very long brainstorming session we designed a concept and workflow based on the general idea of gift cards and stock shares. Where family and friends could gift money as the physical/equity representation of the baby items — which we named BinFund.

Prototype | BinFund

Interactive Invision Prototype

Deliverables

Before I introduce you to the final results of this project. I want to illustrate to you the fundamental differences between the BinList and BinFund prototypes.

One of the advantages of working with a contracted client is that you get to see the implementation of your design decisions and recommendations. Knowing this we decided to produce a full view desktop version of the site. Together with a well documented and highly descriptive wireframe.

BinFund’s Desktop Version

Interactive Invision Prototype

Annotated Wireframe

Design Specs Document

Visual Design

One of the most frequent questions a UX designer get is — What is the difference between UX and UI? The short answer is that UX is the process, and UI is the visual outcome. For example, every piece of this case study until now has been all about the design thinking approach of UCD.

However, this was not the end of the BabyBin project because a second DESIGNATION team took the responsibility of creating the UI elements of the BinFund concept. Illustrated by Jonathan Patronski.

--

--

Irving Rivera
Irving Rivera

Written by Irving Rivera

Principal Product Designer @Sogeti_USA @Sogeti @Capgemini previously @TCS @Designationio @FlatironSchool @USArmy @Uprm #UX #UI #BTC #ETH #NFT