Aligning people and product through Design Systems

With the rise of design-led organizations, the role of designer has shifted from that of mere stylist to being a business' number one problem solver. To build products that people love, designers have to do more than just solve problems. They must structure the way they work, establishing a system of guiding values and principles that support and drive the design process. This design system includes documentation, workflows, and even code. To be successful, it requires the support and participation of the entire organization.

This is because design systems are not just for designers. A good design system will provide a solid foundation for your organization, enabling product managers and engineers to make decisions without relying on constant feedback from designers. In turn, designers will gain time to focus on exploring and solving other problems.

Based on material from their upcoming book Taurie and Sarrah will guide you through the basics of building a design system. You will learn how to define a design language that can be understood across teams and establish a communication strategy to sell your system to key stakeholders and other contributors.

Transcript

1. Aligning people and product through Design Systems
2. Who here has experience with design systems?
3. What we'll cover — Selling your system — Design as a language — Implementation
4. What is a design system?
5. Style Guides Static documentation related to a brands visual identity. https://dribbble.com//shots/2361585-Part-of-the-new-Style-Guide
6. Component Libraries A set of core components used throughout your application. https://dribbble.com/shots/6176401-Bidroom-Components
7. Design Systems Documented components with both design and technical guidelines, live code examples, and underlying design principles. https://www.carbondesignsystem.com/
8. Selling your system
14. Gathering baseline data
15. https://cssstats.com/
16. Team Survey http://bit.ly/ds-team-survey
17. Gaining support In order to take advantage of the benefits a design system will bring to you, you will need to build trust and buy-in among teams.
18. Gaining support — Diplomacy — Education — Salesmanship — PR
19. Survey results
20. Design as a language
21. Lexicon The total number of fragments (or words) that make up that language.
23. Dog the lamp ate sky green.
24. Grammar A system of known rules that allow us to focus on higher-level ideas, rather than form or structure.
26. Companies: — Soundcloud — Amazon — Zillow — Google Cloud Platform Examples of things to look for: — Form validations — How color is used to help portray meaning — Use of icons — Hover states — Button placement
28. Design principles — Combine organizational goals with user needs — Core values that aid us in making crucial design decisions — Align teams — Build cohesiveness — Provide an anchor
29. Design principles Minimal and efficient vs. Bring a sharp focus by helping customers know what matters now
30. Implementation
31. Building your system Incremental implementation is key while you craft a single source of truth. https://unsplash.com/photos/sAjt7gecWrg
32. Storybook walkthrough
33. Revisions As your product grows and user needs changes, so might your guidelines. Utilize research to build robust components that function well for your users and communicate changes back to your organization regularly. https://unsplash.com/photos/p_bcKiZDKyk
34. Thank you Sarrah Vesselov - @SVesselov Taurie Davis - @tauried