Challenge: The fulfillment area on PIP was last redesigned in 2017 (which means forever ago in e-commerce). Our main goal was to meet and exceed customers' expectations about available fulfillment options, offer the easiest way to compare them, and highlight Express Delivery as a new way to get items.
What was done: As a nimble team of two designers (and as a team of one for two-thirds of the project length), we led the initiative consisting of competitive analysis, user research, ideation, a design sprint, prototyping, and concept validation. This resulted in a production-level design for 400+ use cases for desktop, mobile web, and everything in-between. It became possible with the huge support of broader UX, Product, and Development teams and leadership.
Impact: The redesign resulted in $80M in GD, $35M In-Store Attachment, and $5M in Fulfillment Cost Savings. The project took 15 months from identifying the problem to launching the designs for 100% of users. The project got huge visibility on all levels, with dozens of stakeholders involved. The final result was well-received among EVP Merchandising and other executives.
Online fulfillment flows in any e-commerce experience can get very complex, especially when you have not just one, not two, but four fulfillment options. The beauty of it is that the user has the opportunity to find the most convenient way to get the item, given all of the circumstances they are in. However, being able to clearly present all options, without overwhelming the users, has proved to be challenging.
The Product Information Page, also called PIP is an integral touchpoint for a customer's fulfillment decision making. In 2017, when the Home Depot re-thought their "How to Get It" area on PIP pages last time, moving away from radio buttons, the idea was to contrast two options: store pickup (same-day or later) and at-home delivery. To emphasize this dual state, the design team introduced two "Add to Cart" buttons forcing users to select their fulfillment on PIP to proceed with their purchase. Users met the new design very warmly, but over time we started to see how what used to look like a great idea now is falling apart.
With more new features coming up, Zone A (the zone of the page below the header and above the fold) started to progressively grow and push the buybelt further and further down. As much as we tried to protect it from getting crowded, it felt impossible to do so. If some things arguably could have a better place than Zone A, others, mostly fulfillment related (such as Installation, Protection Plan, Subscriptions, and others) would better be connected to fulfillment options they go with, but the buybelt didn't provide great opportunity to do so.
Additionally, "the buybelt" didn't offer an elegant way to promote Express Delivery, or offer Instant Checkout, or Checkout with Paypal. We found ourselves in a situation when, even if the design has very strong advantages, it does not support the whole complexity of our fulfillment offerings.
Currently, Home Depot offers users four options to get their desired products, in different combinations depending on the item and its availability:
Even though "Ship to Home" and "Express Delivery" could look alike to users, they are very much different options sourcing wise. To figure out how to communicate a variety of fulfillment options to users, we needed to find out what their current mental model is.
You can find yourself in very different circumstances while shopping at the homedepot.com. The same person can be in a rush to purchase a box of nails he just ran out of and needs to pick up more ASAP, or buying multiple items for upcoming bathroom remodeling, or trying to get a grill delivered before the party on Saturday. In each of the use cases, the buying behavior will be different as well as their values. Our job is to provide the right information at the right time for each user.
Obviously, each group of customers' has its own needs, and although there are definitely some opportunities to tailor the experience based on our predictions about the group the customer falls into, the reality is – we have to be ready to satisfy all groups at the same time.
Over the past year of consistent research, starting from extensive baseline studies to feature-specific user tests, we saw and heard our customers experiencing the same difficulties over and over again:
"Can this item be delivered, other than by express delivery, to my home? If so, how long will it take and how much will it cost?"
Ivan, 33
"If I remember correctly, I couldn't ship the sink to home, I had to pick it up, so I guess I need to choose store pickup for the towel ring too, but it says I can only pick it up in a week... I need to choose something though... But I would assume I can change my decision later?"
Dan, 45
"Well, now when I'm seeing my item in the Cart I see that Ship to Home is not available and you chose something else for me, but it costs 80 bucks so I better go to the store to pick it up. That is not a type of surprise I want to see when I'm ready to checkout."
Sabrina, 56
"If this merchandise is unavailable because it is out of stock, it should say that it is out of stock instead of putting an option for Express Delivery as it has been for a month... Thank you"
John, 30
Also, our research has shown that choosing a fulfillment option is a critical decision point for The Home Depot's customers. Many of our users shop via project and not product, buying many items at one time. It's crucial for them to attain these items at the same time and preferably the same way. The nature of home improvement and construction projects requires transparency and ease of use, resulting in increased conversion and long-term loyalty.
The reality of working in such a huge infrastructure as homedepot.com and especially in such a cross-disciplinary area as fulfillment is that the designer always needs to look at the problem from multiple angles. In this case, to the typical consideration of users' needs & business needs, we had to account for supply chain capabilities with a ton of complexity coming with it. The discovery stage of this project was the longest and the most difficult part of the project. The stakes are always high when you work on something as tight to conversion rate as fulfillment is.
This project gave us an opportunity to dive deep into the Home Depot world outside of what a normal UX Design job is. We got the opportunity to sit at the tables we wouldn't normally sit and be a part of more strategic decisions than we would normally be.
While we still hoped that our biggest problem to solve was the placement of the fulfillment area on the PIP page, we discovered a very interesting thing: there is no shared vision of the fulfillment structure across the company. More than that, customer vision, product owners' vision, and supply chain's visions did not match:
This discovery led us to multiple conversations that included multiple high-level executives where we crafted our new shared vision and understanding of the fulfillment options. We discussed our long-term goals (massive Supply Chain expansion), our existing infrastructure, and multiple squads' roadmaps, and we landed on a "meanwhile" type of solution. There were going to be three equally important fulfillment methods to the customers: Store Pickup, Ship to Home, and Express Delivery. And now we were ready to start ideating, prototyping & user testing. Well, almost.
For our designs to make technical sense, and to onboard partners who are normally less involved in the technical side of the fulfillment, we created a simple mind map explaining how information for each of three upcoming elements is going to be sourced.
Side note: this is not a full view of the fulfillment logic on the homedepot.com. The real-world production design required us to take care of every single use case and edge case, and it, of course, turned out to be way more than that. This view, however, gave the team (and stakeholders) a better understanding of the fulfillment complexity, and helped to build a shared vision between technology, product, and design partners.
As one of the learning activities, we conducted eight 30-minutes interviews with stakeholders. As a part of the process, each participant wrote down "How Might We" notes on sticky notes to catch all of the problem areas on the topic. When we were done, we performed affinity diagramming and came up with a list of main opportunities to enhance the customer experience. Below are those critical pillars.
How might we...
After identifying areas of opportunity, we drilled deeper to determine our Design Principles for a Design Sprint where we were going to take a closer look at the UI of the fulfillment options.
In order to be successful, our solution must:
We knew what we need to solve for and our users' needs; now it was time to dip our toes in the water and understand the best way to go about conceptualizing our ideas. We were fortunate enough to be able to book a room for ourselves for a month (a team of two designers and a manager, with the Product Owner occasionally joining the party) to keep our initial designs up on the walls for as long as we needed.
At first, we needed to choose if the fulfillment options need to be selectable on the PIP or it can be done later, and all we need at this stage is awareness.
From the paper "drag and drop" prototypes, we moved to our beautiful design system and developed Invision prototypes that were immediately tested with our users.
But we didn't expect to solve this problem (that ultimately affects every designer who works on homedepot.com) as a small team of two designers hiding in their private room (even with unlimited access to our customers). We had a better plan.
To bring expertise from the designers who don't directly design for fulfillment but whose work will be drastically affected by the redesign, we invited four additional designers from different teams to look at our problem with their fresh perspectives — and combine that with our deep knowledge of the business logic behind fulfillment.
Before "The week X", each of the designers was asked to explore different visual concepts based on the tech requirements we set for them. On day one of the design sprint (we call it a design sprint even though it wasn't exactly that) the designers presented their concepts. The group then voted on the concepts based on the overall strength of the solution, layout, treatments of specific areas, and UI elements. From the voting results, we designed and prototyped 4 concepts borrowing from the strongest solutions.
Desktop Concepts:
Mobile Web Concepts:
To validate our concepts, we conducted nine hour-long moderated interviews through usertesting.com led by a Senior UX Researcher Brad Allen: five for desktop and four for mobile web design. During the sessions, each user got to see all four concepts (either desktop or mobile web) in randomized order. At the end of the session, we asked users to give out 2 votes for the concepts: one for the first choice and one for the second choice.
We found that concepts #1 Laffy Taffy and #4 Nano Tiles were performing the best.
Even though we got very positive feedback from our users, none of the designs from the Design Sprint fully fulfilled our needs and looked like a perfect solution. With all learnings we have made in the design sprint and the following study, we decided to take another round of iterations. We had a very strong feeling that showing all details for each of the three fulfillment methods will cause cognitive overload but we weren’t sure what we could remove or hide. And with so many stakeholders in play, it felt like there was actually nothing we could do about it. At the same time, the leadership feedback was clearly communicating: "Well, you HAVE TO remove something".
After analyzing what worked great in each of the concepts, even when the concept itself wasn’t proven to be successful overall, we felt like we found what was missing from our leading – three tiles – concept. Progressive disclosure.
We knew fulfillment details are very important for our customers. We knew they want to easily compare their options. But we also knew that those options get wordy and hard to understand. But what do our customers really HAVE TO KNOW to be able easily to compare their options?
Price — Speed — Pickup vs. Delivery
So we decided to keep those three key points inside of the tiles and bring everything else we want to say below it. This approach gave us the opportunity to be very explicit about details for those options the user is expressing interest in.
As a result, we landed on a simple concept that highlights the main points, is easy to compare, and had an opportunity to learn more details on click. At the same time, users are able to click "Add to Cart" with the default fulfillment option and make a decision later in Cart.
Below are some of the final designs produced as a result of this initiative.
As of January 2021, this experience is live and you can get your eyes on it at homedepot.com. Maybe it's time to order a new air filter?
"This is so darn exciting! Inarguably, one of, if not the most complex site sections. The buy box is the digital billboard that establishes us as THE leader in multi-channel retail. I can assure you there are many multi-channel retailers right now staring at that and it is melting their brain, the amount of detail we can provide in a very clear way to the customer that early in the funnel is downright awesome! I’m super proud to be part of this team. Nice job!!"
David Albracht, Sr Director, Product Management
After our loud success on the Product Information Page, we did a step back to see what is the core fulfillment information users want to and need to see on the Product Listing Page and Search Results, and how it aligns with PIP, Cart, and Checkout. This project is currently in progress and estimated to go live in Q1 of 2021.
1. It never goes as planned.
The process is messy. And it's alright. Sometimes it's hard to tell a nice simple story out of a year of hard work, dozens of stakeholders, and ever-switching priorities. Oh, and the pandemic, too.
2. Let the numbers speak.
As much as we love and value qualitative research, there is always room for hard data. If users love your design, let them show it in dollars. It's a business, after all.
3. Somebody's got to be the vision keeper. It might have to be you.
Being a solo designer on the project the whole company is invested in is hard. Of course, it's a great exercise in finding your voice, making it be heard, and learning how to keep the vision straight when it feels like every single piece is moving.
4. Hooray for the team effort!
As scary as it might feel, bringing more people with different expertise to the project is always a good thing. As long as lesson three is being learned (and practiced) on the way, involving more people (stakeholders or not) in the process to share a viewpoint and advice is good. At the same time, having more decision-makers may produce a "too many cooks in the kitchen" situation.
Even though it doesn't look that big on paper, this project was the core of my work life (from identifying a problem to launching the final solution for 100% of users) for over a year. I even got the nickname of "Fulfillment Queen" since I got expertise in a subject that every designer at the company finds themself looking for help at some point. And now, all of it is well-documented and available for designers and product managers at the company – without having to rely on any individual.
