App: Registry Redesign 

Bed Bath & Beyond, buybuy Baby

30-Day Challenge

As new players in the registry space gained traction, Bed Bath & Beyond's app stalled. New internal leadership was determined to reinvigorate our app experience - starting with the registry space. Over the course of 30 days, UX & dev teamed up to deliver a more direct & optimized experience. By doing so, we hoped to increase registry creations, boost engagement, and stay in the competition for top registry services. 

My Role: Lead Designer

I was responsible for creating lo-fi sketches for quick communication, high-fidelity mocks, and collaborating with developers on implementation within the Bed Bath & Beyond & buybuy Baby apps (iOS and Android). 

Background

Bed Bath & Beyond, buybuy Baby

registries

Whether you're planning on getting married or expecting a baby, gift registries are a common part of the celebration process. Registrants create a list of products/gifts that friends and family can purchase from before the big day.

general impact

The registry experience is one of our top revenue generators for both Bed Bath & buybuy Baby. Registrants can add our products to their registries for their friends and family to purchase.

Problem

Users are having a hard time creating registries in the app, and a significant number end up abandoning their registries before their event date. 

Once ranked the leader in the registry marketplace, Bed Bath & Beyond has fallen behind companies like Amazon and Target. 

Goals

Fix & Simplify

Due to the quick timeline, we needed to keep the LOE for UX and dev low to market these short-term enhancements. We addressed known issues and focused on simple (yet impactful) updates.  

Vision

Make it easier for users to create their gift registry by reducing redundancy, adding focus & using the "aesthetic-usability effect" to increase the perception of usability.

Process

01

Stakeholder Alignment

Throughout the 30 Day Challenge, we had regular check-ins and reviews with our stakeholders. 

02

Design Iterations 

Originally, I started with lo-fi wireframes for quick iterations.. but then quickly realized there wasn't much time to review said wires. Instead, I later focused on quick iterations with higher fidelity. 

03

Execution Support

After a feature or portion of the project was reviewed with the stakeholders, it was time to hand it off to the developers. I attended grooming sessions and other Agile ceremonies to help support the team as they worked through execution. 

01 Stakeholder Alignment

Getting everyone on board

CCO & Product

We worked closely with our partners in leadership and product to identify keys goals and review cadence. Every couple of days, design progress would be shared with the group for rapid feedback and iteration. 

Development

Developers were included earlier on to help identify any techinical limitations. 

The developers discovered the code between Bed Bath and buybuyBaby were intertwined - meaning the designs would have to support both. 

Registry Team

We also included our partners over in the Registry space on progress. They shared insights on feature priorities and shared access to imagery. 

UX 

I worked closely with our app UX designer to get familiar with our app patterns and file strucutre within Figma. I also shared progress in regular review sessions to get quick feedback from the rest of the team to ensure consistency. 

Determining Scope

Audit: Create a Registry Flow

Create a Wedding Registry (Previous)

Bed Bath & Beyond App

Create a Baby Registry (Previous)

buybuy Baby App

We discovered early on that the code behind the Bed Bath registry experience was closely tied to the buybuy Baby registry experience - any changes to one would impact that other. 

Determing Scope

Proposed optimized flow

Based on discussions around the existing flow, we wanted to simplify and optimize the process for creating a registry. As a group, I worked with our stakeholders to narrow down the key features and requirements.

02 Designs

Focus 1

Registry Landing Page

Focus 2

Registry Create Form

Focus 3

Registry Dashboard

Focus 1

Registry Landing Page

The goals of this page are primarily to create a registry or find one. If a user already has a registry, they bypass this experience and are taken directly to their registry. Note: a user must have an account with us in order to create a registry.

Design Evolution

1. Comprehensive landing page wire: Early on, I created a consolidated landing/dashboard wireframe. When a user lands on the registry tab (but is either logged out or does not have a registry), they'll see the primary features and sections with a prompt to sign in or create an account. 

2. Simplified video landing: I explored more streamlined landing pages that focused solely on the two different paths - find or create. In this example, I tried a full-width video background but had to decrease the opacity for necessary contrast with the content. This approach would only be successful with the right video. 

3. Illustrative approach: Another direction I wanted to try was an illustrative approach. I created a series of illustrations that represented the different registry options we support. I realized, however, that this would be more difficult to scale and would be harder to meet the quick turnarounds. 

4. Lifestyle photo approach: We decided lifestyle photography would be the easiest to implement and scale given our timeline. I dug through some of our marketing collateral and found several pictures I could then photoshop to add the necessary white space to overlay our content. 

5. Applying the style to baby: Once we established the lifestyle photography approach with Bed Bath, we applied the same style and treatment to the buybuy Baby app. 

Focus 2

Simplifying the Create Form

Reduce, reuse, recycle

I reduced the number of questions to better align with the web registry experience, as well as reduce the complexity on the app. I also implemented improved form field designs with improved accessibility. I decided to break the form into separate pages to reduce the cognitive load. 

Focus 3

Dashboard at a Glance

Guiding the registrant

I revamped the initial "above the fold" view of the dashboard. There will be two states: a zero state with no gifts, and an in-progress state for registries with gifts. 

This new treatment at the top is focused on helping guide the registrant with different options based on where they are in the registry process. 

Working with time constraints and limitations

Due to time constraints, we were limited to only style and light UI updates for the remainder of the page. I reordered some of the tiles based on priority and implemented our brand styles. Additionally, I created new illustrations to replace the inconsistent variety of icons and illustrations that were there before. 

04 Execution

Collaborating with developers

 Lead developers were included in the stakeholder reviews to help determine feasibility with our short turnaround. Bed Bath & Beyond follows the Agile methodologies, so  I worked closely with the developers during grooming sessions to answer any of their questions, as well as make improvements based on their feedback. 

Edge cases & pressure testing

As we groomed the stories, developers were able to provide more technical insight and identified further edge cases. Together, we made said the designs were scalable and could handle various scenarios across both apps as well as for iOs and Andriod. 

Before & After

Landing Page

Event Type Selector

Create Form

Success Confirmation

Registry Dashboard

Challenges

Switching to Figma

Big fan of Figma. That being said, it still takes a little getting used to when switching from one software to another suddenly. Additionally, learning the subtle design differences and new patterns the app team used took a little onboarding to get up to speed. 

Quickly finding feature alignment

Some days we were blocked on work waiting for stakeholder feedback. We were moving so quickly, the cadence wasn't fully fleshed out. We would sometimes have to wait for key stakeholders to free up to obtain their feedback. 

There are always going to be surprises. In our case, discovering the close tie between the Bed Bath and buy buy baby apps was one of those surprises. The legacy code also had a lot of limitations, which increased the LOE on the Dashboard portion quite a bit. We were able to adjust and work flexibly with our developers. 

Internal design impact

Enhanced symbols

As I was updating the Create Form, I also advocated for improved form fields that matched the material design aesthetic and were more accessible. I was able to gain support, and updated the Figma pattern library with new responsive symbols.

Figma templates

My manager and I saw opportunities in the Figma file structure for saving, sharing, and documenting work. Together, we created new templates to improve efficiency and communication when sharing work from Figma. 

Before the 30-day challenge, our design team was basically split into two main groups - app and web. During this challenge, we decided of a lot of the work I was doing for the app could translate well to web. Moving forward, we started merging the teams and working on app in parallel to web designs and the same designer would lead both initiatives. 

Thanks for scrolling! 

2023 Becky Drexler