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
One of my early assignments while working with Costco was to put together foundational checkout research. In order to accomplish this I started by compiling research from academic sources, investigating 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.
