BIG TICKET

 

Duration
March 2017 - September 2017

Role
Research, UX/UI Design

Client
Bloomingdale's

Project Overview

Big Ticket Items are referring to all the furnitures sold in Bloomingdales.com. Previously, customer could only search for big ticket items online but order by phone, which was a big hassle in the online shopping process. Thus, this project was aiming to enable customer to order furniture online directly with several improvement across the site.

Since the site were partially responsive by the time we were doing this project, I had to take all different platforms into consideration, like desktop web, mobile/tablet web, and responsive web as well. There was a lot of UX thinking involved in the whole process as it’s a very business critical feature, while the actual UI treatment as the end product was not changing a lot.

 

Design Challenge

How Might We Provide Customer with Enough Clarity for A New Service?

Since we were majorly updating the functionality and information on the current site without a holistic introduction to this new service, there’s a high chance that customer might be confused by the changes on the pages they visited a lot. Thus, I had to come up with a solution that's intuitive enough for user to know where to go next by themselves.

Synthesis

Touchpoints in Customer Journey with New Features

After a few more research and based on the customers’ feedback around big ticket items, I figured out some key features customers would want for the new services.


A. Item Availability to Ship
Before they start the purchasing process, it is very important for them to know that if it’s in stock or available to ship to their area. It’s a critical decision point.

B. Detailed Information about Protection Plan and Delivery Service
Since it’s a relatively big and expensive item to purchase, customer would need to know all related information before they could buy it. Protection and warranty plans might be a big part of getting a furniture. Also how the delivery works might affect the decision as well. Shipping of furnitures could be a big problem, according to a few customers.

C. Place to Know About Additional Service and Delivery Fees
Extra fees could always be annoying to customers. Thus, it’s very important to let customer know exactly what they are paying for and what’s the value. They should be given the options to choose the services and pay for what they want.

D. Ability to Schedule Delivery Easily
Scheduling is one of the most important step for ordering big ticket items. Customers would always want to choose a date and time instead of being told when to expect the delivery. And it should be as simple as a few clicks.

E. Easy Access to All Information after Ordering
A lot of customer would like to check the order after their purchase. There should be an information hub for them to see all information related to their order and ways to change their order if they need to.


Meanwhile, I also mapped out the user flow customers would go through when ordering big ticket items online. The red circle marked out where the key features could be applied, while the black labels emphasize the major steps that are affected and updated (details will be shown later). During the journey, Checkout is the most complicated part which has 8 different scenarios (shown in grey area) carried over from Bag.

 
 

Hi-Fi Wire Showcase Part #1

The Solution Should Inform Customers about Item Availability and Detailed Information on Product Detail Pages before Purchase

PRODUCT DETAIL PAGE (PDP)

The structure of the original product page won't change a lot except for a few added/swapped features. 

A. Item Availability to Ship

The “Check Availability” Input field was added for the convenience of customers. Their zip code will be automatically detected or they can choose to enter a different one. Once they submit, they could get a few different results as follow depends on the product:

  • Error message: This item is not available for delivery in your area.

  • Validation message: In stock and available for delivery to [zip code].

  • Information message 1: This is a Special Order item that will be manufactured especially for you. If you choose to return it, Bloomingdale's will withhold a non-refundable 33% re-stocking fee.

  • Information message: Order now. This item is estimated to be in stock by [date].

If the zip code is not detected and user clicks “submit” without entering zip code, there will be an error message displayed as shown to prompt the user to put zip code before proceed.

If the user enters a zip code which is not identified as zip code within U.S., the error message will say “To check availability, call 1-800-BUY-BLOOMIES.”

 
Big Ticket-04.png
 

B. Detailed Information about Protection Plan and Delivery Service

B1. “White Glove Delivery” message will be replacing the “ship” and “pick up in store” radio buttons for regular products to inform customer the difference of shipping/delivery method for big ticket items.

B2. Links to “future protection plan” and “warranty information” is provided in the “Product Details” section to give customer the chance to fully understand related policies before purchasing.

B3. “White Glove Delivery” section is replacing “SHIPPING & RETURN” section for regular products since it’s the only way to deliver the big ticket items. Customer could see the breakdowns of the delivery fees they will be paying for as well.

 

MASTER PRODUCT DETAIL PAGE

The master collection will follow the same logic as Member PDP to apply the 2 key features. The only major difference is that, since Master PDP will have a few products listed in one page, customer only needs to enter the zip code once to check the availability of all products on that page.

Hi-Fi Wire Showcase Part #2

The Solution Should Enable Customer to Understand and Choose the Services They Want During Checkout

The new features were built on the existing checkout responsive design with established styles and modules. There are 8 different scenarios depending on if the user checkout as a guest or a signed-in customer and also the products they are buying with big ticket items. Some copy are added or updated to indicate the changes in existing modules; some part of the modules will only be shown when it’s applicable. For example, gift options are not feasible for furnitures, so it would disappear if it’s a furniture-only bag. Also, some new modules are inserted as necessary to enable user to make their choices. The major changes and new modules are marked out in the chart below.

 
 

COPY CHANGES

The copy changes mostly happen in the shipping address and method modules.

As a signed-in customer, the site will pull your shipping address from the record and you can simply choose the shipping method for you products in the non-furniture shopping experience. While when you hav big ticket items in your purchase, the word ”delivery” will be added to the title to indicate the furniture items will be delivered to this address as well. At the same time, the delivery method summary will be added into the original shipping method module as well with the title changed to “shipping & delivery method” if it’s the mixed bag. If you don’t have anything that’s shipped to your place, only delivery address and delivery method will show up.

While if it’s a guest checkout, user have to fill in all the information for the first time. The major difference from the signed-in version is that all shipping & delivery info are put into one big section. However, the “delivery address” and “delivery method” will be shown following the same rules as signed-in checkout. And the “shipping” and “pick up” related input fields will be hidden if not applicable.

 

NEW MODULES

Since it’s responsive, mobile and desktop will follow the same experience. The new modules will be same for both signed-in checkout and guest checkout, because these are new features for every single customers regardless if they have an online account.

C. Place to Know About Additional Service and Delivery Fees

A new module was added after LOYALLIST to give users options to choose the services they need or get to know more about the required fees. The services include furniture protection plan, mattress protection plan and mattress removal/recycling (if there are mattress items). Some other delivery details should be provided by the user to get the accurate delivery fees calculated. After everything were selected and saved, the user will get to the summary state (with the next module open). The order summary will display the fees of the services that user selected and applied for the items. They can always go back and change the selections before placing the order.

d_signed in_services.jpg
d_signed in_service selected.jpg

D. Ability to Schedule Delivery Easily

The last step before placing the order is to schedule the white glove delivery. This module gives the user two different options to schedule for the big ticket items listed above, so user are aware of which product they are arranging the delivery for. They could easily choose an available date from the first selection, or they can call the customer service if they need to discuss more details or have more questions. After they selected and saved the options, the "PLACE ORDER" button would be enabled.

d_signed in_scheduling online.jpg
d_signed in_scheduling call.jpg
d_signed in_scheduling online selected.jpg
d_signed in_scheduling call selected.jpg

Hi-Fi Wire Showcase Part #3

The Solution Should Provide Customer with An Information Hub to Check Their Orders Easily

Based on how the order system works, different order numbers will be assigned to furniture items and other items even place in a same order - meaning furniture items will always be listed as a separate order because of its special delivery method. Also, a sales check number will be assigned to each furniture delivery - no matter how many items in one delivery. Thus, the order history and details pages are serving as the place to hold all these different information about any furniture orders so user can get them all at once. While this part is not responsive yet, the desktop and mobile experience were a little different.

 

ORDER DETAILS PAGE

These are the main informational pages for customer to check their orders. For this page, the desktop and mobile versions are structured slightly differently but containing similar contents to be as detailed as possible.

E. Easy Access to All Information after Ordering

E1. Sales Check Number was added right below Order Number as it’s a very important information for big ticket items.

E2. A directional copy was added for customers who have questions about their orders or want to change their orders.

E3. A lot of copy were changed from “shipping" to ”white glove delivery”, in order to inform user of a special delivery for furniture instead of regular shipping method. However, the functionality remains the same

E4. In the expanded price details, fees for white glove delivery and protection plans selected are listed separately, so customer would know what they paid for at a glance. They can also click on them to see more related details.

 
Big Ticket-06.png
Big Ticket-07.png
 

 

ORDER HISTORY PAGES

These are the higher level pages that give user a summary of all their orders, which contains less information about each specific order. While user can always get to the order details pages when they click on the order they need more information about. Thus, key information on these pages are marked out and are same as the key elements in order details pages.

The mobile version and desktop version are quite different for this page. The only important information for big ticket items orders provided on mobile page is the sales check number. The intention of this page is to lead you to the order details page while only offering the very key information as the summary to keep the order history simple and different from details page. However, the desktop version is the opposite. It wants the user to get as much useful info as possible without a further click. These two different experience are designed on purpose. Mobile users shouldn’t have to scroll a lot before it gets to the information they need. The loading time is also considered for such a small device. On the other hand, desktop users have a fairly large screen to hold a lot of information at once, and it takes some time to load different pages. Thus, the fewer clicks the better.

 
Big Ticket-08.png
 

Final Design Specs

Delivery of Pixel-Perfect Products

Though most changes happened in the user experience and copy updates, like in feature B "Detailed Information about Protection Plan and Delivery Service" and feature E "Easy Access to All Information after Ordering", there are some new design elements and interface added into the final product.

 
     A. Item Availability to Ship

     A. Item Availability to Ship

 
 
     C. Place to Know About Additional Service and Delivery Fees

     C. Place to Know About Additional Service and Delivery Fees

     D. Ability to Schedule Delivery Easily

     D. Ability to Schedule Delivery Easily

 
 

Takeaways

Better Experience Lies in Details

1. Since the project is touching almost every pages in the shopping funnel but we were not overhauling the website, everything has to be considered with the new experience and current treatment on the site. Small changes in different steps could make a big difference.

2. A lot of experience could be enhanced by copy changes. Copy should always deliver the very true messages to the customers

3. When it comes to non-responsive site, we should make better use of the difference between platforms to make the “inconsistency” valuable in different experience.