Problem.

During the process of Warehouse Management System (WMS) revision, we as designers were responsible for different modules of WMS system and construct UI components and prototypes individually, and then go through design reviews as a team for the next step of development. We then realized the drawbacks of the current working style for not only designers, engineers, but also for users.

Goal.

After several discussions, we then reached a consensus that we need to create a design system to improve the efficiency of the current workflow. Our goal includes:

1. Optimize consistency in visual and usage of components based on our system needs

2. Improve scalability of components by creating a reusable component library

3. Promote efficiency and standardization for engineers by creating a shared coding library

Process.

Layout.

Outcome.

Included various guidelines for both component style and interactions

Attached screenshot of component in current system as example to improve understanding

Added full interaction to each component and formed high fidelity prototype

Reflection.

Creating the design system is a great opportunity to learn

Although as a designer, the usage of most components seems intuitive and straightforward, I still learned a lot during the process of research on mature design systems such as Material Design and Ant Design. Each of us got the chance to consolidate the principles and knowledge to secure a consistent product experience for the users.

A system evaluation is happening at the same time

Since we decided to attach corresponding examples in the current system of components, this allowed us to go through the system thoroughly and locate lots of “incorrect” or “inappropriate” usage or interaction of the components. We could then carry on the optimization with clear target and goal.