Design System. Fail, build, learn, test.

Design System practices to close the gap between designers, engineers and stakeholders.

Transcript

1. Design System To build an efficient Fail, Learn, Build, Test Paya Do
2. Introduction Works & Skills 日本語ができる Web 3.0 React.js Material Design Android Team member, fellow engineer Kentaro Teramoto https://github.com/zigen Me, your friendly neighborhood designer Paya Do
4. via ‘https://jp.merpay.com/’
5. MercariX applications Make transactions possible without the need to trust others Provides a protocol that allows it to function as a marketplace on the Mercoin economy Internal Use. No intention of sharing publicly or implementing externally. More at ‘mercariX - Decentralized Marketplace’
6. Communication Design & Experience Design
7. Mercari Japan Help guide UI renewal Adding keyword search form with auto-complete Changing to drop-down menu Adding web / desktop version Customer support chatbot
8. In this role, you will be responsible for creating UI components that are part of design-only libraries used by our Product Designers. You will partner with the overall Product Design team to shape the visual appearance of our Design System, engage with our UX Writer to document it, and align with UI Engineers for implementation. You will want to work with us if you like: Tomorrow’s technology To think about small details that affect an entire ecosystem of applications To translate specs and requirements into scalable, visual solutions To think about colors, typography, and spacings in a systematic way To contribute, maintain, and help in documenting an always-evolving library of components To partner with roles that spread across different disciplines, such as Product and Engineering via ‘Netflix - UI Designer, Design Systems - Content Platform’
9. Design System By the people, for the people
10. A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize & develop a product.
11. s The Structure of a Design System via UXPin Templates Modules Components Elements UI Patterns Color Palettes Typographic Scales Grid Definitions Icons & Assets Design Principles Implementation Guidelines Editorial Guidelines Building Blocks Rules
12. Atomic Design Atom > Molecule > Organism > Template > Page
14. Internal Use. No intention of sharing publicly or implementing externally.
15. Internal Use. No intention of sharing publicly or implementing externally.
16. The repository of publicly available design systems and pattern libraries via ‘https://adele.uxpin.com/’
17. Why do we need a Design System?
18. 1. Keeping the same look and feel across the product
19. Does your product has this Color pallette? 50+ Shades of Gray ...
20. 2. Source of truth, manual of standards for the product team
21. Design + Code + Documentation Airbnb Datepicker Library for the web. Built on storybook js https://storybook.js.org/
22. Figma Real-time, multiplayer. Code-based components.
23. 3. Product scales. Design needs to scale, too.
24. People Product New designers, developers,... New trends, new hirings, new teams… New Styles, Patterns, Ideas… New Team structures
26. To overcome these challenges thousands of companies are investing in Design Systems. So how to get your team on-board?
27. Find the 50 shades of grey moments. Is everyone happy with the speed of dev & code tasks? “How do we build this?” “It doesn’t match the design?” … Then start with a UI inventory! And do not give up on talking to people everyday.
28. UI Inventory
29. via ‘The Atomic Workflow - Brad Frost’
30. Build your design system on-top of a mature product. Do not shoot at multiple targets.
31. Design System > Usability > Accessibility “Accessible design allows users of all abilities to navigate, understand, and use your UI successfully.”
32. Material UI Guideline
33. Why is this important for a mature design system? Design system acts as a foundation for our inclusivity efforts. Look for Web Content Accessibility Guidelines 2.0 to know more. red-blind green-blind
34. Design System ROI for the Developer Team ROI = Return of investment $75 per hour. Team of 50 developers. 2.5h/week * 52 weeks * $75 * 50 devs = $487,500/year via ‘UXPin’
35. Question?