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

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.

Must Haves

• Specific file formats & requirements for lean implementation
• In the case of errors, customers will have to the option to ignore them or correct them in their spreadsheet & re-upload
• Empty Cart before Importing items
• Provide a generic warning message for each row that has an error 

Should Haves

• Provide user a clear definition around each type of error

• Ability to Initiate Import Order with pre-existing items in Cart : Options to Merge or Replace Exact Item Quantities (Or automatically trigger one during the import process?)

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

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.

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

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

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

Feedback

6 of 10 participants

Were confused by the differences between these three options.

Revised Screen

Removed

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.