Case Study

VF Corporation / Timberland

A two-tier enterprise design system, built across the VF Corp brands, Timberland, Vans, The North Face. A twelve-designer studio, ten months of sprints. The deliverable wasn't a website. It was the system every VF Corp e-commerce surface gets to inherit from.
Project snapshot
Delivered

VF Corporation / Timberland

Overview

A two-tier enterprise design system built across VF Corp brands, Timberland, Vans, The North Face. Lead AD and product designer on Timberland, inside a twelve-designer cross-brand studio.
  • E-commerce designs
  • Design system
  • Component library
  • Documentation

What We Did

The cross-brand system was a team build. The Timberland implementation of it was ours. Lead AD + product designer on Timberland. Production, design, and development oversight for the brand's full UI/UX e-commerce experience, both the EMEA and the NORA market sites.

The Outcome

The new system reduced visual inconsistencies, simplified maintenance, and improved collaboration across teams. Timberland’s ecommerce experience became more flexible and efficient, allowing for faster iteration and stronger brand coherence across all channels.
ClientTimberland · VF Corp
Agency partnerTherum
Started2022
Launched2022
Duration10 months
01. The Ask

The Premise

Timberland needed a design system that could support its large-scale ecommerce ecosystem and maintain consistency across multiple regions and platforms. The challenge was to organize, streamline, and scale the design framework while preserving the brand’s heritage and visual strength.

One system. Three brands. Every e-commerce surface inside an entire VF Corp portfolio.

VF Corp owns Timberland, Vans, The North Face, and the rest of an outdoor/lifestyle apparel portfolio that sells through a dozen separate brand websites. Each one has its own identity, its own visual language, its own customer. None of them, left alone, were going to converge on a shared web experience without a system underneath them telling them how.

That's the work. Build the system every brand inherits from. Make it strict enough to standardize cart, account, search, product detail, navigation, the surfaces where consistency saves the company money and the customer time. Make it loose enough that Timberland still looks like Timberland and Vans still looks like Vans on top of it.

The broader cross-brand studio ran up to twelve designers depending on the sprint, split across Timberland, Vans, and The North Face. Therum held the Lead Art Director and product designer role on the Timberland workstream, starting alongside one other designer and then carrying it solo, owning every Timberland surface end to end.

Color palette board: Timberland brand colors in primary, secondary and tertiary swatches, then neutral, red, green and social colors
02. Our Role

Two Systems, Built in Sprints

Design tokens, typography: font family, font size, line height, font weight and alignment tokens

Therum served as a design systems partner, contributing to the creation, documentation, and refinement of components and templates across Timberland’s global site experience.

The work was structured as two layered systems, each one feeding the next.

Tier one: UX components. The atoms. Navigation menus, product carousels, filtering, payment buttons, accordions, typescale, color tokens. Built once, themed everywhere. The cohesive baseline the entire VF Corp web ecosystem inherits from.

Tier two: page templates. The molecules. Cart, account, product landing, search results, sign-in, the high-traffic surfaces where consistency shows up in conversion. Built on top of tier one, then themed per brand.

On top of both: brand customization. The skins. Once components and templates were locked, each brand's UI guidelines got applied: Timberland's orange CTA against black header; Vans' checkerboard accents; The North Face's red against neutral grays. Same skeleton, three voices.

Two-week sprints got the components and templates done. Then a dedicated four-week documentation sprint (sizing, behavior, edge cases, dev hand-off rules) so engineering could build the system the same way at scale. Documentation is the part nobody photographs and nobody can launch without.

12

designer studio · cross-brand; we led Timberland

2 w

design sprints · every component and template

4 w

documentation sprint · sizing, use cases, the nitty-gritty for dev

2 x

markets · EMEA + NORA, Timberland-specific

Error page documentation: the 400 and 404 page wireframe and its link specOrder status documentation: the track or return your order wireframe and its link spec
03. Our Approach

The Design System

Canvas design system, component sheet 1Canvas design system, component sheet 2Canvas design system, component sheet 3Canvas design system, component sheet 4Canvas design system, component sheet 5
1 / 5
Timberland design system, component sheet 1Timberland design system, component sheet 2Timberland design system, component sheet 3Timberland design system, component sheet 4Timberland design system, component sheet 5Timberland design system, component sheet 6Timberland design system, component sheet 7
1 / 7

We focused on establishing scalable structure through atomic design principles, defining consistent patterns for typography, buttons, navigation, and product displays. Each element was designed to improve usability and accelerate development without sacrificing brand identity.

Tier one was the cross-brand foundation, UX components: navigation, product carousels, filtering, cards, forms, the typescale and color tokens, all built once as the cohesive system the entire VF Corp web ecosystem inherits from. The Timberland theme then carried those same components into the brand's own language. Same parts, two finishes.

Buttons component sheet: button sizes, text wrapping, button types and states, and icons in buttons
04. Key Outputs

System → Theme

Themed
Wire
WireThemed
Themed
Wire
WireThemed
Themed
Wire
WireThemed
Themed
Wire
WireThemed
Themed
Wire
WireThemed

Drag the handle left to reveal the wireframe, right to reveal the Timberland theme. Five page templates.

Sign in · Create account · page template

Same skeleton, different finish. On the left: the page template as wireframe, built from UX components, before any brand touches it. On the right: the same template themed for Timberland, black header, orange accent, brand typography, real photography. Five page templates, paired.

We built an enterprise-level design system that unified the brand’s digital interfaces. Deliverables included UI kits, component libraries, and layout templates adaptable for both desktop and mobile. The system streamlined updates and provided a single source of truth for global design and development teams.

Timberland.com at 1024, full page
Timberland.com at 320, full page
Product listing page wireframe at 1024: category banner, a row of filters, a six-column product grid, the email signup and the footer
05. The outcome

Fewer inconsistencies, simpler maintenance, faster iteration

The new system reduced visual inconsistencies, simplified maintenance, and improved collaboration across teams. Timberland’s ecommerce experience became more flexible and efficient, allowing for faster iteration and stronger brand coherence across all channels.

The cross-brand system was a team build. The Timberland implementation of it was ours.

Lead AD + product designer on Timberland. Production, design, and development oversight for the brand's full UI/UX e-commerce experience, both the EMEA and the NORA market sites. Started with one other designer, then ran it solo.

Owned the brand theming. Took the cross-brand UX components and page templates and applied Timberland's UI guidelines (type, color, photography, tone) to every shipped surface. The right side of every pair above is our hand on top of the team's foundation.

Held the line on a shared system. Kept the Timberland build aligned to the cross-brand system the wider studio (Timberland, Vans, The North Face) was building from, so the brand inherited the foundation without losing what made it Timberland.

Asset development for both markets. EMEA and NORA have different product mixes, different photography sets, different copy registers. Kept the system honest across both without duplicating the work.

Design tokens, color: text, icon and filter colors, background colors and border colors
06. Philosophy

Why Two Tiers

Components below, brand on top. The system that ships ten brand sites without ten brand fights.

Enterprise design systems live or die on the shape of the layering. A single system that tries to be every brand at once flattens all of them. A separate system per brand multiplies the work and burns the consistency. The two-tier model (UX components, then page templates, with each brand's finish on top) is the one that lets a portfolio company ship at scale without the brands losing what makes them themselves.

That's what this work was: the foundation, the templates, the documentation, the brand application, all running on the same set of rules, all shippable, all in production. The Timberland side was our hand. The system itself belongs to the team.

Timberland reinforced Therum’s commitment to building systems that scale with intention. Our work emphasizes usability, design integrity, and adaptability, proving that even complex enterprise experiences can remain simple, human, and refined.

See Timberland ↗

2

tiers · UX components → page templates

3 +

brands inheriting · Timberland, Vans, The North Face

12

designer studio · we led the Timberland workstream

EMEA +NORA

markets owned · Lead AD, Timberland e-commerce

Ready to create something amazing?