Design System
Image Source: LinkedIn Learning
Design System Goal
-
Single point of reference for how things should look & behave
- Prevent inconsistent user experience within a product and across products in an organization.
Design System Goal
documenting the standards actually makes it easier for people to do their jobs, freeing them up from focusing on fiddly interface components to think more broadly about the whole user experience
Who would benefit from having design system?
External Partner
Developer
UX Designer
It communicates design concepts in a way that minimizes the work everyone has to do to make them real
Design System Benefits
- Clearly Branded Experience
- Consistent Interface
- Better Communication With More Collaboration
- Consider overall design impact
- Centralized reference for the team
- Faster onboarding for new team member
- Reusable Pattern & Code
-
Shorter time to market
- Repetitive work is reduced through the usage of component library
Image Source: LinkedIn Learning
How to Implement?
Standardlize Workflow
Create Reusable Patterns
Create Component Library
Create Documentation
Formulate UX Guidelines
Examples
Design System
Style Guide
- How to communicate
- Content
- Branding
- Voice & Tone
- How it should look in digital products
- Architecture
- Layout
- Code Example
DEMO
Design System Examples
DEMO
OUR CURRENT Design System
DEMO
Storybook Placeholders
Designer & Developer Workflow
Action Plan
- Scope of Design System
- Owner of the project
- Resource of the project
- Roadmap & Timeline