Opportunity
Aritzia needed a CMS design library for the majority of it's content. So we synthesized 50 components with 120+ variations into 15 core components to speed up the workflow across content Design, Dev, QA, Merchandising and Project Managers.
What usually would have taken months now takes 1 working day, freeing up teams to built outside of the box and focus on the net new 20% of content.
Breaking it down to the smallest element
We took a systems approach to mapping all of the content on the website. We asked ourselves:
what is the smallest repeating component?
which are the most common organisms?
how many page template do we have?
can we consolidate even more while maintaining flexibility and modularity?
Base Tile
The most repeating and smallest element on the website is just a media card and text.
Consolidated 50+ components to just 15 core components
We synthesized 50 content components with 120+ variations into 15 core components to systematize and speed up the workflow across content Design, Dev and QA, Merchandising and Product.
15 Core Components
Accordion
Content Banner
Hero
Logo
Navigation List
Promo Banner
Story Viewer
Swiper
Service Banner
Tiles
Tabs
Tag Sheet
Text
Impact
Designers don't have to search and guess for the right component in previous files and manually update each component. There is now a consolidated library with version control that keeps components updated.
Build the homepage in minutes
Problem
Compiling the homepage used to be a long, manual and labour intensive process taking up unnecessary time across several cross functional teams to align and publish.
Impact
By consolidating and creating a CMS library, the need for design, dev and qa can be removed all together. Merchandising can just build and publish the homepage freeing up significant human capital to focus on net new builds.
Componetizing layout
Opportunity
Because of the grid we implemented as part of the core design system, we were able to map out all the existing ways the website can be divided into and then turned the variations into a layout component.
Impact
We created the Content Container, a structural component that allowed us to consolidate and only have 15 core components instead of the original 50 components.
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.
