Expediting Ecommerce Orders with an Import Tool

Gordon Food Service:

E-Commerce Platform

Gordon Food Service:
E-Commerce Platform

import-order-load-r2-new

Overview

As part of the GFS's food experience, we needed to provide customers the ability to import spreadsheet files and quickly create orders

Define

What are we solving for our customers?

Enable customers to quickly import files for creating an order

Reduce customer users' interaction cost compared to the previous platform 

Who are we designing for?

  • Power Users - Very similar to our persona Paul who wants the UX to be self-service
  • Large chain customers that record & export their order sheets from a 3rd party software and place orders through GFS
  • Dedicated employee(s) in charge of placing these orders who is very proficienct with software and want to log in, place order, and get out
GFS-PERSONAS

Honing in on Functional Requirements

Working with the product owner and technical team members, we identified features requirements and capabilities through feature refinement and kickoff meetings.

Nice To Haves

  • Persisting Data/Pausing Process without loosing data
  • Upload Multiple Files
  • Auto Detect Column Information to remove layout requirement

Ideation

After ideation, I utilized the user flow diagram to produce mid-fidelity screens for the prototype used in validation testing. The screens created were prepared to have all must-haves and should-haves functionality.

Journey

Get Started with an Upload

Customer wants to get started and import their order. We’ll need to inform them how to utilize this new feature and set up their spreadsheet for success.

Opportunity: Jumpstart their spreadsheet creation by offering a downloadable template.

Review User Errors (if any)

A crucial point of the UX where they have to address errors from the file. We’ll need to inform users what and where is the problem(s).

 Opportunity: Save customers time & some progress by providing option to continue with good items.

Confirmation of  Import

Give customers the “green” signal that their items were imported to the cart successfully and can proceed to checkout.

Opportunity: Take them to them to the Cart for their journey: Checking out

Wrap Up & Checkout

Customer lands on the Cart Page & preparing to checkout.

Whiteboarding : Sketching

Screen-Shot-2021-07-05-at-6.29.11-PM
Import-User-Flow

Prototyping

After ideation, I utilized the user flow diagram to produce mid-fidelity screens for the prototype used in validation testing. The screens created were prepared to have all must-haves and should-haves functionality.

Wire_CartImport_S1
Wire_CartImport_S2
Wire_CartImport_S2.b
Wire_CartImport_S2.c
Wire_CartImport_S3
Wire_CartImport_S4

Validation Testing

After ideation, I utilized the user flow diagram to produce mid-fidelity screens for the prototype used in validation testing. The screens created were prepared to have all must-haves and should-haves functionality.

Key Areas of Interest

Guage the customer understanding and intuitiveness of the prototype design

Do customers desire the ability of Importing Order with pre-existing items in Cart? If so, do they want a default option? 

 (Merge or Replace Options from Functional Requirements section)

Would customers need explicit microcopy for the error scenarios during the Error Review flow?

Initial Screen

Wire_CartImport_S2.b
Feedback

 

6 of 10 participants

Thought this was the last step before placing their order, which was not the case. They had multiple steps before placing the order.

 

5 of 10 participants

Would like the descriptive error messages.

Revised Screen

Wire_CartImport_S6
Solution
  • To reduce confusion and perception of this screen being the last step before order placement, we moved towards the modal layout to create more differentiation between the import flow and the cart/checkout pages.  
  • Tested the modal design with a few customers and there was no confusion. 


  • Worked with the product owner to write clearly-defined copy for the different errors

Initial Screen

Wire_CartImport_S3
Feedback

 

6 of 10 participants

Were confused by the differences between these three options.

Revised Screen

Removed

Wire_CartImport_S3
Solution
  • Given the uncertainty around these three merge options and no conclusive result of customers expecting one of the options to occur automatically in the process, we opted out of this functionality and stuck with the original MVE requirement  - clear cart before uploading a file.
Find Me Elsewhere:
AP Creates © 2024
View