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.

Color Picker Tool

Color Picker Thumbnail

Color Picker Header

August 2018  |  Through user research, it’s been revealed that many shoppers have a difficult time coordinating colors when purchasing multiple items, especially online. After identifying color coordination/palette building as a user need, I decided to build a tool that would take the guess work choosing the right colors when shopping online.

Color Picker Sketch

Color Picker Flow

In thinking through the user flow and working up wireframes, I wanted to match how people typically shop. I started with the assumption that most users would start with one item that they like, and coordinate colors around that primary piece. With the color picker tool, users can either choose a product on the site, or upload a photo of their own, then browse color palettes and shop products within that color scheme.

Color Picker Wireframe

After laying out wireframes, I created higher fidelity mockups and built prototypes to show both the desktop and mobile interactions.

Design Thinking Exercise

April 2018 | This project was for a Udemy course (Cooper Crash Course: Design Thinking in 3 Steps). This course focused on understanding the client’s target audience and their needs. The directive was to make the pre-flight experience more enjoyable for travelers.

I started by brainstorming ideas about pain points involved with travel in hopes of figuring out how to make them better. I landed on the idea of a suitcase that would make getting through security earlier.

After getting my own thoughts on paper, the next step was to establish the target audience for my client, UniversAir, and then define research objectives. I decided the best target audience would be travelers who fly regularly, but not too frequently, so they might describe the aspects of traveling that they struggle with without letting routineness impact their impressions. I refined research objectives based on what I wanted to learn from my target audience, then interviewed seven people ranging in age from 23-58 who travel at least twice a year for a mix of business and pleasure.

Once I had enough information from the people I interviewed, I was able to create a proto persona – Penny, the planner. Penny likes to feel in control, so she’ll do anything she can ahead of time. Minimizing the time she spends waiting at the airport is important too, since crowds make her anxious. Forming a proto persona with information gained from the interviews provided a lens to focus my ideas and solutions. I then brainstormed new ideas based on what I learned through the interviews.

From the list of ideas that came out of my second brainstorm, I chose one to expand upon. To help our users minimize the time they spend waiting at the airport, I decided it would be useful to combine traffic data with known airport wait times so users could know when they need to get to the airport. I created a storyboard illustrating this feature, then I was able to use the storyboard to validate whether or not this idea resonated with potential users.

This exercise was great practice in walking through the design thinking process. I enjoy getting to take the time to start a project from the very beginning. Defining research objectives and interviewing people to gather information was a great way to break down my own preconceived notions and design something valuable for users.