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.
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.