UX Writing Project — Grocery Pickup Redesign (Kroger/Fry’s Food)
When it comes to grocery shopping, I’m a curbside pickup enthusiast. The user experience for my preferred store, Fry’s Food and Drug (Kroger), is relatively smooth.
There’s one aspect that needs improving — the substitution report.
This project breaks down the issues with the substitution report, and digitizes the document.
Background
Kroger provides the option to allow substitutions for items when ordering online. This can be done universally or on a per item basis.
Kroger employees deliver a paper copy of the substitution report with every grocery order. This is not a receipt, but a list of substituted or refunded items.
Problems:
- Internal/non-customer facing information e.g. Totes, Terminal ID, etc.
- Wide (10 columns), and confusing layout.
- Lack of clarity on what is substituted and price adjustments.
- The substitution policy is placed below the information, reducing its visibility.
Objective
Create a digitized substitution report to be sent via SMS before or during pickups. This requires improving the information architecture, content prioritization and overall clarity of the document.
Wireframe
I recreated the document in Google Docs. Then created a new version in the same 8.5" x 11" format.
Updates:
Remove non-customer facing information — These details are important for order fulfillment but not relevant to the customer. They take up significant real estate and increase confusion.
Add familiar terminology — There’s an important word missing from the original document — refund. The report is divided into two sections.
- Refunds, the item was not subbed (user preferences or a substitute could not be found).
- Substitutions, the item was partially or fully substituted and price adjustments were made accordingly.
Reduce columns — This bulky format increases eye strain and is harder to follow. Seldomly used columns were removed. For instance, Sub Accept, is for when employees call customers to see if they will override their preference and accept a different product. This is a smart policy for when orders are due to change significantly. It doesn’t need to be visible on every document.
Substitution policy placement — The substitution policy is moved “above the fold” to increase visibility and reduce customer friction.
Mockup (mobile)
I developed a mobile-first mockup in Sketch. Customers would receive a link to the report via text as they picked up their order.
- The home screen shows customer and order information.
- The refund and substitution sections are drop-downs.
- A link to the order’s digital receipt is included.
- The substitution policy is clickable modal window.
- This initial version is a straightforward application of the table/column format, with border lines removed.
- The refunds and substitution sections are dropdowns which are horizontally scrolled.
Next Steps
If this project was set to go forward, next steps would include:
User research — Customer interviews and surveys. These would be more conclusive with the initial mobile mockup in-hand.
Substitution policy — The policy text is still a bit clunky. I’d look to shorten it or use visual elements to reduce reading time. It could also be integrated into the design with prompts and reminders.
Investigate table/column format — I’m not sure this is the best layout. Competitive research and similar processes should be analyzed for insight. UX designers might have a savvier way to present the information.
Interactive elements — There should be more interactivity in the screen. Clickable items, images and nudges for action.
Browser and app mockup — From there, a new mobile mockup would be completed along with a browser and app mockup informed by new findings.
