Copley Advertising · 2024

Design System & IA

Built a scalable component library and information architecture framework from 0→1 to unify the platform's design language.

Role

Sole Product Designer

Timeline

2024

Company

Copley Advertising

Deliverables

Component library, Token system, IA diagrams, Documentation

Hero image — Add your Figma export here

The challenge

With rapid product growth, Copley's interface had accumulated inconsistent patterns across 5+ product areas. We needed a unified design system that engineering and design could both own.

Research insights / problem framing

The process

01

Audit & Inventory

Audited 200+ screens to catalog existing components, color usage, and typography patterns. Identified redundancies and inconsistencies across the product.

02

Token Architecture

Defined a semantic token system for color, spacing, and typography. Established naming conventions that mapped cleanly to Tailwind's utility classes.

03

Component Library

Built 60+ components in Figma with proper variant states (default, hover, focus, disabled, error). Documented usage guidelines and accessibility requirements.

04

Rollout & Adoption

Ran workshops with the engineering team to align on implementation. Created a contribution model so engineers could propose new components.

Process image 1 — Add your Figma export here

Process image 2 — Add your Figma export here

Final design / key screens — Add your Figma export here

Skills & tools

FigmaDesign SystemsInformation ArchitectureComponent DesignDocumentationAccessibility

Next project

AI Onboarding