Opportunity
Aritzia had a slow, hard, and manual process taking ideas from concept to production. Design, dev and QA would reproduce the same work slightly different each time. This inefficient and labour intensive process contributed to significant design and tech debt which slowed down Aritzia’s ability to innovate and ship at the pace of the market.
Solution
To ship faster and better we built a device agnostic design system, the first of it's kind at Aritzia and a CMS library for a billion dollar online business.
Foundations
Building from the audit and the digital direction provided by the creative team, we:
Defined responsive type scale
Defined spacing scale
Set up the grid breakpoints
Defined colour system
Standardized icon pack
Sizing System
The typography scale is at the core of the sizing system. We used both font size and line height to determine our sizing system.
The smallest type size is 12px with a default line height of 20px. Starting from this minimum and using t-shirt sizing, we created a system that allowed for all small elements to work together and all medium elements to work together.
For example:
Static Text = 12px, height = 20 = smallest icons
Static Big Text = 16px, height = 24 = medium icons
Design Library
Once the foundations were established we started creating components, starting with the simplest and most atomic elements: controls & actions. With these elements, we built more complex components: inputs, selection, and search. Combining atoms and molecules we built organism, larger and more complex components.
System Strategies:
Base component strategy
Slot strategy
Nested instances
Layered design system strategy
Constraint-based layout and spacing strategy
Efficient Maintenance:
Building atomically and using the base component strategy allowed us to minimize design debt commonly accrued through multiple rounds of reviews and have more efficient maintenance.
Modular design:
The slot strategy allowed us to have truly modular components, which reduced the need for developers and QA for core patterns.
Relevant Configurations:
By nesting multiple base components, we created flexible components with properties panel that would only show the configuration that’s relevant.
Spacing
Using spacing, grid, and layout tokens to create responsive constraints instead of relying on breakpoints only
Documentation
Documentation was standardized and written with just enough information for all cross functional users.
Documentation priorities
ease to identify, skim, and comprehend
easy to maintain and automate where possible
only show what’s essential
Ultimate test
someone new to the team would be able to self serve
Governance
Given the maturity of the design system and the larger organizational collaboration model, we developed a cyclical governance model.
Living Governance Model
Our governance model will develop as our system matures, as our people get more comfortable with the system, and as our organization shifts and grows. Just like documentation governance is not one and done, but continuously evolving with the system.
Accessibility
We took a double-pronged approach to accessibility:
Organization wide education — we educated our designers and developers on WCAG standards to build awareness and foundational knowledge across the organization
Accessibility from the start — we embedded accessibility directly into the design system, both in the actual design components and in the coded components to ensure that accessibility was built in (not an after thought).
Impact
Faster speed to market
By streamlining design, development, and QA, we eliminated redundancy, reduced tech debt, and shifted 80% of our effort from maintenance to innovation—dramatically increasing speed to market
1 source of truth
Instead of multiple sources with no version control, development, design and product now have 1 source of truth for all website components and guidelines. We created dev and design parity.
Consistent visual language
We created a consistent visual language by: creating a responsive spacing scale, implementing a grid, defining a clear and responsive type scale and by ensuring accessibility compliance.
