I joined Babylist in January, 2016. While there, I headed up Design and worked on the redesign of the Babylist iOS apps, Android app and responsive web. I creative directed and executed on updating and extending the brand, developed a new visual/UI design system, and art directed photography. Below, I'll cover the redesign of the Babylist Store.
Dates: 2016 - 2017
Roles: Product Design, Creative Direction, Art Direction
Babylist is a universal baby registry app, content, and e-commerce site. It’s a place where you can discover, request, and buy products for babies.
Having a baby is one of the biggest life changes people face. Babylist makes this journey to parenthood less overwhelming by empowering new parents with the information they need to make the best choice for their family. Babylist’s mission is to be the number one most trusted and loved baby brand.
I had never worked on an ecommerce store before and was very excited to have had the chance to work on the redesign. The Babylist Store was the last piece of the business to be updated, as the baby registry app and content site had already undergone a redesign.
The Problem
What started as a modern day baby registry, soon blossomed into an online retailer of baby products. However, our original MVP store was having difficulties scaling into a full-fledged e-commerce store. The redesign was an opportunity to ensure the overall design was inline with the company’s new brand direction.
It was also a great time to improve user experience, increase its value to existing customers and extend the brand to wider audience.
I had never worked on an ecommerce store before and was very excited to have had the chance to work on the redesign. The Babylist Store was the last piece of the business to be updated, as the baby registry app and content site had already undergone a redesign.
Considerations
New Site Map
New Page Designs
New Page Designs
After seeing the new sitemap, we needed more page types. Creating a Top Category, Sub Category, Tertiary Category, Product List and Product Details pages to help people find and discover new products.
Wireframes of new pages.
New Features
Early visual designs of new pages.
New Features
Stress Testing
New Features
We stress tested the page designs and UI components. For example, we stress tested the product card design. Testing out the longest brand names, product titles, and shipping message variations for items on both desktop and mobileweb.
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.
Stress testing product cards for mobile web.
New Features
Details
New Features
We added many little details to enhance the shopping experience. One example, is helping users comparison shop. On the Product Details page, we added a fixed product summary to the top of the page on scroll.
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.
Shoppers can open different products onto different tabs and not have to scroll back to top to remember the product name.
On mobile web, this little design detail really enhances the shopping experience.
New Visual/UI Design System
New Visual/UI Design System
New Visual/UI Design System
Final Design
New Visual/UI Design System
New Visual/UI Design System
Final mobileweb designs.
Challenges
Results
Final Thoughts
This was a massive project and a great collaborative effort from all on the team. The Babylist Store was the last piece to finally get a redesign and the numbers are showing that it was well worth it. It is now at a place where it can be tweaked and grow quickly and stably.
Visit the launched site.
Selected Works
GoogleGrowth design
Babylist StorePRODUCT DESIGN
Babylist MobilePRODUCT DESIGN
MyFitnessPal MobilePRODUCT DESIGN
Seamless Partner AppPRODUCT DESIGN
Bloomberg MobileVisual & Interaction Design