The 3ps of a Design System

Building a design system that scales is hard. You have to get stakeholder buy-in and then establish style guide and then build out a UI components library and then develop a voice and tone that captures the brand and and and… There’s so much to do! That can fuel envy when we look at popular design systems on the web and say, “We want to have something like that.” But how do we get there? What are the specific steps we can take to build a successful design system?

Transcript

2. Adekunle Oduye Adekunle Oduye (Add-eh-koon-lay Oh-due-yay) (Add-eh-koon-lay Oh-due-yay) @adekunleoduye
3. My first experience My first experience building a design system building a design system
5. People People
6. Producers Producers Consumers Consumers
7. Design System Design System Direct Users Direct Users End Users End Users
8. Direct Users of a Design System: Direct Users of a Design System: ◦Designers ◦Engineers ◦Content Strategists ◦Data Scientists ◦QA Analysts
9. Design for the primary, Design for the primary, Support the secondary, Support the secondary, Accommodate the rest. Accommodate the rest.
11. Which experience is most important: Which experience is most important: Designer's or Developer's? Designer's or Developer's?
12. Which experience is most important: Which experience is most important: Designer's or Designer's or Developer's Developer's? ?
13. Why focus on the developer Why focus on the developer experience? experience? ◦Execute the UI ◦Execute the IxD ◦ In-charge of performance and accessibility
14. A design system doesn’t A design system doesn’t exist until it’s in exist until it’s in code code
15. Quantitative Research Quantitative Research
16. Quantitative Research - Survey
17. Qualitative Research Qualitative Research
18. Qualitative Research - User Interviews
19. Key questions to ask: Key questions to ask: ◦ What are some of the major pain points the design process? ◦ How can the design system make your job easier? ◦ What are some of your future goals?
20. 1. Clear and concise pattern Clear and concise pattern documentation documentation
21. 2. Seamless integration into Seamless integration into design & development process design & development process
22. 3. Communicate design system Communicate design system updates and new features updates and new features
23. 4. Test & validate components Test & validate components before release before release
24. - Magera Moon, "We realized that ultimately for our systems to succeed long-term, it needed to be thought of as everyone’s responsibility." The People Part of Design Systems
25. Process Process
26. What makes for a great process? What makes for a great process? ◦Predictable ◦Flexible ◦Seamless
27. Pattern Audit Pattern Audit
29. Project Roadmap Project Roadmap
31. Guidelines Guidelines
34. The process will be The process will be rough rough at first at first
35. Small Small steps, steps, Great Great distances distances
36. How can we incorporate How can we incorporate new patterns new patterns into a into a design system? design system?
37. New Pattern Process: New Pattern Process: ◦ Proposal ◦ Production ◦ Documentation
38. 1. Proposal Proposal
39. Proposal: Proposal: ◦Pattern Name ◦What is the purpose? ◦Where would this pattern be used?
40. 2. Production Production
43. Component API
44. Accessibility Checklist: Accessibility Checklist: ◦Keyboard navigation ◦Color Contrast ◦Images ◦Semantic Elements and Roles
45. https://a11yproject.com/checklist/
46. QA Checklist: QA Checklist: ◦Operating System (Windows, Mac, Andriod and IOS) ◦Cross browser compatibility (Chrome, Firefox, Safari, etc.) ◦Responsiveness (Desktop, Mobile, TV, etc.)
47. 3. Documentation Documentation
48. Documentation structure: Documentation structure: ◦Purpose ◦Variants ◦Live Example ◦Code snippents
51. - Una Kravets, Despite how much control the other engineers have on the process, they need to feel like they have input, and feel heard. Why Design Systems Fail
52. Product Product
53. UI Kit - Carbon Design System
54. Pattern Library - Carbon Design System
55. Documentation - Carbon Design System
56. Front-end Prototyping Front-end Prototyping
58. 1. Design the Design the "real" "real" experience experience
59. 2. One One master deliverable master deliverable
61. 3. Utilizing real data Utilizing real data
62. Move away from Move away from pixel perfection pixel perfection
63. Build the Build the right thing right thing instead of building the instead of building the thing right thing right
64. Front-end Prototypes for Great User Experience
65. Understand the Understand the problems & goals problems & goals of the of the people people
66. Create a Create a process process that that empowers the empowers the people people
67. Have a Have a product product that that provides value provides value to your company. to your company.
68. Thanks! Thanks! http://bit.ly/3ps-design-system-uxindia-2019
69. Resources Resources ◦ - Josh Clark ◦ - Jerry Cao ◦ - Atif Azam Only One Deliverable Matters How & Why Prototypes Are Mandatory for Good Design The Master Prototype | @adekunleoduye #uxindia2019