01
Backstory
Over the years, StoreHub’s Product Design team went through many transitions.
As designers joined and left, documentation practices became inconsistent and design files evolved without a clear source of truth.
Gradually, the organisation accumulated fragmented legacy libraries, duplicated components, and outdated UI patterns.
Without a standardised foundation, designers frequently had to rebuild the same components from scratch, sometimes repeatedly for
identical use cases, resulting in slow and error-prone workflows.
Why a Design System Was Needed?
A typical design task spanned 1-2 weeks, from design exploration to grooming with engineers.
But in reality, the actual hands-on design time was limited once meetings, alignment sessions, and reviews were accounted for.
Without reusable components:
- a significant portion of time was spent recreating UI
- engineering faced mismatched specs, slowing development
- even small tasks became operationally heavy
A unified component library was no longer a “nice to have”, instead it became essential infrastructure for delivering fast and scalable product work.
03
Design Process & Solutions
How I Approached the Rebuild?
Rebuilding the design system was far more than a simple clean-up exercise. It required identifying UI patterns and reconstructing components with long-term scalability in mind.
To ensure the system could grow with future product changes, I followed a bottom-up rebuild strategy:
Start with core primitives → Build components → Connect user flows
This approach allowed that every element in the system was stable and ready for future product evolution.
My Design System Framework
Under this section, I defined how the entire system is structured (from the atomic level to complete user flows), clarifying how components are built,
how screens are standardised, and how designers apply the system consistently across platforms.
1. Component Architecture
Using an atomic design approach, I rebuilt the system starting from core primitives (text styles, colours, icons) and progressively structured them into molecules, organisms, and full templates.
Each component was redesigned with clear variants and usage logic so designers could assemble screens faster while reusing patterns consistently across platforms.
This architecture certainly forms the backbone of the new design system as it ensures scalability, efficient reuse, and predictable behaviour across StoreHub’s products.
2. Screen Standards
StoreHub products operate across multiple environments, such as mobile applications, tablets in restaurants, and desktop BackOffice tools.
To ensure responsiveness behaviour across all interfaces, we standardised three primary screen sizes:
- Mobile: 375px x 767px
- Tablet: 834px x 1190px
- Desktop: 1440px x 820px
We adopted a mobile-first approach to maximise scalability.
By starting from the smallest breakpoint, components could expand logically across tablet and desktop layouts without redesigning each element from scratch.
3. Documentation Guidelines
Alongside rebuilding the design system, I created documentation for each component with clear anatomy breakdowns, usage rules, variants, and actual implementation examples.
This reduced ambiguity during design and handoff, allowing designers and engineers to work with consistent patterns and predictable behaviour across platforms
04
Results & Impact
The rebuilt design system delivered measurable improvements across StoreHub’s product design workflow. With clearer documentation, including component anatomy, usage rules, and behaviour guidelines, we achieved improved scalability and higher design-engineering alignment.
Overall, the consolidated library restored structure, clarity, and efficiency to the entire workflow, transforming the previous design bottleneck into an accelerant for faster product development.
