THE PROBLEM
The brand's astronomical growth into a household staple uncovered significant technical & design debt.
Prior to this huge project, we relied on a basic style guide that was fragmentary, inconsistent, outdated, and lacked documentation, leading to huge inconsistencies in production.
THE MISSION
Utilize a systematic approach that enabled us to address technical design debt from the past.
Concurrently build and iterate upon features for the present roadmap.
Create a vision and plan of execution that partners with engineering to strategize and scale for the future.
PHOENIX
DESIGN SYSTEM
Leveraging Material 3, Atomic Design, and TailwindCSS, we built an ever-developing set of components that ensures component organization and naming conventions between design and engineering.
KRAKEN
HEADLESS CMS
As Phoenix DS materialized, we unlocked many UI patterns that could be automated. Effective strategy to the content modeling would allow the CMS to evolve with the business.
Building Kraken CMS successfully enabled our marketing team to have autonomy over their launches, shortening marketing launches from 4 weeks to ~3 days.
Building a Design System & CMS for one of the fastest growing names in DTC.
Building a Design System & CMS for one of the fastest growing names in DTC.
ROLE:
PRODUCT DESIGNER
PRODUCT DESIGNER
TIMELINE:
JAN'23—OCT’24
JAN'23—OCT’24
DR SQUATCH
THE PROBLEM
The brand's astronomical growth into a household staple uncovered significant technical & design debt.
Prior to this huge project, we relied on a basic style guide that was fragmentary, inconsistent, outdated, and lacked documentation, leading to huge inconsistencies in production.
THE MISSION
Utilize a systematic approach that enabled us to address technical design debt from the past.
Concurrently build and iterate upon features for the present roadmap.
Create a vision and plan of execution that partners with engineering to strategize and scale for the future.
PHOENIX
DESIGN SYSTEM
Leveraging Material 3, Atomic Design, and TailwindCSS, we built an ever-developing set of components that ensures component organization and naming conventions between design and engineering.
KRAKEN
HEADLESS CMS
As Phoenix DS materialized, we unlocked many UI patterns that could be automated. Effective strategy to the content modeling would allow the CMS to evolve with the business.
Building Kraken CMS successfully enabled our marketing team to have autonomy over their launches, shortening marketing launches from 4 weeks to ~3 days.
OUTCOMES
Strategic product thinking with fundamental engineering knowledge that is flexible enough to scale up existing features for the future.
A highly usable CMS (that doesn’t require extensive training) and supports long-term biz targets of a higher velocity marketing roadmap.
Mentored colleagues and teammates to adopt the design system/CMS, increasing branding + UI consistency
Replacing old, unstandardized UI and unsustainable code with benchmarked components, templates, and scalable migration of our tech stack.
Baking in accessibility, and encouraging empathy thru leadership alignment, design, development, QA, and deployment phases.
COLOR
FOCUS 1 of 5
Elevate the core identity to a sleeker representation of the “grown-up” lifestyle and mission of our brand as it scales.
OUTCOMES
Strategic product thinking with fundamental engineering knowledge that is flexible enough to scale up existing features for the future.
A highly usable CMS (that doesn’t require extensive training) and supports long-term biz targets of a higher velocity marketing roadmap.
Mentored colleagues and teammates to adopt the design system/CMS, increasing branding + UI consistency
Replacing old, unstandardized UI and unsustainable code with benchmarked components, templates, and scalable migration of our tech stack.
Baking in accessibility, and encouraging empathy thru leadership alignment, design, development, QA, and deployment phases.
Having an opportunity to build a Design System/ CMS from scratch meant we could bake accessibility into the process, opposed to having it be an afterthought.
ACCESSIBLITY
FOCUS 4
Elevate the core identity to a sleeker representation of the “grown-up” lifestyle and mission of our brand as it scales.
COLOR
FOCUS 1
With Shopify as a key stakeholder, design and engineering executed text blocks to appropriate contexts (Primary Display, Section Headlines, Body, etc.)
TYPOGRAPHY
FOCUS 2
We explored many approaches to the info architecture, partnering with engineers to define the grid for key breakpoints, based on their setup in TailwindCSS.
ATOMIC DESIGN
FOCUS 3
Standardize the navigation taxonomy to improve usability on other high-touchpoint areas of the digital experience.
PRAGMATIC CREATIVITY
FOCUS 5
TYPOGRAPHY
FOCUS 2 of 5
With Shopify as a key stakeholder, design and engineering executed text blocks to appropriate contexts (Primary Display, Section Headlines, Body, etc.)
ATOMIC DESIGN
FOCUS 3 of 5
We explored many approaches to the info architecture, partnering with engineers to define the grid for key breakpoints, based on their setup in TailwindCSS.
ACCESSIBILITY
FOCUS 4 of 5
Having an opportunity to build a Design System/ CMS from scratch meant we could bake accessibility into the process, opposed to having it be an afterthought.
PRAGMATIC
CREATIVITY
FOCUS 5 of 5
There was underlying complexity to unraveling historical design and technical debt, and tested the limits of strategically maximizing the amount of information for our users to ingest.
We borrowed from BBC’s Design System’s “pragmatic creativity” to think creatively and find solutions that were both beautiful yet standardized, and flexible yet scalable.
A
S
H
L
E
Y
☆
D
E
S
I
G
N
S
☆
S
T
U
F
F
☆
DR SQUATCH
Ashley Chen is a design strategist, crafting scalable solutions where usability meets complex business problems ❋
