Helping field agents fix store shelves on the spot

Overview

The Corrective Action Library is a retail app for field agents. It turns shelf photos into corrective actions, so reps can fix out-of-stock, missing facing and placement issues during a store visit.

My role

UX/UI designer

Tasks

Sketching, user flows, personas, hi-fi mockups

Tools

Illustrator, Adobe XD, Balsamiq

Impact overview

Issues

3 shelf issue types flagged: out of stock, missing facing and placement

Reach

4 platforms targeted: iOS, Android, BlackBerry and Windows

Devices

2 form factors designed: tablet and phone

The 30 second version.

Summary

How I designed a shelf compliance app that tells field reps what to fix.

Corrective Action Library improves accuracy and cuts the time to arrange shelves, using the sales executive’s own mobile device.

As UX/UI designer I covered research to delivery: competitor analysis, personas, the field agent workflow, wireframes and hi-fi mockups for tablet and phone.

The challenge: help reps spot what’s wrong on a shelf and fix it in less time.

The challenge

Corrective actions are the steps a field rep takes to bring store shelves and promotional material back into compliance. The rep photographs the shelf, submits the pictures, and gets corrective actions back on their phone telling them what to change.

Reps couldn’t easily identify wrong or missing products on a shelf.
They were stuck with sluggish technology that let them down in stores.
They had no authority or visibility over retail execution standards.

The goal: help reps spot what’s wrong and fix it in less time, on the devices they already carry.

Research

To learn from competitors I studied Zaptic and Rizepoint, the apps closest to what I wanted to build, against four usability heuristics: consistency and standards, recognition rather than recall, flexibility and efficiency of use, and aesthetic and minimalist design.

How I worked

Five stages, one loop

Discover, define, design, test and deliver, with each stage feeding the next.

Discover
Learn the field
- Background research
- User interviews
- Competitor analysis
Define
Decide what matters
- User personas
- Feature prioritisation
- Customer journey mapping
Design
Make it real
- Wireframes
- Interactive prototype
- Visual mock-ups
Testing
Prove it works
- Usability testing
- Heuristic evaluation
Deliver
Hand it over
- Prototype
- Visual mock-ups
- Design document

Who it’s for

Two people, two very different days

One is in the aisle with a tablet. The other is at a desk, watching how the whole team is doing.

On the shop floor

John Matthew

32 · Field representative · B.Sc

Bio: Busy and very tech savvy, and he loves helping others. He wants a system that’s easy and intuitive, so he can find solutions quickly.
Behaviour: Shops online for himself and his family, and mostly searches for products on discount.
Tasks: Audits stores for planogram compliance, and tracks on-shelf availability, orders and returns.

Watching the numbers

Jeff Gothelf

42 · Marketing manager · M.Com

Bio: Highly intelligent. He enjoys tabletop games, films and exploring the latest tech gadgets.
Behaviour: Manages the field reps and mentors his team so they become more productive.
Tasks: Monitors every field rep’s activity, measures team performance, and generates reports and analytics.

Workflow and wireframes

A field agent logs in, opens the dashboard, picks a job for a store, conducts the corrective action and submits the result. Shelf capture, insights and product capture sit alongside the main flow.

Field agent workflow

Six tablet wireframes from login to submitting corrective actions

Wireframes of the core flow

Final designs

Agents plan and act on issues during a visit, validate product availability, set store reminders and track corrective action plans to completion. Each issue is colour coded: out of stock, missing facing or placement. Share of shelf is visible for their own brand and competitors.

Corrective action list view on tablet and phone

CA list view

Product information dialog to mark an action corrected, not corrected or invalid — CA creation: mark each action corrected, not corrected or invalid

Real shelf photo shown above the planogram, with issues listed — ROG and POG view: the real shelf against the planogram

Working prototype

The working prototype ran on real phones and tablets, and went through usability testing and heuristic evaluation before delivery.

Photos of the prototype running on iPhones and iPads

The prototype on real devices

What I learned

Seeing the process through a user-centred lens taught me to design around each user’s motivations.
Pushing my visual and UI skills made the app easier and more engaging to use.