Costco.com Checkout

Redesigned to match user needs with a mobile first perspective.

Before: 
Costco.com had a checkout process designed exclusively for desktop users. Mobile users struggled to checkout or would abandon the process completely. There were four steps in the process that didn't align to industry best practices. Users were asked to focus on choices that they typically only made the first time they used the site like adding a new address or uncommon tasks like shipping to multiple addresses. 
After: 
Costco.com's checkout experience was completely redesigned. The steps were streamlined from four down to three and the experience now focused on the needs of the majority of users. The new experience is fully responsive and designed from a mobile first perspective. It has received excellent reviews from both users and executives.  
My Roles: 
UX Designer 
UX Researcher 
Part 1: Foundational Research 
I arrived at Costco on my first day to the following question: "We are redesigning checkout and need someone to put together some foundational research. Can you help us with that?" 
My answer was simple: "Yes." 
Once I found out where I'd be sitting to work and how to get into the into the computer I began compiling research from academic sources, investigated competitors and began to form a high level vision of what checkout could be for a site with Costco.com's needs. 
I put together several user flows showing the existing flow and how the requirements in that could be consolidated from four steps down to three (also documenting the interactions inside each step) and provided recommendations on how to consolidate existing functionality into more streamlined and modern interactions. 
My Deliverables: 
User flows 
Industry best practices comparisons 
Overall experience recommendations
Part 2: Design and Study 
Because this was such a large effort the team was split into two groups working in parallel. One group would focus on a mobile first strategy for designing the new checkout screens based on the foundational research. The other would be comprised of myself and another UX practitioner and together we planned a usability study to get real world findings on the experience the others were designing. 
While these teams were working on different deliverables they would be in contact every day at a stand up and multiple times a week at critiques. While the focus of my work at this point was planning a study I remained heavily involved and worked with the team to focus the experience on what we hypothesized mattered to most users, minimizing things that we knew were needed but not as important.  
Page one of checkout before the redesign, and page one of checkout after the redesign. Note that the same options are still available to the user in the new experience (on the right) options used less often have been deprioratized or hidden behind progressive disclosure interactions.

There were questions around two different checkout frameworks to pursue. Both options seemed as though they would benefit our users and we decided that testing both was the route we would need to take. 
My main responsibilities in this portion of the project involved crafting scenarios that would let us test our new or modified features, help prepare an interactive prototype that could be tested using the screens designed, work out some of the logistical details around the usability studies and facilitate the usability studies themselves. 
We ran an large study that covered mobile and desktop of two different checkout frameworks with 30 users in person. It would provide valuable information that would confirm the big design decisions we had made and help us refine some of the finer details of the experience. We also used the data we gathered to decide on the three step, three page checkout process that is live today. 
My Deliverables: 
Targeted scenarios for the usability study 
Research plan for an A/B test with 30 in person users 
Research report out presented by myself, my research partner and the global design lead to executive level stakeholders 
Part 3: Design Round 2 
Once the study had been presented to our stakeholders we moved to make changes to the screens based on the findings. At this point I dove into the deep end of wireframe creation on the project, creating the Order Confirmation page. This page had not yet been created as the study ultimately focused on the pages before it. I volunteered for this work because it tied directly into other design work on my desk at the time. I was able to work on both pieces together and save the team several person-days of work. 
The order confirmation page in mobile.
The Order Confirmation page. "Cancel Order" functionality not shown.

After a round of sketches I moved into Illustrator to create pixel perfect mockups, again taking the mobile first strategy to this page.   
My Deliverables: 
Pixel perfect wireframes for the Order Confirmation Page in Desktop, Tablet Portrait, Tablet Landscape, Phone Portrait and Phone Landscape 
Part 4: Reception 
The new checkout experience was launched in the first quarter of 2017, and received immediate positive feedback from our executive stakeholders. While they had been pleased with the results they had seen along the way, the project going live and becoming "real" was another matter altogether. 
Not only were our internal stakeholder's pleased with the results, but our ultimate stakeholders (the users) immediately started commenting through various feedback channels about how the experience was streamlined, simple and had improved their experience with Costco.com. 

Related work

Forecast Breakfast
Windows Store for Business
Copperleaf
Account Selector Pattern
Critique Process Improvement
Arrow S3 Intranet
Storyboards
Design Toolkits
Personas
Design Systems
Back to Top