DESIGNER'S NOTE
Bed Bath & Beyond also owns buy buy BABY and Harmon Face Value. The designs I created for Bed Bath & Beyond applied to the subsidiary sites as well. These designs are for both desktop and mobile.
Online shopping allows customers to shop at their own convenience. However, each customer may have different needs and expectations. Additionally, the Cart & Checkout (a.k.a. “Purchase”) section can be stressful for some customers. Crucial personal information such as credit card numbers, addresses, emails, etc. has to be communicated very clearly to customers while making the process feel as smooth as possible.
The previous Purchase section of Bed Bath & Beyond’s site was too rigid to handle different customers’ needs and expectations. My role was to transform the Purchase section into a more robust experience while keeping the process frictionless.
There were many small features that were added to Bed Bath & Beyond’s website, so I organized them into 4 categories:
Bed Bath & Beyond offers different shipping methods. Our research showed that many customers would order some items using one shipping method and other items using different shipping methods within the same order. Sometimes they would order two items using different variations of the same shipping methods, or two items to two different addresses. Our Purchase section was too linear and didn’t meet all of the customers needs. Additionally, the Purchase section was too confusing and daunting for some customers when ordering this way. Our job was to make this section more robust and digestible for users.
DESIGNER'S NOTE
There was no competitive research to do for this section because no other website grouped items together like this. We had to use our own imagination :)
DESIGNER'S NOTE
Different shipping methods have different costs. The customer needs to be aware that their shipping cost will change as they change shipping methods with specific items. Since Standard Shipping items are free if the order is above $39, they also need to be aware that they will be charged an extra $5.99 if their total Standard Shipping items dip below that order total.
I explored a number of websites that offered subscription services, even if they were not direct competitors. This included sites like Chewy, Purple Carrot, and Stitch Fox. I drew a chart to see which websites offered which services such as discounts, frequencies, and curations. From here, I had to decide which features would work for Bed Bath & Beyond.
Login: the customer must be logged in with an account in order to subscribe to a product. After all, we need to be able to keep track of who’s subscribed to what.
My Funds: in order to incentivize customers to subscribe to products, Bed Bath & Beyond was considering rewarding the customer with “My Funds” which serve as extra funds that can be spent on more Bed Bath & Beyond products. This information (and how much My Funds they’re earning) needed to be communicated to the customer as they’re making their purchase.
Goals: Give the user the option to subscribe to and unsubscribe from an item in Cart and Order Review.
Now that I had my goals in order, it was time to move to the drawing board. I took screenshots of Bed Bath’s Cart section, and drew over them to freely experiment with ideas.
This is our old Order Confirmation page; the page that users see when they’ve completed their order. The Purchase team was told that the whole page needed a redesign. The page looked messy overall. The information hierarchy felt awkward, the module that explains Bed Bath’s returns policy and the $10 cash back module* felt out of place, the Print Receipt CTA was difficult to find, and the order number was a little bit too difficult to spot.
The old Order Confirmation page had an issue for marketplace items. If one item was a marketplace item, and one was not, then each item needed a separate order number. The old Order Confirmation page was not robust enough to rearrange the page without changing font weight and line thickness.
Bed Bath & Beyond noticed that many customers would order items online for store pickup, but then never show up to pickup their orders and then cancel their orders. This was often due to last minute changes in their daily plans or other personal inconveniences. Because of this, Bed Bath & Beyond was losing many orders. We needed to figure out a way to save those orders.
In order to save the lost Pickup orders, Bed Bath & Beyond decided to provide customers with more flexibility. If a customer does not pick up their items in time, they would receive an email allowing them to have their order shipped to them via Same Day Delivery for an extra $9.99. This would solve issues relating to a customer's last minute schedule changes or conflicts.
I was tasked with figuring out the user's process of switching a Pickup order to a Same Day Delivery order. Since the user would be charged an extra $9.99 Same Day Delivery charge, they would have to pay that extra charge before switching their order. This would would be treated as an extra purchase. In my original plan, the user would be sent an email which contains a CTA. They would select the CTA, and be taken back to cart, and then go through the entire checkout process.
I realized that this flow might be a bit convoluted for the user. Since the purpose of giving this option to customers was too make their lives easier, I decided to reduce needless steps for the user by removing the entire Cart section entirely. Instead, the user would select the CTA in the email and then be taking directly to Checkout.
I drew out a user flow that shows the end-to-end process to switching a Pickup order to a Same Day Delivery order. Because of this unique experience, I had to take a number of edge cases into account:
DESIGNER'S NOTE
From the user's perspective, Same Day Delivery is a type of shipping method similar to Standard or Express Shipping. From an internal perspective, Same Day Delivery is linked with Pickup. A customer can only place a Pickup order if they're located in the same Zip code as the Bed Bath location where they would pick up the order. So too, they can only place a Same Day Delivery order if they are located in the same Zip code as the Bed Bath location that the order is being delivered from.
The "Pickup to Same Day Delivery" email the user receives has the same layout as Bed Bath's Order Confirmation email. Here, the email begins with a "save your pickup order with same day delivery" message, and explains until what time they have to to change the order and the additional delivery fee. It features a CTA that takes the user to the Checkout section. Finally, the email gives the order details of the original pickup order.
Before moving to Payment Info, if one item in the order is no longer available for Same Day Delivery, the user will receive this pop up modal notifying them they will not be able to order the listed item. They do get the option to order similar recommended items.
In Order Review, the items are listed as "Prepaid".
If one item could not be delivered, the items are listed separately with headers similar to the way they're listed in Grouped Cart. The item that would not get delivered would be listed as "Refunded", so the user knows they would get refunded for that item.
Each design set was handed off to the product manager and developers via Zeplin. We then had a grooming meeting for each design set where the product manager, developers, and I went over the designs to make sure the developers fully understood the designs and reasons for my design decisions. After the designs were developed, I performed quality assurance tests to make sure the designs were developed correctly. This was separate from the developers’ quality assurance tests which were intended to make sure the website was working properly.
Taking an item or group of items through checkout in any e-commerce site is not as straightforward as one might think, but it must appear straightforward to the customer. The site must also work well with whatever services the company provides. For example, unlike some competitors, Bed Bath & Beyond offers curbside pickup in addition to its different delivery services. Sometimes customers need some items delivered, and some items picked up. Sometimes they want to pickup all of their items, but only some are available for pickup, so they compromise to have the other items delivered. Some items, such as Marketplace or Subscription items, have to be delivered. Whatever the customer’s situation is, they need to have the flexibility to curate their order to fit their needs without feeling overwhelmed.