The Challenge: The fulfillment area on PIP was last redesigned in 2017 (which means forever ago in e-commerce). Since then, users have been spoiled by same-day and next-day delivery offered by multiple major retailers. Users got used to buying items online to pick up in stores. Users... they've changed. So has Homedepot.com. 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 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.
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 in order 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.
Later in 2018, the fulfillment design team was asked to redesign the fulfillment area in Cart. After months of design iterations based on qualitative and quantitative studies, the team landed on the concept of "tiles" - three rectangles representing three main fulfillment options: "Store Pickup", "Ship to Home" and "Express Delivery". Based on the success of the concept, we got a request to rethink the end-to-end fulfillment journey, starting from PIP (Product Information Page). It was obvious that the challenge is bigger than "dropping cart tiles on PIP". We got a unique opportunity to think about the fulfillment journey horizontally - from PLP to PIP to Cart to Checkout in order to provide the right information at the right time.
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 that we would normally be.
While learning where we are headed as a company, we needed to analyze where we are currently at with our fulfillment solution.
There were times when fulfillment was just as simple. There was a pickup option and a delivery option, and nothing else. In 2017, it resulted in a beautiful dual state design for the Product Information page that was named "Buybelt".
But then life happened.
Zone A (the zone of the page below the header and above the fold) started to progressively grow pushing 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 arguable could have a better place than Zone A, other, 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, there was no 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.
You can find yourself in very different circumstances while shopping at the homedepot.com (not even taking into consideration the pre-purchase stages of a shopping journey like Problem Recognition, Information Search, Evaluation of Alternatives, or Purchase Decision). 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.
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.
"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
We knew what we need to solve for and our users' needs; now it is time to dip our toes in the water and understand the best way to go about conceptualizing our ideas. We went ahead and put a few ideas together with the help of a few whiteboards and paper prototypes.
We quickly realized that with any fulfillment-related change on the Product Information Page runs the risk of inadvertently harming the experience for users from another perspective. The primary area above the fold (we called it "Zone A") has product details, pricing, discounts, categorization information, references to reviews, and a Q&A section. It is the most visible and "competitive" area on the Product Information Page, and all of those things were outside of the main area of expertise for our team.
This meant we needed to have a structure to collaborate with the other teams, making sure we have product ownership representation for each element within the Zone A area. The previous fulfillment solution (the "Buybelt") sat below the fold and was outside of the main battlefield, but now we're coming right into it. Changes like this shouldn't be happening without full understanding of motivations and needs of other teams (who, in this case, turn into our stakeholders), some healthy debate, and, of course, prototyping and user testing.
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.
...Create an experience that is flexible enough to support more complex categories?
...Create full visibility of choice?
...Help users select a fulfillment method at the right moment of their shopping experience?
...Make room for fulfillment options in Zone A?
...Identify the customer’s level of urgency?
After identifying areas of opportunity, we drilled deeper to determine our Design Principles for a Design Sprint where we take a closer took at the UI of the fulfillment options themselves as opposed to how they fit on the page.
In order to be successful, our solution must:
After months of discovery and exploration of the fulfillment world of the Home Depot, we summarized four main reasons to redesign the fulfillment area on PIP:
1. More often, we see users are not ready to make a final decision about their preferable fulfillment option before they add it to their cart.
2. Not that long ago, Home Depot introduced a new fulfillment method - Express Delivery - delivery from nearby stores that makes it as fast as same-day. Why does this new fulfillment method mean you have to redesign things? Is this an opportunity to talk about the fulfillment matrix of speed vs. in store?
3. It's not just Express Delivery that was being added. With the website constantly developing and evolving, more and more fulfillment-related features are coming up. The dual-design and two "Add to Cart" buttons became very limiting (Instant Checkout, Installations, Subscriptions, and PayPal were few of the suffering new features).
4. In 2018, the design team came up with a new solution for presenting fulfillment options in Cart we called fulfillment tiles, and the new design was extremely successful. It was time to apply learnings from the Cart redesign to other pages in order to create a consistent and holistic experience for our users.
From these user interviews we identified three main attributes that customers valued including urgency, cost, and location. We mapped our current fulfillment options to these values and it was clear that our current format did not accurately reflect the user's preferences.
After mapping out our user's values and their options, a clear pattern appeared. If you take two of our customers' core values and see where they overlap, and it charts their preferences to each option that we provide.
These charts gave us the context we needed for our design ideations as well as a communication tool for our stakeholders.
Is there a way to make this chart show cost as well? I think it would be perfection if you could.
