Order picking app design
With the growing demand for online grocery shopping in the late 2010s, Morrisons partnered with Ocado to fulfil its online orders from a number of highly automated Ocado warehouses.
But there was one problem with this model. Customers who lived too far away from an Ocado warehouse couldn’t be offered this service. To overcome this problem, Morrisons asked Ocado to build a system that allowed orders to be fulfilled from normal Morrisons stores. One of the technologies needed was an app that directed operators to pick the orders. Here I describe how the store-pick app was designed.
The design process began with some paper prototyping. I had come up with some initial ideas for the flow, and with this cheap and quick method I was able to user test the ideas with some colleagues. But as I started to refine the designs, doubts about one of the details emerged. Items picked needed to be placed in specific containers. What's the best way of displaying the container in the app?
We wanted the app to work with any kind of picking trolley, that held any number of containers. The containers could be arranged in any number of rows or columns.
The simplest solution was to label each container with a letter. (I had considered symbols too but felt there were more letters people were familiar with than symbols.)
Although the alphabetical approach was simple and clear, we all felt a more visual solution, showing a diagram of the trolley, would work better. But we couldn't be sure which would perform better in reality, and some testing was needed.
The test was done in a traditional usability test style. Participants were given a prototype of the app, and asked to scan and place items into their designated containers. They did this using two versions of the app, one where containers are labelled with letters (above), and the other where a trolley diagram showed the container position (below).
You might be wondering why the diagram has striped and dotted patterns. In the original version (done by another designer) the diagram showed a side view of the trolley, like below.
Although this design was simple and easy to understand, it was likely to be error prone if ever used in practice. The reason is it only shows what the trolley looks like when viewed from one of its sides. Whereas in real usage, both sides of the trolley are accessible, and the picker can be standing on either side as they grab items from nearby shelves. This means the diagram is correct only half of the time. If you’re viewing the trolley from the ‘wrong’ side, you may accidentally put something in the left container instead of right (or vice versa) - because everything is mirrored.
We tried different ways of overcoming this problem. The solution we settled on avoids displaying the side of the trolley altogether. The diagram showed either the front or back of the trolley, which are distinguishable by the pattern they are marked with. The trolley itself would be painted in these patterns too (below).
We liked this design and all thought it would perform better. When the results came back, it was a big surprise! It was the ‘letters’ version that performed better in both time taken and perceived ease of use. It also produced fewer mistakes (1) than the diagram (9).
Why was this? The feedback from participants suggested that it was to do with the amount of information that had to be remembered then visually matched with the physical trolley. With the ‘letters’ version, there was only one piece of information. But with the diagrammatic version, there were two pieces of information, 1) the pattern and 2) the level. We believe this version required more cognitive effort, which was the likely cause for the poorer results.
The ‘letters’ version was built and further tested in a production environment with good results. The app became one of the easiest to use among Ocado’s suite of software. Trainers found it easy to teach, and staff found it easy to learn. One manager even said “This app is so easy to use, if someone can’t use it, they’ll be sacked ;)”
Final designs
Recommendation
This is a linkedin recommendation I received from my colleague, who was a Product Manager on this project.
I worked with Steve on the OSP In-store fulfilment product in the early days, while we were setting the foundations of it. It was real fun, actual startup vibe, prototyping a picking trolly with a bunch of barcodes stuck on a cardboard box and endless debates around stripes, dots and colour blindness. I had the pleasure to work with Steve at the time, and I can say he really cared about user-centered development. His research techniques were thorough and well documented. I'd recommend Steve to any organisation wanting to bring good UX practice into the Product.
- Aurelio Sanchiz Callejón / Product Manager at Ocado
