E-commerce · Design System
Handed off
·
2025
Role
Product Designer, Design System
Team
2 designers (me and a design-system specialist), app engineers
Timeline
2025
Company
Grupo Soma
Signals
components
page templates
brands on one system
Competencies
Design Systems
Delivery & Quality
Context
Grupo Soma is one of Brazil's largest fashion groups, operating premium brands including Farm, Animale, and Cris Barros under a single platform. Each brand has its own visual identity, but all share the same underlying product infrastructure.
The checkout design system was built specifically for the mobile app — requiring components and tokens optimized for touch interactions and smaller viewports.
My role
I worked with the team’s design-system specialist to build the system from scratch. My main focus was the component library: designing and consolidating ~32 components and 6 templates, optimized for touch and small screens. The specialist and I shaped the token foundation together.
Problem
The existing checkout experience lacked a unified component structure, making it slow and costly to maintain consistency across brands. Every new brand or product update required duplicated effort — designers and developers rebuilding the same patterns from scratch, each time with small inconsistencies.
As the portfolio grew, the lack of a shared system became a bottleneck for both design and engineering.
Discovery
Methods: Design audit · Component inventory · Stakeholder interviews · Competitor benchmarking
Volume: Audit across multiple brand checkout flows · Mapping of all existing components and inconsistencies across the Soma portfolio
Key findings:
- The same components existed in multiple versions across different brand files with no single source of truth
- Token architecture was inconsistent — making theming and brand switching manual and error-prone
- Developers frequently had to request design clarification due to unclear component specs
- No existing system supported one-click brand or theme switching
What this told us:
The problem wasn't visual inconsistency — it was structural. Without a shared foundation, every design decision had to be made twice. The system needed semantic tokens, unified components, and theming built in from the start.
How might we
How might we build a single mobile checkout design system that supports multiple brand identities — reducing duplicated effort and enabling consistent, scalable experiences across the entire Soma app portfolio?
Solution
Semantic Tokens:
Restructured the token architecture to be meaningful and intention-driven, supporting light and dark modes. Tokens were named by purpose, not by value — making the system easier to implement, maintain, and adapt.
Componentization:
Unified the library into a single mobile-first component system with a simplified, optimized structure for touch interactions and small viewports. Redundant components were consolidated, reducing complexity for both designers and developers.
Theming:
Upgraded the Figma setup to support one-click theme and brand switching across Soma's entire brand portfolio — enabling the system to flex without rebuilding from scratch.
Key decisions
Consolidated library: redundant components merged into one mobile-first set, simpler for designers and developers.
Semantic tokens, named by purpose and not by value, with light and dark modes (built together with the design-system specialist).
Theming built in: the Figma setup supports one-click switching between brands.
Clearer specs so developers stop needing design clarifications.
Results
The system became a single source of truth for checkout design across the brands, with duplicated components consolidated into one library. After delivery, the UX coordinator who took over the system after the specialist and I left reported that a full brand turnaround that used to take weeks could be done in under a week.
