Pack Station


Application designed to increase efficiency and accuracy at a warehouse packing station

Designed at Manhattan Associates (2015)

Time efficiency is key in the e-commerce world with very competitive ETA’s offered by companies like Amazon. The existing green screen UI's are cumbersome to function with and warehouses are looking at higher process efficiency. Hence, this project came to be!

Project Details

  • Research
    Current Market Needs

    Pack Station UI is a widely used and customized packing process in warehouses especially for fulfilling orders for the e-commerce world. There is an increasing need to create a graphical UI based packing application that would improve packing efficiencies up to 20% (Research by Matalan, Arcadia, Kiabi, Home Depot, J&J). Most legacy Warehouse Management (WM) applications are either hard to customize or do not support modification for e-commerce packing flows, not to mention some still use the green-screen approach!

  • My Role
    UX/UI, Front end UI styling

    I lead the UX/UI design on this project and collaborated with Project Manager, Business Analyst and Developers to design features that would address end-user′s goals and motivation. I also developed SCSS based styling for front end UI components using Mixins in Sencha. A light and dark theme was created to afford for better legibility under different lighting conditions in a warehouse.

  • Application Characteristics
    Feature design considerations

    —  Designed for wide screen monitors
    —  Fixed station UI
    —  Touch-friendly and click enabled
    —  High contrast themes suited for different lighting conditions
    —  Allows customization of data and workflows to suit the packing needs and processes of a warehouse

  • Design Considerations
    Thinking Through

    —   Primary mode of this application is designed to be "Auto Confirm" avoiding fatigue and time involved in confirming every item scanned. If the client specifically wants the packers to verify scans, transaction parameters can be modified for manual acceptance
    —  Placement of large target areas help with Spatial Recognition Memory and touch/click accuracy
    —  Warehouses tend to be noisy with fork-lifts, conveyor belts, RF guns etc. operating in the vicinity and hence we chose to avoid sound feedback and add to the clutter
    —   The UI has been designed to leverage visual cues for error, warnings and highlighting key information.
    —  All UI elements (font + images) have been scaled up for comfortable viewing from a 3-4 feet distance


Featured on Forbes:

Forbes published article

Project Highlight

The most valuable take-away from working on this project was a much deeper understanding of SASS based component styling using Sencha. I used the rule based styles and mixins available with Sencha extjs to develop two themes (light & Dark) for the application. These were integrated by the development team into the source application code, while keeping the SASS document external for easy modification of themes. Collaborating closely with developers helped me fully understand the challenges and possibilities of using the Sencha as a front-end UI framework.

Design Documentation

Following are snippets of design documentation I produced to communicate within and across teams.

  • Image
  • Image
  • Image
  • Image
  • Image

Get In Touch

Interested in reaching out? email or send a quick message and I will get back to you as soon as I can.


Connect via LinkedIn