Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

(placeholder for Epic)

Overview

Requested by Billy Colonna, on ??? ??, 2020

Description

History

What is the problem?

[Below is from Billy Colonna on 2/28 2:45 PM]

Billy believes the stepped approach for Native Checkout is the right decision. However, he thinks some of the changes made for the desktop scenario don't really work for mobile.

Summary:
Keeping Order Options as a separate step and moving Payment Method to the last can make checkout take longer than the current mobile web version.

Current Mobile Web Checkout Flow:
Step 1: Payment Method
Step 2: Order Options (Job Name/ PO#/Delivery or Pickup address)
Step 3: Review Order (add Date Needed and Note if necessary)
Place Order: Confirmation Page

Current Flow:

  1. If user selects Credit Card from Cart, they begin on step one to confirm the saved card or select/provide a different card before progressing to step 2

  2. User selects "Charge to Account" from Cart, Step 1 is skipped and they start on Step 2 to add Job Name/PO and select shipping/pickup specifics.

Suggestion:

  1. Have 3 steps: Payment, Options, and Review

  2. Make Payment the first step and skip it if the user selected "Charge to Account" from the cart.

  3. Second Step should include Job Name and PO#, Date needed and Delivery/Pickup Settings

  4. Third step is Review where user can see all the info and products and choose to go to any section to edit the information.

How did you become aware of the problem?

Billy informed me over Teams that we need to create the checkout as Native because the embedded web view was slow and a bad experience.

Who is affected (customer, associate)?

Customers

What is the value to the business and/or customers?

Ideal outcome

Known constraints

People

UX

  • Dan Flynn, Designer

Product Team

  • Billy Colonna

Stakeholders

Work

Research

Discovery

??? Performed by Billy

Analysis

???

Design

Solutioning

App - Checkout Figma Comps
https://www.figma.com/file/R9dNWqQ7gq7uxSqrjg5Occ/App---Checkout?node-id=0%3A1

Prototyping

App - Checkout Figma Comps - Checkout - 320w Stepper
https://www.figma.com/proto/R9dNWqQ7gq7uxSqrjg5Occ/App---Checkout?node-id=1640%3A44274&scaling=scale-down

Testing

App - Checkout | User Testing / Generic User (Stable)
https://www.figma.com/file/yo7Alcko6tl1LGc4thEto6/App-Checkout-User-Testing-Generic-User-Stable?node-id=0%3A1

Three prototypes were created and tested by our customers using Validately (the Current, Stepped, and SPC designs).

Prototype 1 - Current Checkout

Prototype 2 - Stepper

Prototype 3 - Single Page Checkout

Created a User Flow for each checkout prototype version using Miro board - https://miro.com/app/board/o9J_ksCNknI=/
https://miro.com/app/board/o9J_kt8dmFM=/

Image Added

Performed through Validately.

CSV file containing the test results below

View file
nameMobile App Checkout - 3 Prototypes-notes-2020-08-25.csv

Milestones/Highlights

Tip

06/25/20 – Success

Note

07/01/20 – Warning

07/02/20 – Note

Deliverables

Figma comp

Resources

Current Screenshots:

Cart

Image Added

Step 1 Payment Info

Image Added

Step 2 Order Info.png

Image Added

Step 3 Review Order

Image Added

Confirmation page

Image Added