Designing for warehouse stock management

by | Aug 21, 2020

RoleUX & UI Designer
CategoryDesign Strategy, User Interfaces, User Experience
DateMarch 2020 – June 2020


As part of the company’s journey to transform their business operation processes, our team was brought in to design a mobile enterprise system equipped with e-stockcard and e-licensing capabilities. Our design solution needs to support productive reporting, logistic and consumption tracking of available materials in all warehouses. Most importantly, this mobility solution will be deployed to portable touchscreen tablets, where WiFi might not be constantly accessible.

My Role

The project team comprised of 1 UX lead, 1 project manager, 1 business analyst and 3 designers (2 main and 1 support). As a designer who has previously completed related transformation tracks for the same client, my role was to develop a strategy to streamline all stock-related workflows and to create design consistency across all the prototypes. I worked closely with the business analyst and project manager to define the future processes for multiple operational and management user groups.

The Process

Field Research

When I joined the project team, the initial discovery workshops and ideation workshops with users have been conducted. I had a quick knowledge transfer (KT) session from the team before visiting different warehouses to better understand our users’ current processes and working environment.

On the left, part of the user journey maps done by the team. KT to me.

Ideation Workshop

As floorplans play the most crucial part of this project, the project team decided to run an ideation workshop among ourselves to brainstorm the digitised version of a physical warehouse.

The design challenges that we needed to solve:

  • There are warehouses with and without floorplans
  • 1 warehouse normally has 6 bays or no bay
  • Depending on the size of a pallet, maximum 3 pallets can be stacked vertically (equivalent to 3 tiers) at 1 [X,Y] position
  • 1 material can only have a maximum of 1 fraction pallet. Position of a fraction pallet must be closest to the door or at the top tier
  • 1 pallet might contain multiple boxes, where 1 box contains multiple same materials
  • 1 mixed pallet is always a fraction pallet that contains 2 or more different materials
  • For non-serialised items, it is sufficient to capture only the total quantity in a warehouse. For serialised items, the system needs to track the individual serial numbers, total quantity in a pallet and the actual position of the pallet
Visualisation prepared for UT1 as UT1 is conducted in lab instead of the actual working environment

Concept Development

Based on the ideas captured during ideation and insights gathered from informal user interviews during field research, I sketched wireframes and conceptualised 2 end-to-end user journies for 2 user groups. Only the key screens were designed as mockups, printed for concept validation with the user representatives.

Low-fidelity wireframes development
Gallery walkthrough with user representatives


Overall, I was in charge of 6 out of 11 prototypes, where each prototype consisted of 20 to more than 100 screens. Throughout the project, we had weekly review sessions with the Product Owner and bi-weekly review sessions with the user representatives via conference calls.

An overview of the major operations that I transformed:

  • Appointment oriented dashboard overview
  • Assignment and monitoring of tasks
  • Onsite floorplan managed inventory holding
  • Integrated transactional history log
Some mockup screens extracted from different stock-related flows. Note: I have replaced the actual data with dummy data

Usability Testing

Since the UX lead brought in a UX researcher to run the UT sessions, I acted as a note-taker for UT1. Unfortunately, all designers were not involved in UT2 due to COVID-19 safety measures. I iterated the prototypes by referring to the feedback captured by the UX lead and UX researcher.

Main changes to the floorplan page layout after the key checkpoints

Interactive Documentations

To prevent confusion over the usage of various floorplans, I came out with a floorplan guide on Axure RP for the development team. This guide focused on:

  • the different floorplan layouts for display views and editable form views
  • interactions of each clickable UI element
  • the behaviour of tiles under different scenarios and processes

Design Guidelines & Style Guide

At the start of the first project, I worked with another designer to create a set of design guidelines, basic page templates and also the common interactive UI components in Axure RP. To maintain design consistency, these visual design guidelines are to be reused across this project and all other transformation tracks with the same client.

Basic UI kit to quicken our prototyping speed
Some main design guidelines

The Outcome

There were 16 participants in UT1 and 18 participants in UT2. Our prototypes received an average score of 86.6 which places it at the 96-100 percentile range i.e. an A+ for usability.

SUS score card
error: Content is protected !!