Role

• Product Designer
• UX Researcher

Client

Walmart Canada

Agency

Publicis Sapient

Project

My Walmart: In-App Payment

Duration

Sep - Oct 2018

 

My Walmart: Scan & Go, In-App Payment

My Walmart App customers now have the option of paying in-app through Walmart's Scan & Go in-store app feature. Through user testing, we discovered that customers were having a hard time adding a new payment method to their account. Design improvements were made in how success messaging would appear and display on screen to indicate when a new payment method is added.

Project Deliverables

• Audit of in-app payment set up flow

• Design solution for payment set up flow

• Design solution for credit card errors

• Documentation of work on Confluence

Tools & Skills

• Sketch, Zeplin, InVision

• Collaboration with creative team

• Working within design systems

• Continuous iteration and rapid prototyping

 

 

Process

1. Identify

Understanding friction points when setting up a payment method on the My Walmart app

2. ResearcH

Evaluative research and usability testing on in-app payment flow

3. Design

Design exploration, decision validation and execution

 

Screen Shot 2019-08-05 at 2.55.23 PM.png
 

1. Problem

Customers were unaware of next steps after adding a payment method. All customers felt confused in the payment set up flow, while selecting 'Add' at the top right corner of the Payment page - assuming that would confirm their card details.

How might we simplify the process of adding a payment card to the app?

 

Audit of in-app payment set up flow

Adding a payment method

 
 

In order to solve this problem and redesign a solution to improve the payment set up, I analyzed my previous field research findings to gather an understanding of why customers may have been adding their credit card incorrectly.

I gathered screenshots of points in the payment set up flow that customers were stopping at and identified the points of frustration they faced. In order to redesign a new solution, I needed to understand the cause of the confusing experience and interpret what may have led to a broken user flow. The goal for the redesign was to create a clear experience in order to successfully add or edit their credit card.

Changes.png
 
 
Flow.png
 
 

Payment Methods - Task Flow (Evaluated)

  1. Adding a payment method

  2. Selecting as a default payment

  3. Edit payment method

  4. Confirmation

  5. Success messaging

  6. Error messaging

 
 

2. Research

In-store shopalong (field research) usability testing was conducted across two greater Toronto area Walmart stores. As a product designer on the team, I was responsible for creating the research brief and leading the test facilitation, in addition to designing.

 
Initial mock test up at the office before store testing

Initial mock test up at the office before store testing

 
Testing at Walmart Supercentres across the GTA

Testing at Walmart Supercentres across the GTA

 

This role provided a lot of first-hand insight and experience when meeting real customers and seeing the app in-context. A detailed case study outlining the testing completed can be found here.

 
Overview of design recommendations presented at synthesis share out and demo

Overview of design recommendations presented at synthesis share out and demo

 
 

3. Design

uxflow-2.png
 

Payment Methods - Task Flow (Revised)

  1. Adding a payment method

  2. Selecting as a default payment

  3. Edit payment method

  4. Confirmation

  5. Success messaging

  6. Error messaging

 

Prototype interaction test

Original
updated_test.gif
 
 

Final Flows

Setting up and editing payment Methods

 

success and error handling for payment methods

 

TakeAwaYs

  • Alignment with fellow designers, product managers, QAs and development was crucial for testing to happen

  • It’s important to set guidelines and goals as early as possible, informing your team of what needs to be prioritized and handling time wisely

  • Trello was a huge success to get the whole team on board with using during the field research trip, it increased our efficiency capturing notes and synthesizing after testing

Reflecting

Design really is a never ending process and I love it. It’s interesting how something as simple as entering your credit card payment into your phone can often not be as easy as it seem, evolving into many different directions and use cases to consider.

 

UX RESEARCH, Interaction Design

NEXT PROJECT: My Lists →