B2C · E-Commerce
🏆 Clios Award Winner
0–1 Product

Rainbow Wool —
Inclusive
E-Commerce

Rainbow Wool isn't just another e-commerce brand. It's a small revolution in kindness — built around sheep that would otherwise be overlooked, and customers who believe every purchase can mean something. This is the story of how we turned a social mission into a Clios Award-winning digital product, end-to-end.

Role
Senior UX / Product Designer
Type
0–1 Product Design
Timeline
January 2025
Live Site
7 min read
Rainbow Wool Hero
Clios🏆
Award for Web Design & Innovative Digital Experience
0→1
Full brand and product built from nothing — identity, UX, system, packaging
AA
WCAG accessibility standard achieved across all core user flows
The Story

A brand built on second chances

Each year, thousands of male sheep are considered "imperfect" by the wool industry — overlooked and undervalued. Rainbow Wool was founded on a simple, powerful idea: what if we built a brand around those sheep? What if every purchase was an act of inclusion?

The challenge wasn't just to build an e-commerce store. It was to translate a deeply human social mission into a digital experience that makes customers feel the weight and warmth of that purpose with every interaction — from the homepage to the unboxing.

"We didn't want to just sell wool products. We wanted customers to feel like co-creators of something meaningful — that every purchase was giving a unique sheep the chance to shine."

4
Teams aligned: UX, Brand, Marketing, Development
3
Visual directions explored before final brand decision
100%
Designed for accessibility from day one — not retrofitted
My Role

End-to-end ownership across brand and product

As Senior UX/Product Designer, I led the full design scope — from brand identity exploration through to the live product. This wasn't a handoff-and-forget project. I owned the design decisions across every touchpoint.

01 — Brand
Visual Identity
Developed and validated three distinct visual directions exploring how inclusivity, warmth and sustainability could be expressed through colour, typography and imagery. Led team alignment sessions to select and refine the final direction.
02 — UX
E-Commerce Flows
Designed all core user journeys: product discovery, storytelling pages, product cards, checkout flow, and order confirmation. Each flow was mapped against accessibility standards and tested for emotional resonance with the brand mission.
03 — System
Design System
Built a scalable design system from scratch — colour tokens, typography scale, component library, and spacing system. Designed to be owned by developers and future designers, not just me.
Brand Foundation

Warmth, inclusivity, and sustainability — made visual

The brand needed to feel approachable and authentic while celebrating individuality. Three visual directions were developed and tested with the team before converging on a palette and typographic voice that could carry both warmth and credibility.

Brand Identity Exploration
Colour Strategy

Warmth as a brand signal

The palette was built around earthy tones that evoke natural wool — creams, warm taupes, and soft blues — grounded in WCAG AA contrast ratios. Every colour was chosen to work for accessibility before aesthetics.

Typography

Voice with personality

A serif with warmth and character paired with a legible, accessible sans-serif for body copy. The type system was designed to feel editorial and considered — reflecting the brand's values without being precious.

Brand Principle

Every touchpoint carries the story

The brief was clear: the brand mission couldn't live only on the About page. It needed to be woven into product cards, checkout microcopy, packaging, and post-purchase confirmation. Every word, colour, and layout decision asked: does this feel like it belongs to a brand that gives overlooked things a second chance?

Design Process

From mission to measurable experience

A structured 0–1 process that moved from brand foundations through wireframes to a live, accessible, award-winning product.

01 — Discover
Brand & User Research
Aligned with stakeholders on brand values, target audience, and success metrics. Competitive analysis of inclusive e-commerce brands and mission-driven DTC products.
02 — Define
Journey Architecture
Mapped the full purchase journey — from first visit through to post-purchase. Identified every moment where brand story could be embedded without interrupting the buying flow.
03 — Design
Visual & UX Design
Three brand explorations, full wireframe set, high-fidelity designs across all screens, accessibility testing throughout — not as a final check, but as an ongoing constraint.
04 — Deliver
System & Handoff
Full design system delivered with component documentation. Packaging mockups created to ensure physical touchpoints maintained digital brand consistency.
UX Output

Key flows and design decisions

Home Page Wireframes Product Page
Checkout Flow Order Confirmation
Design System
Key Design Decisions

Where I made deliberate choices

Decision
Story embedded in product cards
Why not just on the About page?
Most mission-driven brands hide their purpose behind a navigation link. If the mission only lives on the About page, 80% of users never see it — they browse products, checkout, and leave.
Impact
Each product card carried a short story about the specific sheep. This turns browsing into an emotional experience and gives customers a reason to care before they buy.
Decision
Accessibility as a design constraint, not a checklist
Why not test at the end?
Retrofitting accessibility after designs are final creates compromises — colours get changed, layouts shift, and the brand suffers. Building for WCAG AA from day one meant the brand palette had to earn its contrast ratios, not inherit them.
Impact
The brand feels warm and natural while being fully accessible — proving that inclusive design and beautiful design are not in conflict. The Clios judges cited this as a strength.
Decision
Simplified checkout to 3 steps
Why reduce steps?
Checkout abandonment typically spikes at step 3 in standard e-commerce flows. For a brand where the buyer is emotionally invested in the mission, a lengthy checkout breaks the spell of purpose-driven buying.
Impact
Three steps: basket, delivery, payment. No account creation required. The mission language carries through to the confirmation page — reinforcing the purchase as an act of care, not just a transaction.
Accessibility

Inclusivity isn't just the brand message — it's the design standard

For a brand built around inclusion, WCAG AA accessibility wasn't optional — it was a fundamental design requirement that shaped every colour, component, and interaction.

WCAG AA — Achieved across all core flows

Tested on: product discovery, product detail, basket, checkout, order confirmation

🎨
Colour Contrast
All text meets 4.5:1 minimum contrast ratio. Palette built around accessibility — warmth and readability achieved simultaneously.
⌨️
Keyboard Navigation
Full keyboard navigability across all flows. Focus states designed to be visible without being visually disruptive to the brand.
📱
Touch Target Sizing
All interactive elements meet the 44×44px minimum touch target. Tested across mobile, tablet, and desktop breakpoints.
Recognition

Industry awards

🏆
Clios Award
Web Design & Innovative Digital Experience
Inclusive Design Recognition
For accessibility-first e-commerce approach
🌱
Brand Impact
Mission-driven product with measurable social purpose
Reflection

What I'd strengthen with more time

🔬
User testing with target audience
The designs were validated with the internal team and stakeholders. A stronger process would include moderated usability testing with the actual target audience — particularly around how the sheep storytelling lands with different demographics and whether it converts sceptics into buyers.
📈
Post-launch metrics tracking
I designed the product but don't have access to post-launch conversion data. In a longer engagement, I'd have defined success metrics at the design stage — conversion rate by page, cart abandonment rate, average order value — and built dashboards to track them.
🔄
Iterative post-launch design
The live product is v1. A proper engagement would include a planned iteration cycle — reviewing real user behaviour data 30/60/90 days post-launch and prioritising a v1.1 based on what the analytics reveal about where users drop off.
🌍
Internationalisation design
The current design is English-only. For a product with a social mission that resonates globally, designing for multilingual contexts from the start — considering text expansion, RTL layouts, and cultural colour associations — would have future-proofed the system.
View Another Case Study
BMW Vehicle Configurator — Concept Redesign