Scalable E-Commerce Design System
Background
SHOPLINE's template themes, a key merchant acquisition asset, suffered from generic design and limited their appeal to high-value fashion industries.
Challenge
Define data-backed, industry-specific design standards and overhaul a fragmented Figma design system to enable scalability, consistency, and faster production.
Impact
Established integration guidelines for ecosystem apps, and delivered a token-based design system, also launched fashion templates to set new quality benchmarks.
2023 - 2024
Web
Design system
Context & Problem
SHOPLINE’s template library lacked industry-specific optimization. While researching the fashion vertical, we identified rich functional needs—but our design system couldn’t support them efficiently. Components were fragmented, styles were inconsistent, and scaling across verticals was slow.
Source: Merchant satisfaction survey (Theme functionality), April 2023 (n=126).
Older fashion themes were virtually indistinguishable from one another, offering little variation in style or features.
Design Challenge
The lack of industry-specific best practices and a scalable design system led to inefficient template development, inconsistent quality, and an inability to form competitive industry-specific solutions.
Data-Informed Design Strategy
Conducted competitive benchmarking by analyzing 40+ leading fashion independent stores, systematically deconstructing user journeys and identifying core conversion-driving modules.
Translated qualitative insights into concrete design opportunities, defining a product feature list for platform support to ensure tight alignment between design strategy and business opportunities.
Task & Action
Lead not just a visual update, but a foundational rebuild of the design system—enabling scalable, fashion-first templates while raising quality and velocity for all future verticals.
Atomic, Token-Based System Architecture
I transformed Figma from scattered components into a structured variant and token-based architecture. Colors, typography, and spacing became reusable Design Tokens; common patterns like product cards and badges were atomized into flexible components.
Enabling the Team & Ecosystem
I established guidelines for internal plugins' designer and token usage, ensuring consistency across teams and streamlining the path from design to production.
Partnered with engineering to build an open foundational UI kit (13 core components including buttons, inputs, etc.) which automatically adapt to the theme’s design system.
Allowed plugins to directly leverage these styled components, eliminating redevelopment efforts previously required to align with merchant-selected themes
Launched 2 new fashion-specific theme styles with coordinated plugin upgrades, improving add-to-cart efficiency.
Validation & Iteration
Led user log-based usability studies, collecting real user behavior data to quantitatively validate the new templates' effectiveness and provide clear direction for subsequent iterations.
Results
↑ UI production efficiency
↑ high-value merchants
Efficiency Leap: Restructured design system, boosting UI production efficiency by ~30% and eliminating style inconsistencies.
Quality Leadership: New fashion templates significantly outperformed legacy versions in key metrics, becoming a key asset for attracting high-value merchants.
Strategic Shift: Moved template design from visual updates to insight-driven conversion solutions, enabling platform expansion into vertical markets.
Designing Assets, Not Just Interfaces
The project shifted our mindset from shipping templates to curating a living system of design assets. The real value unlocked wasn‘t the fashion themes themselves, but the token library and component API that allowed them—and future verticals—to be built reliably at scale. This reinforced that senior design leadership is about multiplying the team’s output, not just perfecting a single output.
