ODK media
LegalZoom
Belkin / Linksys
Epson
Gulfstream
Contact
Mo' case studies
In 2020 Legalzoom created it's first design system from the ground up. It started with me and two developers and by the end of the year the team grew to 6 designers, 2 project managers, and 14 developers
The design system is the single source of truth that centralizes brand identity, UX.UI components, code libraries, analytics, documentation, and workflows.
Before the design system LegalZoom had multiple pattern libraries that helped maintain design consistency, however it came with many limitations like governance and sharability. Each step was carefully documented and simultaneously developed into a workflow. I started from the foundations to create tokens to complex fragments and templates.
The core team is responsible for governing, maintaining, documenting, and socializing the design system. And as new experiences are created, the community contributes to the design system based on product and user goals.
All stakeholders can contribute new ideas to meet product and user needs.
Create sketches, mood baords, or user stories
Via Slack or email
Discuss use case, level of effort, priority, and owner
Document anatomy, behaviors, variations for all devices
Create Jira epics, story and sub-tasks
We used multiple applications to organize and optimize the build structure of the design system. Especially the weapon of choice to host the design system was inVision's DSM. DSM is a platform that can store design, code, documentation and file structure of components.
The design files of the design system was divided to by function; Pattern book, Fragment book, and Email book.
Foundation tokens: color, spacing, typography, shadows Patterns: buttons, icons, link styles, form elements
A fragment is a composition of 2 or more patterns that Repeatedly used
A system specifically made for emails using fragments. Includes full templates and fragments
While my team was building the Design System other teams were designing pages to replace the old experience. The Design System allowed designers to focus more on the information flow. Also we were able to perform more tests thanks to development efficiency.
QUANTITATIVE
Efficiency: Does the design system support repeatable workflows and improve speed-to-market
Coverage: How much of the website is consuming the design system
Reusability: How many times patterns and fragments used
Performance: How does the design system impact page load time
QUALITATIVE
Consistency: Does the design system ensure brand continuity
Innovation: Do people feel liberated or limited by the design system
Collaboration: Does the design system create a shared language
Adoption: Are stakeholders consuming the design system or creating custom overrides