banner_hand_app@2x

Babylist Mobile

Babylist

Babylist Mobile

Dates: 2016 - 2017
Roles: Product Design

I was excited to work on the redesign of the baby registry app across responsive web, iOS, and Android platforms. The Android app was so far behind in design from the iOS app and both apps were far behind the web experience, it was time for a redesign.

img_app_original@2x

What was the problem?

  • Missing feature parity across all platforms.
  • Inconsistent branding, language, visuals/UI.
  • How can we make it easier for a Registrant to build their baby registry?
  • Where will they need to add items from? From the Babylist store, external online stores and Babylist Guides and Articles.
  • How will the brand evolve?

Considerations

  • How can we make it easier for a Registrant to build their baby registry?
  • Where will they need to add items from? From the Babylist store, external online stores and Babylist Guides and Articles.
  • How will the brand evolve?
  • How can we make it easier for a Registrant to build their baby registry?
  • Where will they need to add items from? From the Babylist store, external online stores and Babylist Guides and Articles.
  • How will the brand evolve?

Android App

Adhering to the latest Android Material Design standards, we organized the navigation to make it easier for the Registrant to do a task and move through the app. The goal was to give the registrant a focused user experience geared towards easily adding items to their registry.

Originally built as a test store with few categories, it grew quickly, soon outgrowing its original taxonomy and navigation. Babylist Store was limited in the amount of products it could carry. After a year, the store could not support new business, design, and engineering goals.

Originally built as a test store with few categories, it grew quickly, soon outgrowing its original taxonomy and navigation. Babylist Store was limited in the amount of products it could carry. After a year, the store could not support new business, design, and engineering goals.

img_and_nav_evolution2@2x

Evolution of navigation and registry screen.

New Page Designs

Menu Overflow

New Page Designs

Utilizing the Menu Overflow component to hold any registry/registrant related tasks - edit, organize, share and switch registry. 

img_menu_overflow2@2x

Add Button

New Features

By introducing the Add button in context to the registry, now it’s just one tap to start adding items to their registry. 

The Babylist Store was missing key shopping features such as Filters (price, brand, color, features), Quick Shop, Image Zoom. To help shoppers comparison shop, we added a fixed product summary on scroll and surfaced product videos closer to the top of the Product Details page.

img_add_button2@2x

iOS App

Doing the same organization exercise, but utilizing native iOS components.

Originally built as a test store with few categories, it grew quickly, soon outgrowing its original taxonomy and navigation. Babylist Store was limited in the amount of products it could carry. After a year, the store could not support new business, design, and engineering goals.

Originally built as a test store with few categories, it grew quickly, soon outgrowing its original taxonomy and navigation. Babylist Store was limited in the amount of products it could carry. After a year, the store could not support new business, design, and engineering goals.

img_ios_more@2x

When the More icon is tapped, an Action sheet is triggered.

New Visual/UI Design System

New Visual/UI Design System

Navigation Interations

A few design iterations reducing and simplifying the Tab bar.

  • Inventory growth
  • Page views increased 
  • Bounce rate decreased 
  • Total reservations from the Babylist Store increased 
  • Babylist Store revenue growth
img_ios_add_button@2x

New Elements

Introducing the Add Button and a custom action sheet. When the Add Button is tapped, the custom action sheet animates with a blur onto screen. The user can now, add an item from any online store, from the Babylist Store, add a Help & Favor, or add items from their other registry. 

img_ios_add_button@2x

Organize & Simplify

Replaced extraneous screens and taps with action sheets and in-line editing.

img_ios_simplified@2x

New Features

While working on the redesign, we also added new features - Invite Partner, Add Promo code, Create Private Category, and Add Photo interaction (shown below).

img_ios_add_photo@2x

Add Photo interaction.

Final Mobile App Designs

Final Mobile App Designs

Final Mobile App Designs

img_final_apps@2x

What were the results?

  • There was an increase in iOS users
  • Slight increase in Android users

Final Thoughts

Sweeping redesigns can be hard to measure, but they are necessary. I’m excited to see where they grow from here!

Check out the Babylist iOS App and the Android App.

Selected Works

Babylist StorePRODUCT DESIGN

Babylist MobilePRODUCT DESIGN

MyFitnessPal MobilePRODUCT DESIGN

Seamless Partner AppPRODUCT DESIGN

Bloomberg MobileVisual & Interaction Design