Building WES Design System: From Fragmented UI to a Scalable System
Designing a unified, token-driven system that improves consistency, accelerates delivery, and scales across themes.
Role
Product Designer
Industry
Logistics
Duration
2 months
Overview
Overview
Context
StoreWES (Warehouse Execution System) is an enterprise platform used by warehouse operations teams to manage and operate day-to-day workflows. As the product evolved over time with multiple features and contributors, the platform grew in scope and complexity, making design consistency and scalability critical for both usability and internal efficiency.
Note: StoreWES is a pseudonym. The actual product name has been replaced in this project to protect client confidentiality.
Context
StoreWES (Warehouse Execution System) is an enterprise platform used by warehouse operations teams to manage and operate day-to-day workflows. As the product evolved over time with multiple features and contributors, the platform grew in scope and complexity, making design consistency and scalability critical for both usability and internal efficiency.
Note: StoreWES is a pseudonym. The actual product name has been replaced in this project to protect client confidentiality.
Problem
The WES platform suffered from design fragmentation and inconsistencies, which increased design effort for the internal team and resulted in a sub-optimal user experience, highlighting the need for a more streamlined design approach.
Problem
The WES platform suffered from design fragmentation and inconsistencies, which increased design effort for the internal team and resulted in a sub-optimal user experience, highlighting the need for a more streamlined design approach.
Outcome & Impact
Built a comprehensive WES design system powered by Figma Variables enabling agile workflows with scalable components.
Outcome & Impact
Built a comprehensive WES design system powered by Figma Variables enabling agile workflows with scalable components.
Research & Insights
Heuristic audit was conducted of 100+ screens to expose critical design issues:
Inconsistent components: Due to lack of a component library, same UI elements (buttons, tables, forms) had conflicting designs across screens
Typography chaos: 15+ font sizes with no hierarchy
Accessibility failures: Colors didn't meet WCAG standards
Theme misalignment: Light/dark modes used different primary colors (green vs. blue), creating user confusion
All of these issues were contributing in mounting design debt, slower development and bad user experience, which needed to be addressed by creating a detailed design system to address all of these issues.
Research & Insights
Heuristic audit was conducted of 100+ screens to expose critical design issues:
Inconsistent components: Due to lack of a component library, same UI elements (buttons, tables, forms) had conflicting designs across screens
Typography chaos: 15+ font sizes with no hierarchy
Accessibility failures: Colors didn't meet WCAG standards
Theme misalignment: Light/dark modes used different primary colors (green vs. blue), creating user confusion
All of these issues were contributing in mounting design debt, slower development and bad user experience, which needed to be addressed by creating a detailed design system to address all of these issues.
Solution Highlights
Standardized Foundations: Providing firm basis for design system
Leveraging Figma Variables: Providing flexibility and scalability
Consistent Experience: Making the interface look clean while reducing cognitive load
Multi Theme Support: Making the interface look clean while reducing cognitive load
Solution Highlights
Standardized Foundations: Providing firm basis for design system
Leveraging Figma Variables: Providing flexibility and scalability
Consistent Experience: Making the interface look clean while reducing cognitive load
Multi Theme Support: Making the interface look clean while reducing cognitive load
Key Takeaways
Advocating for the right scope: Stakeholder wanted just a component library but eventually agreed for a full system after they were shown the current issues and the ROI design system would bring.
Variables are force multipliers: Mastered Figma Variables for theme parity. Atomic control eliminated "green vs. blue" confusion and unlocked exponential consistency.
Learning while delivering under constraints: Since the timeline was tight, I had to balance learning about design system and variables while working on implementation and had ensure the timelines are met.
Other projects
Making Robotic Fulfillment Understandable for Warehouse Supervisors
Making Robotic Fulfillment Understandable for Warehouse Supervisors
Making Robotic Fulfillment Understandable for Warehouse Supervisors
Designing clear, actionable insights that help supervisors monitor, understand, and manage robotic operations with confidence.
Designing clear, actionable insights that help supervisors monitor, understand, and manage robotic operations with confidence.
Designing clear, actionable insights that help supervisors monitor, understand, and manage robotic operations with confidence.
Designing a guided picking experience for warehouse operators
Designing a guided picking experience for warehouse operators
Designing a guided picking experience for warehouse operators
Designing a step-by-step experience that reduces errors, speeds up picking, and supports operators in high-pressure environments.
Designing a step-by-step experience that reduces errors, speeds up picking, and supports operators in high-pressure environments.
Designing a step-by-step experience that reduces errors, speeds up picking, and supports operators in high-pressure environments.
Helping farmers make confident buying decisions
Helping farmers make confident buying decisions
Helping farmers make confident buying decisions
Designing an experience that empowers farmers with clear information and expert guidance when it matters most.
Designing an experience that empowers farmers with clear information and expert guidance when it matters most.
Designing an experience that empowers farmers with clear information and expert guidance when it matters most.