Role
PRODUCT DESIGNER - DESIGN SYSTEM
Year
2025
Focus
MULTI-BRAND Design system & WHITE-LABEL COMPONENT LIBRARY
Timeline
12 Weeks
BRIEF
Smooth Design System is the foundation of Smooth Commerce for elevating standardized and accessible designs and front end digital products into reusable elements. It promotes an autonomous and collaborative culture to nourish a unified design system across multiple client brands, ultimately accelerating client onboarding.
MY ROLE
As the product designer for the design system, I meticulously crafted, monitored, and measured the system for web and mobile platforms. My responsibilities ranged from establishing design foundations and developing components to formulating comprehensive design guidelines and design tokens. Additionally, I worked to create detailed accessibility documentation to guarantee a seamless and consistent user experience.
Design tokens to enable easy theme switching
Smooth Commerce offers a variety of products across distinct client themes. Establishing a robust design token structure flowing from primitive to semantic values enables us to effortlessly switch between themes and enhances the efficiency of component development. By simply replacing primary and secondary base colors and adding fonts, we reduce the repetitive task of adapting individual elements.
Scale the system with variable modes
We built templates early on for high touch areas like menu styles, loyalty hubs, footers, and headers. Leveraging Figma variable modes, applying a client brand is now incredibly fast. Dragging a standard layout into a client specific frame effortlessly adapts the colors, fonts, border radii, and dark mode preferences without manual intervention.
New library to support standard flows
Aiming to establish consistent components and a unified design style, I constructed the design foundation, components library, and token library from the ground up. While marketing sections require customizability, transactional flows such as order review and checkout are strictly standardized using atomic elements to ensure reliable execution for every new client.
Inclusive and accessible
Built to align with WCAG guidelines, accessibility is integrated directly into the system's foundation. I tested variables for strict color contrast and designed highly visible focus states to ensure logical keyboard navigation. To maintain these standards during handoff, I embedded detailed accessibility annotations directly within the Figma documentation.
Behind the scenes
Figma libraries to support components. I housed all documentation directly inside Figma to keep the source of truth entirely within the workspace. Every component includes detailed technical annotations, defining its role, specific use cases, and the exact variable tokens required for engineering handoff.
The Impact
50%
Faster client onboarding.
Measured by the reduction in days from project kickoff to engineering handoff, achieved by replacing manual asset creation with automated variable modes.
Upto 50%
Reduction in design time.
Tracked via sprint velocity. Designers no longer spend hours on repetitive UI skinning, freeing up capacity for bespoke marketing campaigns.
100%
Standardized transactional flows.
