Fragmented UI
Similar problems were represented through different components, states and interaction rules across journeys.
UNIMARC · DESIGN SYSTEM / PRODUCT INFRASTRUCTURE
Designing the system behind the experience.
A portfolio case exploring how a fragmented grocery UI ecosystem can become a scalable product system — connecting foundations, reusable components, product patterns, accessibility and governance.
Conceptual portfolio case based on real e-commerce design-system challenges. Illustrative system-health metrics are clearly identified as such.
SEMANTIC TOKENcolor.action.primary#E1251B
PRODUCT CARD / DEFAULT
U
Producto Unimarc$3.490THE SCALING PROBLEM
Consistency was not the goal.
Better product decisions were.
Repeated decisions
Design and engineering spent time solving patterns that should already have had a shared answer.
Scaling complexity
Web, app and transactional flows needed a common language without removing the flexibility required by product teams.
01 / AUDIT THE ECOSYSTEM
Before creating components,
I mapped the decisions.
The audit groups repeated UI into foundations, components and product patterns. The objective is to identify duplication, inconsistent behavior and the pieces that create the most leverage when standardized.
FOUNDATIONSColorTypographySpacingRadiusElevation
COMPONENTSButtonInputChipCardModal
PATTERNSProduct discoveryAdd to cartPromotionsCheckoutFeedback states
02 / FOUNDATIONS
From brand values to
semantic product tokens.
Plus Jakarta Sans anchors the system. Brand colors are separated from semantic decisions so the interface can evolve without hard-coding visual values into every component.
Aa
Plus Jakarta SansDisplay 56 / 64
Heading 32 / 40
Body 16 / 24
Label 14 / 20
Primary 600#E1251B
Neutral 950#171717
Surface#FFFFFF
Success#178447
Consistent rhythm reduces arbitrary decisions and makes responsive behavior predictable.
03 / COMPONENT ARCHITECTURE
A component is a contract,
not a drawing.
Each component defines anatomy, properties, variants, states, content rules, accessibility and responsive behavior — creating a shared contract between design and engineering.
01 · Icon slot02 · Label03 · Container04 · Focus / state
BUTTON / PRIMARY
SizeSM · MD · LG
StateDefault · Hover · Focus · Disabled · Loading
IconNone · Leading · Trailing
WidthHug · Fill
Accessibility44px target · AA contrast · visible focus
04 / FROM COMPONENTS TO PRODUCT PATTERNS
Systems become valuable when
they solve real product behavior.
FOUNDATIONcolor.action.primary
→COMPONENTButton / Primary
→PATTERNAdd to cart
→EXPERIENCEPLP · PDP · Cart
UProducto$2.990
UProducto Unimarc
Información, precio y disponibilidad.
Tu carro
Producto $2.990
05 / GOVERNANCE
The hardest part of a Design System
starts after publishing.
Governance keeps the system useful. New needs are evaluated against existing patterns before creating variants or components, and decisions become documentation rather than tribal knowledge.
01NeedProduct team identifies a recurring problem.
→02EvaluateReuse, compose, extend or create?
→03ValidateUX, accessibility and technical review.
→04ReleaseDocument, version and communicate.
My decision framework
Reuse
The existing component solves the same behavior.
Compose
Existing primitives can create the pattern without a new API.
Extend
A recurring need justifies a controlled variant.
Create
A genuinely new, repeatable behavior needs a new component.
06 / SYSTEM HEALTH
Measure the system like a product.
Instead of treating the library as “finished”, I would monitor whether teams actually reuse it, whether it covers critical journeys and whether it reduces design and implementation friction.
These are proposed system-health metrics for this portfolio case, not claimed internal Unimarc performance results.
07 / AI-READY DESIGN SYSTEM
A structured Design System can become
context for AI-assisted product work.
Design tokens
→Components
→Patterns
→AI context
→Prototype
When naming, properties, constraints and usage rules are explicit, AI-assisted workflows have better product context. The goal is not generating more UI — it is generating fewer arbitrary decisions.
RETROSPECTIVE
What this case demonstrates.
Systems thinking
Connecting individual interface decisions to a scalable product architecture.
Product judgment
Knowing when to reuse, compose, extend or deliberately avoid adding complexity.
Design leadership
Creating shared language, governance and quality standards across disciplines.
NEXT CASE