03 · Nutribén · E-commerce and design system
Bridging content, community and commerce for one of Spain’s most trusted infant nutrition brands.
Overview
Nutribén, a leading Spanish infant nutrition brand, needed to evolve from a static product catalogue into a unified digital commerce ecosystem integrating direct to consumer shopping, stage based nutritional guidance, expert editorial content, and the Club Nutribén loyalty programme.
Problem
Shopping for infant nutrition is not standard e-commerce. Parents are usually short of sleep and short of time, and they are navigating very specific developmental stages.
They do not browse by category. They search by age milestone, by dietary tolerance, and by whether an expert has said it is safe.
The old nutriben.es
A transactional silo
Dense clinical listing pages organised purely around product codes, with no guidance anywhere near them.
An editorial silo
Genuinely useful articles, sitting on their own, disconnected from the thing a parent would actually buy next.
Decision paralysis
Real friction for a parent trying to find the right nutrition for the exact stage their baby is at.
Parents arrive wanting different things: buying formula, checking a weaning schedule, claiming a Club Nutribén reward, or asking for paediatric advice. All four had to work without cluttering the path to buying.
Infant nutrition shifts every two to three months. A conventional category menu cannot guide someone through starter formula, follow on milk and cereals as a progression rather than a list.
Mobile had to work one handed, stay legible at a glance, and let someone finish a task fast, because it is being used at awkward hours with a baby in the other arm.
Strategy
To bring content and commerce together I rebuilt the information architecture around what a parent is trying to do, rather than around which part of the business owns which page.
Nutribén ecosystem
Commerce by stage
Club Nutribén
Editorial and expertise
Explorations
Exploration 01
Exploration 02
Exploration 03
System
The same components had to hold across Shopify templates, seasonal campaigns and agency handoff without being rebuilt each time.
Core tokens
Commerce components
Editorial and club
Deliverables
Deliverable 01
A warm hero followed immediately by the four product worlds, so a parent can narrow the whole ecosystem down to their baby's exact stage within a screen or two.
Deliverable 02
Clear product cards with stage badges, allergen indicators and nutritional callouts, sitting alongside the editorial that answers the question behind the purchase.
Deliverable 03
A community space where parents track milestones, claim club rewards and get advice matched to their child's age rather than to a campaign calendar.
Deliverable 04
A slide out basket with a visible free shipping threshold, single tap quantity changes and gentle upsells for samples that suit the same stage.
Deliverable 05
Blueprints tracing the journey from an organic search for advice, through brand validation and club registration, to a repeat purchase.
Reflection
When the product relates to a child’s health, trust is what converts. Structuring the information around developmental guidance rather than around sales targets moves a brand from supplier to something closer to a partner.
Designing for parents means designing for one hand, broken sleep and constant interruption. Bigger touch targets, fewer input fields and immediate visual feedback did more for checkout speed than any amount of persuasion.
A proper Figma to Shopify system meant creative directors, copywriters and developers could build a new landing page or a seasonal campaign in a fraction of the time it used to take.
