LZ Design System
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
Responsibilities
- Design the design system from the foundation
- Create a design system workflow
- Communicate with developers design specs
- Govern the contribution model
Overview
The design system is the single source of truth that centralizes brand identity, UX.UI components, code libraries, analytics, documentation, and workflows.
The opportunity
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.
Hybrid team model
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.
Contribution model
All stakeholders can contribute new ideas to meet product and user needs.
Propose new idea
Create sketches, mood baords, or user stories
Contact DS core team
Via Slack or email
Review with DS core team
Discuss use case, level of effort, priority, and owner
Design specifications
Document anatomy, behaviors, variations for all devices
Kickstart project
Create Jira epics, story and sub-tasks
Pipeline
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.
Pattern, Fragment, Email books
The design files of the design system was divided to by function; Pattern book, Fragment book, and Email book.
Pattern book
Foundation tokens: color, spacing, typography, shadows Patterns: buttons, icons, link styles, form elements
Under the hood
Fragment book
A fragment is a composition of 2 or more patterns that Repeatedly used
Under the hood
Email book
A system specifically made for emails using fragments. Includes full templates and fragments
Under the hood
Examples shipped with the Design System
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.
Non profit landing
Pricing
Article Center
Home
My account
Estate Planning
Metrics: Measuring the business value of design
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