2022
User Research
UX Design
Visual Design
Design Systems
Prototyping
I know you're probably not going to read this whole page. So, to summarize:
I was embedded into this client team for about one year, as the sole designer amongst a project mananger, engineering lead, and 4-5 developers. They're a food delivery startup that was developing an inventory tracking app to work on android devices and desktop web. I worked closely with this team to discover user needs, create wireframes & hi-fi designs, prototype new features, and collaborate with developers as these features were implemented. This was an existing tool that was shipped and expanded upon iteratively thanks to a Figma component library and a nimble team.
Now you can just focus on the pretty pictures.
We were approached by [Name Redacted], a startup re-envisioning the prepared food delivery game, to design and build a warehouse inventory management app. Their business model is a little complex, but it can be boiled down to:
This app runs on a device called a Zebra, an android device with a built-in barcode scanner. Each piece of inventory has a QR code to be scanned to accomplish each type of action we identified:
We quickly realized why this project was unique: the typical user isn’t going to be “dialed in” when using this app; it won’t be their main focus. When we use apps to order coffee, or buy pants, or consume dank memes, that is our primary activity (unless you’re a person who drives and watches tiktoks at the same time). This app differs in that is a tool to facilitate activities users are doing in real life: lifting items, scanning them, moving them. All of these actions start to intermingle:
It was essential to understand the types of users and the tasks they did - with or without the assistance of this app. Along with the typical user interviews and journey mapping, we uncovered a few other factors affecting them:
most shifts happen early in the morning; starting as early as 6:00 am, with the goal of having inventory loaded to trucks by 1:00 pm each day. Users could be fatigued at those hours.
Work often takes place in walk-in refrigerators and freezers; how does your use of a mobile device change when your fingers are cold?
Users might be wearing gloves; for the aforementioned temperature reason and as one does during manual labor.
Early research resulted in personas for the main types of employees that would be using this app. These could be very targeted, having a very predictable user base and having these users at our disposal to learn from constantly.
Several journey maps were created based on observations of current processes compared to where apps could make jobs easier and faster. These were beneficial to read back my learnings to the greater team and get buy-in for this work. Click to expand
As more features were identified, flow diagrams for the app as a whole were made. This helped to keep sensical "buckets" of features amongst the tabs of the app and visualize the linking between each tab.
Design could happen quickly thanks to an existing design system to use & expand upon. Utility was prioritized over anything, leaning on existing android and material design principles.
viewing lists / viewing contents of a location / item details
relaying success, failure, errors
The other quirk of this app comes from the device it runs on. The Zebra device has two physical buttons on either side to invoke the scanner. It took some care to design these interactions; at each moment when was scanning was possible, instructing users to use these buttons, NOT press a UI button on the screen.
The QR code spot illustration or smaller gray icon is the indicator that scanning is enabled at that moment. This hardware action is paired with a manual entry option, done with the UI keyboard.
As a v1 of the app shipped and I could see users start using it, an issue that came up was the amount of information we were surfacing and how much of that was actually being read. A good section to focus on is "Picking" - the process of getting a list of items to find in a warehouse, locating them, and scanning them each into a new location. Both efficiency and accuracy are important here.
Our first version looked like this: the UI includes all the info about the list itself, and each item shows its name, item number, batch number, and quantity. It's a lot, and we can easily cull it down to more essential info.
This exercise feels very akin to what apps like Google Maps and Spotify do when connected to a car, at moments when distraction is inevitable. The UI is stripped down to essential elements, text and buttons are oversized, so that I can read it at a glance or fat-finger a button and still be successful.
Like we explored before, users of this app are always distracted; they are moving around a warehouse quickly with a phone in their hand, they are lifting and moving items while using this app. I prototyped a solution in Figma featuring a card view approach. The cognitive load is greatly decreased; one item is in view at a time, dominating the screen with large text. A user can focus on that item, see its location, find it, then swipe to the next item. Non-essential info is moved to a modal.
The companion to the mobile app is a desktop app, for a different set of users:
