research, UX/UI design, strategy
Helping users troubleshoot and print shipping labels for customer e-grocery orders with ease and efficiency
OVERVIEW, ESSENTIALLY
There’s just a lot going on in a micro-fulfillment center 🤖
The Problem
Takeoff’s main users, the MFC Manager and the Associate, have many jobs to be done during their shift. Mainly, they are working hard to ensure that customers’ orders are picked and sent out on time.
Since the Managers and the Associates rely on the OSR’s technology to be functioning properly at all times, if there is an issue with the machine (e.g., the automatic OSR tote label printer or label applicator breaks down), they are practically halted from getting orders out to customers.
The Goal
Given that the printer and label applicator of the OSR will represent a single point of failure for MFCs, I needed to design a robust fallback solution which allows the site to operate when the printer is down. This would give users the ability to print labels for individual totes or orders through the Takeoff Mobile app at one of the printers outside of the OSR.
From a business standpoint, Takeoff wanted to ensure that more orders would be able to get sent to customers on time and to reduce the amount of support tickets related to this issue.
Project Timeline: 2 months
Role: product manager, team of engineers, product designer (me)
Team: strategist, product manager, dev team, product designer (me)
KEYWORDS
MFC = Micro-fulfillment center aka, the place where the OSR robot is kept
OSR = giant robot in the middle of an MFC that allows users pick multiple orders fast and efficiently, with little to no errors
Tote = bin that users pick customer groceries into, needs a barcode label to make sure it gets to the right customer
OSR in an MFC
Associate using the OSR to pick multiple customer orders at once
First step
Understanding the current state experience with a teardown
During this time, Takeoff was in the process of sunsetting their old mobile app ‘Pickerman’ and migrating/improving necessary flows over to their new app ‘Takeoff Mobile.’
The existing flow to print tote labels was underutilized by users because it was hard to find hierarchically and did not have a lot of functionality outside of printing labels. In addition, there was very little notifications on the app to let the user know that the labels actually printed successfully. Because of these obstacles, the existing flow wasn’t effectively solving the issue at hand.
Existing Pickerman flow
Users would have to go to “Tools” to find the functionality to print labels which many users were confused about
Very bare bones function to prompt users to scan an order or tote, not giving users a lot of direction
This was the only notification that the users were provided with to let them know that the labels were sent to the printer
Mapping out the future experience flow
Taking into account the current experience, user feedback from support tickets, and the tech limitations of the Takeoff Mobile app and Zebra device, I mapped out the process flow of the desired future experience. This was used to then walk around to major stakeholders and SMEs of MFC operations to get feedback and insight. I also engaged engineers to ensure that this flow was feasible for the time frame.
Process flow of initial MVP experience
Lofi and feedback gathering
Understanding what flow might be more desirable to aid in users JTBD
Once the process flow was in a good shape, I started to flesh out different iterations of ideas to solve the problem at hand. Using these low fidelity wireframes, I worked with major stakeholders and developers to ensure that what I was designing was desirable and feasible.
FEATURE HIGHLIGHTs
Giving users the ability to start this label print flow where it makes most sense
With the knowledge that a user’s success was determined by their ability to scan a tote and access details quickly, I wanted to implement this feature on the home page of the app to ensure that they would be able to see it and use it as soon as possible.
Additionally, I redesigned the home page to include a search function that allowed for users to scan a barcode or manually type-in a tote ID number for easy access.
This massively sped up the time it took for users to see important tote details and print labels.
Testing out scanning a tote with an early stage prototype.
Feature highlights
Showing more information about a tote to assist in troubleshooting
The existing state in Pickerman did not show any details about the tote or order associated with it. A quick win for us in redesigning this flow was to add tote details to help the users make sure the correct items are in it and to understand where this tote should be staged for the customer to get it on time (i.e., the route associated with it for delivery trucks, the amount of product that should be in it, etc.).
Due to the busyness of the warehouse, a user may come across a stray tote and not know where it should belong. This tote may have an error associated with it and they can troubleshoot that in the tote history tab.
Printing labels for an individual tote
When the automatic label printer breaks down in the OSR and the user has already scanned a tote in front of them, they can easily press the print icon in the top right corner to trigger the label print to the nearest working printer. The app now gives them a success notification that the labels were sent to the printer for them to go pickup.
If for some reason the external printer that they are connected to is also down, they can easily link out to the printer settings in the app to change the printer.
Successful print
Unsuccessful print
Tote aggregate page for an order to print all order labels at once
Printing labels for entire order
When the OSR automatic label printer fails, users are forced to manually print multiple labels for entire orders – which can be time consuming and take time away from other JTBDs, as well as delay delivery to the customer.
To speed up the process of printing labels, the user is now able to see all the totes associated with a specific order just from one scan of a single tote and now can print multiple labels in one click.
Final user testing
Utilizing a prototype that I created, my team and I conducted both virtual and in person user tests with MFC Managers and Associates.
In this new experience, we verified that the feature was simple and intuitive to use and went through specific use cases to make sure that this would solve any issues they had.
Dev Handoff
Handing off final specs to developers
Screenshot from dev handoff Figma file
Throughout the project, I worked closely with the dev team to answer any questions about interactions, functionality, and logic.
Final deliverable
A robust dev handoff file in Figma utilizing our design system to follow as one source of truth.
Learnings
Because I was working with a development team that was still new to following design specs, design systems, and frontend design, I learned how to communicate my design decisions clearly and set up routine development reviews to ensure that what was being built matched my specs.
Outcomes
Screenshot from a portion of the analytics we are tracking in this feature.
With the release of this redesigned feature in our new app, we utilized Heap Analytics to track the number of successful label reprints and feature usage when the automatic OSR label printer went down.
Thanks to the implementation, the amount of support tickets related to shipping label printing and request to print labels were significantly decreased by ~86% since launch in Q1 2023.
This not only increased client success rates but also alleviated stress on our support team.