Create a design system that is responsive + accessible to streamline internal processes and create consistency for end users.
If we provide:
Responsive, Accessible, Branded components
Best practices, technical implementation instructions + usage guidelines
Feedback loop for continuous improvement + updates
Then, it will result in:
Decreased styling + accessibility defects reported
Increased synergy among cross-functional teams
Consistent and holistic experience for customers
Collaborators
-
Product Manager (Me)
Define prioritized roadmap + KPIs
Communicate with stakeholders + project teams
Facilitate documentation
-
UX Designer
Audit existing design system + website
Define use cases
Create component wireframes
-
Visual Designer
Provide branding + visual design requirements
-
Dev Manager + Developer
Create host page
Create components to be consumed across the ecosystem
Create technical implementation instructions
-
Quality Engineer
Test components across browsers, devices and critical pages
Process
-
Prepare + Educate
Define what a Design System component is (element used 2+ times)
Audit existing Design System + website using the Atomic Design framework
Roadshow to educate on Atomic Design framework and internal + external benefits of Design Systems
Circulate Design System sentiment survey as KPI benchmark
-
Plan
Define prioritized roadmap + KPIs:
Page Performance
Project Consumption
Qualitative Sentiment Survey
Schedule recurring working group with core team + stakeholders
Assign tasks
Review progress
Address concerns
-
Develop + Test
Core team creates components based on prioritized roadmap
QE regression tests each component across devices, browsers and critical pages
Each component includes:
Description
Tech Notes (summary)
UX / Visual Design Notes
Accessibility Notes
Specs / Preview
Code Snippet
-
Deliver
Roadshow to project teams and creative team
Present documentation and developer ReadMe
Walk through update process and maintenance
Host Lunch + Learns and Office Hours to allow project teams to raise questions Description goes here