Warehouse Management System: Order Picking Tool UX/UI Design

Project Date

August, 2020


Confidential (Retail)

Project Length

4 week (design)

Who's in the party?
User Experience (Me)
  • Wireframe, UX/UI Design
  • Presentation
Project Management
  • Napaphuch P. – Project Manager
  • Business Development team
Challenge was to create a universal design for warehouse order picking workflow that needs to be adapted for branches worldwide.

First thing first, I need to understand current workflow.

Before I dive into sketches and research. I started by learning how day-to-day picking worker operate in the warehouse. Since there are so many rows and product categories, learning the company’s unique flow & protocals is crucial. Moreover, for mobile web app, I normally design for latest devices such as Samsung or iPhone. This project, however, was designed for specific device lower tier devices with smaller screen.

Rough overview of operation flow in the warehouse

Design Process

  1. Research
  2. Defining Challenge
  3. Execution
  4. Final Design
  5. Learnings & Next Steps


Since I joined in the middle of the project already, I didn’t have much to perform deep analysis and research. Most requirements is done from business development team (in text with a few wireframe drawing), so I began with drafting information architecture to see if we both going to the same direction.

Defining Challenge

Too many picker/packer is able to do in one screen.

The design needs to involve minimal learning curve. For example, in picker order screen, he can 1) Scan item in warehouse using bardcode or type in number 2) Unassign himself from the task 3). See item description of every items in the order. Most workers are part time and we cannot waste their time on getting them onboarding the order picking process. For this reason, design hierarchy is quite important here.


Of 4-week intensive design phase, I managed to provide 5 different options to the team. That’s 1 prototype per week. 

In each design, we discussed the good and the bad. We then had a quick run with some of the workers on-site. Although version 5 was not 100% perfect as there will be more functions added in the funture sprints, this version was a fundamental for the product team to continue build on this platform.

Version 1.0 - prototype
Version 1.0 - prototype
A snapshot of the 'Picker Overview' page journey

Final Design


During this project, my role was to document all the comments in each design and distribute to all stakeholders. In design hand off, I prepare assets (icons, fonts, etc.), mobile design in Zeplin.



  • Due to Covid19 and limited time constraint, I wish I could actually visit the actual site and see real users in action instead of getting user test feedback from business team
  • Better UX writing to make warehouse pickers understand the process better and enjoy their time at the job