Pottery Barn’s Design System
The Pottery Barn website was very inconsistent. In a typography audit we performed on one of the product pages, we found over 25 type styles.
The existing design system was out of date, it wasn’t being used on most of the website, and it was limited in what elements and styles it provided. New features had long lead times because there had to be lengthy UI cleanups before they could launch.
To start, we split the work into 4 design standards we aimed to set: typography, Color, UI Elements, and Padding.
Typography
Color
UI Elements
Padding
Design Standards
Audit & Research - We looked at what the site already had and what competitors were doing to decide what we needed.
Style & Pressure Test - Based on our research, we picked styles then applied them to our pages to see how they work.
Finalize - We defined and documented our new system, then worked with development teams to rollout.
Our Process for Each Standard
Before & Afters
Shop Grid Page Before
Shop Grid Page After
Collection Page Before
Collection Page After
Cart Before
Cart After