Kohl's needed a way to improve their usage of the "In-Store Pickup" option when users are checking out on their website. The checkout cart needed improvements to more clearly show users what is available to be picked up or shipped, so they can make informed decisions on how to proceed with their order.
Beginning this case study, I began to navigate around the Kohl's desktop site and started to make notes of some key observations. I searched for items I was interested in, added them to my cart, went through the checkout process, etc. While doing this, I noticed that Kohl's was providing a promotion of $5 Kohl's cash if you utilized their "In-Store Pickup" option. Therefore, I was able to make the assumption that it is more cost-effective and beneficial to the business if customers chose this option. Further, I was able to assume that customers were not selecting this option as much as the business would like and came up with this as a Business Observation:
We have observed that users are not utilizing “In-Store Pickup” as an option during checkout, leading to increased operating costs and complications due to shipping.
I was now able to begin defining a quick proto-persona based off of the users I had been speaking with:
With this business observation and persona, I was able to examine the site for ways to improve the utilization of In-Store Pickup. As I spoke to more users, I could identify a clear pain point on the site: Checkout. I quickly observed that users want an easier way to view what is available to pickup and what needs to be shipped. Some even went far as saying they got so confused they just gave up and didn't make the purchase. 85% of users said they would abandon the items that need to be shipped and just select the ones that are available for pickup. This was revealing to me as it meant these users are preferring In-Store Pickup to having items shipped to their house.
Based off of user feedback, I was able to map the journey the user goes through and identified the two areas which were most frustrating for the users:
After users toggled the “Pick Up My Order” option, it generated quite a bit of confusion.
Utilizing the journey map, proto-persona and user feedback as a whole, I could identify this problem statement:
While checking out on the Kohl’s desktop site, Olivia needs a way to clearly see what items are available for in-store pickup and which items will need to be shipped because they find in-store pickup to be cheaper and more time efficient.
How Might We clearly show desktop shoppers which shipping or pickup options are available to them?
Upon analysis of the checkout screen, I found that there was not a clear summary of which Pick-Up/Delivery options available to the user. Because of this, I came up with an idea to group each option into its own section and developed a hypothesis:
We believe that providing separate sections for In-Store Pickup and Shipping for Olivia will lead to increased utilization of the “In-Store Pickup” function of the checkout process.
With my hypothesis, I began to rapid test a few wireframes to see which options seemed to be the most viable for implementing the sections on the checkout screen:
This was my first attempt at grouping these into sections as it accomplished two goals: a clear summary of what was available for each option, as well as the ability to see the details of each item in your cart. As I began to try and turn this into a full prototype, the spacing looked awkward and it was hard to get the cart to display in a way that was more useful than what already existed. So I decided to make less of a change to the current structure and simply section them off within the list that has already been built. This will also have an added benefit of decreasing the development time as its less drastic of a change.
This option proved to be much better for the layout visually, but one of the requirements that had come up from the users was not being accomplished: there was not a clear summary of what options were selected. So I added a small summary section in the next iteration.
This option accomplished many of the issues we set out to solve and was ready to be put into a high-fidelity prototype.
In order to test the effectiveness of the new design, I set up a user test to determine how quickly users were able to identify the different options. I showed one set of users the current Kohls.com site and another set of users the redesign.
The following questions were asked:
Based on the user tests performed, the users were able to identify their Pick-Up/Delivery options twice as fast in the redesign than in the original. When combined with other parameters in a real world situation, this could lead to significant improvements in the usability of the website. This one test leads me to believe that redesigning the checkout page is definitely worth pursuing but there would need to be additional research performed to support this decision.
The scope of this case study was small, so there is much more that could be worth pursuing in the future. The most obvious improvement is determining a more robust way to test the feature on users. The testing I did focused on two static images and users were not interacting much with the website. This leads to a very narrow focus. Other things could be focused on such as heat maps to determine if users are looking in different places to try and find what they need or simply observing users as they navigate the screens.
An enhancement that did not fit the scope of this case study was a feature to suggest items that are similar to items that are only available to ship but are available in the store that the user would be already going to. I spoke with multiple users who said that they would only buy the items that are available for In-Store pickup and a few even said once they got to the store they would go look for similar items to the ones they wanted but couldn't get them In-Store.
Finally, this will also need to be implemented on Mobile so pursing the way to implement it in the app should come next.