Checkout Redesign

Mockup of both desktop and mobile checkout screens

Intro

The purpose of this redesign was to improve the checkout experience for users of an ecommerce site. It made the checkout process easier by simplifying and shortening forms and ensuring best practices were followed. My role was to research best practices and industry standards, create wireframes and mockups, and assist with usability testing. I collaborated with product management and research.

Process

Image of Baymard Institute's checkout case study
Case study by Baymard Institute

Before starting any design work, I studied checkout best practices documented by Baymard Institute and Nielsen Norman Group to bring sound recommendations for improvement to product management and stakeholders.

After summarizing my findings from the best practice documentation, I studied other ecommerce sites, including both competitors and other well recognized sites, in to understand standards within the industry and beyond.

Checkout wireframe flow
Wireframe flow illustration

Once I was ready to start designing, I created wireframes using Sketch to show options for different layouts and flows to get early buy in from stakeholders.

After the wireframes were complete, I created mockups in Sketch. I used these high fidelity visuals to create a simple prototype in InVision, so that stakeholders could experience the proposed checkout flow.

Invision prototype of simplified accountholder flow
Invision prototype of simplified accountholder flow

View the guest checkout prototype.
View the accountholder prototype.

In addition to an InVision prototype, I assisted the UX researcher in creating a higher fidelity Axure prototype to use in usability testing. Along with the UX researcher, I helped facilitate usability tests to validate my design decisions with potential users.

Learnings

Through this project I learned how to effectively synthesize lengthy design studies and use the findings to defend my design decisions. I also got great experience facilitating usability tests.

Testing my designs with real users empowered me to push the designs further by validating what information was necessary, and where. I was reminded that showing less information for the sake of a clean design can actually introduce more confusion if a user can’t find everything they need.

I enjoyed getting to overhaul a vital part of a site that was in need of a redesign. In a way it was cathartic to lay out all of the updates that I had been wanting to make for quite some time. The biggest challenge of this project was striking a balance between an ideal design and what could realistically be accomplished with resource constraints. I was also surprised by how much I enjoyed stepping out of my comfort zone (and my usual role) to facilitate usability tests. Getting direct feedback from real users was both rewarding and humbling.