Skip to end of banner
Go to start of banner

App - Checkout

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Current »

(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=/

Performed through Validately.

CSV file containing the test results below

Milestones/Highlights

06/25/20 – Success

07/01/20 – Warning

07/02/20 – Note

Deliverables

Figma comp

Resources

Current Screenshots:

Cart

Step 1 Payment Info

Step 2 Order Info.png

Step 3 Review Order

Confirmation page

  • No labels