Due to non-disclosure agreements, I cannot mention the name of the client. Some screens may be altered, reproduced, or scaled down for the purposes of honoring the agreement. A more detailed case study can be given in person.

PROJECT
Mobile app

ROLE
UX Designer

RESPONSIBILITIES
Research, User Testing, Wireframes, Information Architecture, Prototyping


The challenge

Managing inventory for retailers has always been a tedious, time-consuming task, that's prone to human error. Although the advent of barcode scanners and RFID technology has greatly eased the workflow for retail employees, there are still ways the technology and user experience can improve.

A startup specializing in RFID technology hopes to further reduce friction and create a more efficient inventory system with the design of a new portable RFID scanning device. In its current state, the user wears the device with a lanyard like a necklace and scans tags within a specified radius without the need to point a directional RFID "gun", commonly used in today's retail environment. The device also has the ability to scan an individiual RFID tag to read or write tag data.

I worked alongside the UX Director to create an MVP of the iOS mobile inventory app that would utilize this new technology. Before joining the team, an initial proof-of-concept prototype was developed, with execution prioritized over the user experience. Our goal was to take this prototype another step forward by hiding the technical jargon and making it more human and user friendly.

Research and discovery

Interviews were conducted with retail owners, floor salespeople, and stockroom workers from stores as big as Staples, Zara, and Warby Parker, to a local sporting goods store. "Freddy", the owner of a busy sporting goods store became our hero persona which we would refer to throughout our design process.

What users were saying:

  • Legacy software is a pain.
  • Scanning individual items is tedious.
  • The system needs to be error free.
  • Inventory gets lost because of unorganization and lack of time.

Competitive research showed that other companies were utilizing similar technology but they were still using the mental model of pointing and scanning with an RFID gun. The RFID device we were working with was smaller and easier to carry around, so we wanted to reframe the mental model as "background scanning"—scanning with less friction that happened constantly and didn't need to be initiated. Just about all of the inventory management apps we found did not meet our user experience standards.

Since we were not experts in this field, research also involved learning the ins and outs of RFID technology and inventory management logistics. This included learning about how RFID technology works, how data gets written to RFID tags, and what data gets written—like SKU numbers, UPC codes, and barcodes.

Our approach

We designed in a series of weekly sprints, testing users, and iterating rapidly. Inspiration was drawn from a number of different directions, mostly through comparative studies. Almost everyone today is familiar with e-commerce patterns, and we sought to take advantage of it's close relationship with inventory. We analyzed apps like Jet, Amazon, Lowes, and Home Depot. How was search utilized? How did a user drill down to a specific size and color?

In addition, we looked at apps that served as large file management systems, that involved adding and editing large quantities of items—like Dropbox, Evernote, and iOS Mail. Again, how was search utilitzed? How were incredibly long lists of files handled? Even though these apps didn't revolve around consumer-based products, they were all extremely familiar models that we could adapt to our own designs.

Designing with user tasks and flows

We discovered the most common and complex use cases and created swim flows in Omnigraffle. This allowed us to foresee where error states, permissions, and empty states would occur and make sure they were designed for in our Sketch wireframes.

Swim Flow for Search

Rapid prototyping and user testing

Designs were user tested early in the process and specifically with people who worked in retail. We focused on big picture flows and tried not to get hung up on details. Since the retail environment was the first vertical being explored for the MVP, we designed the app as if it were customized for a clothing store. Users were asked to complete several tasks based on our flows:

  • Task 1: Onboarding: unboxing, charging and setting up RFID device, setting up RFID reader beacons, pairing RFID device with mobile phone.
  • Task 2: Search for a product and set an alert.
  • Task 3: Find a product in a different size.
  • Task 4: Initiate a background scan for new inventory.
An early paper prototype
User testing included unboxing the product and reading an instructional manual.

Iterating upon user feedback

We started user testing with a paper prototype then gradually moved up in fidelity. Even though we're not copywriters, we recognize that designing with words is integral to a product's success. Many of our tests led us to reword instructions and page sections, as even we let some of the technical jargon slide. Phrases like "turbo scan" (manually initiating a background scan), "datasets", and "tag commmisioning" (adding and editing products) all had to go. Eventually we realized we could combine these sections simply into an "Inventory" section.

We also found that we needed to extend the onboarding process to include adding inventory items. This made the setup longer, but we believed it would be more beneficial for users to not land on an empty state.

Here are some other ways we iterated upon user feedback:

  • Instead of a multi-featured "Home" section, we created dedicated tab sections for each feature
  • Changed landing page to Search page, and then again to the Inventory page
  • Changed misleading iconography
  • Adjusted copy, most important for onboarding

Moving up in fidelity

After testing the paper prototype we moved up in fideltiy for the next round. All new screens were designed in Sketch and a new prototype was created with InVision. We broke down the app into three big sections:

  1. Onboarding
  2. Bottom navigation tab sections (Inventory, Nearby, Search)
  3. Settings
Sketch artboards: 60+ screens designed.

This was one of the first projects in which I utilized Sketch's nested symbols and overrides as a large part of my process. This allowed us to iterate quickly, especially when adding functionality to page headers and reconfiguring the bottom navigation.

Taking advantage of Sketch's nested symbols allowed us to iterate and test rapidly.

Our MVP

The homepage initially started as a multi-feature page but eventually transformed into search, and finally the inventory page. We moved away from the idea of a multi-featured homepage, and instead made each section more focused.

The way that a user would hold the device was a huge factor in the way we approached the design. We knew that users would have to use the app with one hand, often holding products or the RFID device with the other. Any call-to-action for a high value interaction was kept near the thumb. Our key ergonomic considerations included:

  • Use of a floating action button
  • Bottom navigation, no hamburger
  • Big barcode scan button, a contrast to keeping the barcode small and inside the search input box
  • Predictive search to minimize typing

We determined the most essential sections for the app. Here's what we added to the proof-of-concept:

  • Onboarding: Instructions for setting up the RFID device, setting the store location, employee access, as well as populating the inventory.
  • Inventory: New items detected by the RFID reader would appear at the top of the list in chronological order, but would also depend on how the list was sorted or filtered at the time.
  • Nearby: A quick way to see what products are within range of a specified radius which could be adjusted.
  • Search: Search for a product through RFID device, barcode scan, or predictive search input
  • Product details: In-stock availability, locations, size and color selection, and alerts
  • Settings: Manage store locations and employees, RFID device settings, payment methods, and more

Next steps

This project is still currently in development. We learned that ultimately, a retailer writing data tags for their own products is not part of the solution. The product is not effective unless products can be scanned quickly upon receiving a new shipment. For this reason, the stakeholders decided to take a step back and further research how they could partner with manufacturers.

Reflection

This project was particularly challenging because the technology was constantly evolving, as was the app. We were asked to push the technology, but also had to deal with the fact that many things could not be done. Unfortunately, designing an MVP also means that a lot of great ideas don't make the cut because of time and technical constraints. I really enjoyed thinking about the mobile phone communicating with another hardware device and considering all the physical interactions happening outside of the app, as opposed to the common stand-alone mobile app.

Previous project