Grocery Fulfillment App
Android mobile application to fulfill curbside pickup orders.
Overview
Meijer is a midwestern family-owned superstore that partnered with Dematic for an automation fulfillment solution. This allows customer orders to be filled and assembled primarily by automated robotics and topped off with employee hand-picked items. With online shopping and order pickup becoming more common, their current curbside pick is not sustainable and space is becoming an issue.
Goal
How might we design an experience that is intuitive for users to fulfill orders under 1 hour.
The Objectives
Mobile application
Multi-mode
Deliver before September pilot
Project Scope
Design a new an end-to-end Android native mobile application product.
Duration: June - August, 2019 – 3 Months
The Team
I was one of two UI & UX Designer on an agile team with guidance from a Senior designer, 1 Project Manager, and 5+ engineers.
My Role
Responsible for the overall visual design and UI.
The Design Process
Requirement Gathering
My team gathered requirements for the end-to-end experience then quickly moved into feature synthesis to scope work for the MVP launch.
Our Approach
With a tight schedule we had 3 designers for velocity. With the combination of a fixed deadline, app store submission time, user testing, and UI quality assurance meant I needed to get the experience right in the first four weeks. To move quickly we needed to keep research lean and rapidly prototype.
2 Rounds of User Testing
We conducted two rounds of user testing with a high -fidelity prototype with 2 employees and 3 observers at the grocery store. After each round of testing, my team and I implemented improvements.
Round 1
Testing the clarity of language and task flow
1. Sign In / Pick Mode
2. Start Order / View Item List
3. Fulfill List
4. Complete Order
Round 2
Testing and validate workflow for altering items
1. Single Item
2. Partially Fulfilled Item
3. Multiple Barcodes for Weighted Item
4. Unavailable Item
5. Substitute Item
User Testing Key Insights
Scanning
We saw that users kept going back to the main screen to access the scan function.
Substitutions & More
Users were a bit confused on how to substitute an item.
Customer Note
Users found notes helpful and relied on it to help with decision making.
The Outcome
Faster Order Fulfillment In Under One Hour
Our team delivered an Android mobile application on time. It was a critical piece to the micro-fulfillment solution to complete their omnichannel distribution strategy. We shipped a multi-mode product that can fulfill orders in one hour or less. Additionally, it optimized accurate picking and data for inventory management.
The Solution
Multi-Mode
After an employee signs in, they are directed to select a mode before they can begin their work. By selecting a mode, the employee will know the type of fulfillment task they will perform.
List Item
Optimizing employee shopping route by grouping items that are in the same isle. Collapsing item cards when it’s been scanned to allow users to focus and scan the list. Added iconography to identify and quickly recall how an item was fulfilled.
Scan Item
Made scanning items accessible across screens. The fab (floating action button) allows employees to scan at the list level and an additional scan action at the product detail level. A dialog for any duplicate scans was added.
Substitute and More
Giving employees to options on how to fulfill items based on customer notes or substitution preferences.
Weighted Items
Users can scan barcode with ease at the screen when a grocery item needs to be weighted. The camera allows employees to do a quick scan without manual entry of barcode.
Manual Entry
Manual entry gives users an alternative way to fulfill an item for quantity, or if barcode was unable to be scanned.
More Case Studies
Winnebago
Responsive Shopping Website
Little Caesars Fundraising
Mobile First Responsive Web Application