Checkout DS
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.
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.
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.
Result
The system established a single source of truth for checkout design across all Soma brands — eliminating duplicated components and enabling consistent brand switching through theming.
The most tangible outcome: a full brand turnaround that previously required weeks of design and development work became achievable in under a week — a direct result of the semantic token architecture and one-click theming built into the system.
Year
2025
Client
Grupo Soma
Services
Product Designer, Design System
Category
E-commerce · Design System
