Walmart Checkout

Creating a new design system to redesign Walmart.com

Client: Walmart eCommerce
Website: walmart.com
Date: February 9, 2018
Services: Visual Design, UX Design
Platorm: Website
Design Tools: Sketch, Invision, Zeplin

Challenge

Redesign the checkout experience using Walmart’s new design language.

As part of the cart and checkout team, I was responsible for applying and contributing to a new design language aimed to help our customers save more and live better.

cart
fulfillment
shipping
payment
review

Process

Documenting the current state

The current checkout pages were built by a legacy team that no longer exists.  We were immediately faced with a roadblock because the design files that were handed to us were not up to date with the current website. Our team of 3 designers were tasked with documenting the checkout process based on current production and re-creating these files in Sketch to have a baseline to work from.

DOM INSPECTOR

Understanding the use cases

Once I documented the happy path, I began to document specific use cases such as for existing user, new users, and guests. Within these flows contained various components dependent on fulfillment of items such as shipping, pickup, or eDelivery. I put together an end to end flow to ensure I did not miss any use cases.

DOCUMENTING USE CASES

Meeting accessibility guidelines

As the platform team was building this language, I noticed a few components that were not ADA compliant. For example, the input field labels were inside the fields and the color did not have enough contrast to pass WCAG AA requirements.

The other issue was the treatment of form labels. The intended behavior from our platform team was the labels would disappear when the user clicked into the form. This presents an accessibility issue because when the label disappears, the user is unable to double check they’ve entered the correct information.

I raised this flag to the team and they modified this component so that accessible for all other verticals who shard this component.

 

WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text

Adding new components

Because I documented the existing checkout flow, I also discovered a few key components were missing from the pattern library. Global error messaging and fly outs were two patterns that were used across the site.

Discovering engineering’s inadequate bandwidth to meet deadline

As engineering team focused their efforts on the home page and core site, they realized they did not have the capacity to implement the redesign for several verticals. The new design follows a new completely new grid system than our current site, which required a lot more engineering effort to recode.

I was asked to provide a “light” version of a few screens that followed the old grid to decrease the workload and help us meet our launch date.

ADAPTING TO A “LIGHT” VERSION

Delivering clear design specs for development

I worked closely with my engineering and product partners to answer any questions or concerns they had regarding the new designs. During my walkthrough meeting, I was made aware of a few use cases I missed. Because I did not have access to specific parts of the site, I worked with the developers to gain access to a test environment to see specific use cases.

 

I uploaded all my designs to Zeplin so that developers could easily reference new and old screens. Due to the fast paced nature of this project and constant updates, I wanted to make sure developers did not miss any changes I made. Adding notes to my latest designs and tagging my appropriate engineering partner ensured they were aware of what changes have been made.

 

Final Designs

DESIGNS CREATED FOR WEB, iOS, and ANDROID

Result

User testing showed customers reacted positively to the new design 

“I didn’t even recognize it was walmart, I thought it was beautiful and it made me want to shop the features that were shown” .

“this (new) navigation reigns supreme without a doubt” “this looks a little bit more like Wayfair..it’s more relaxing and calm and pretty” “(current) it’s so busy it looks like an infomercial, it looks like Toys R Us, it looks junky”

“fresh feel, modern, easy, quick”

“beautiful, simple, it didn’t feel like Walmart…we’re not bogged down with a huge navigation menu at the top, clear and direct, calmer and warmer feel.”

Key Learnings

Documenting the current state and use cases was time consuming, but really helped me understand the customer journey. It’s easy to focus on the happy path, but I learned that there were many edge cases that could potentially prevent the customer from checking out. Continuous reviews with engineering and product partners ensured I covered the most critical use cases for the checkout process.