Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building a Design System: A Practitioner's Case Study

2,980 views

Published on

- How to build a design system from scratch
- How to audit your product for design consistency
- How to structure and communicate a design system to an Agile team

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Building a Design System: A Practitioner's Case Study

  1. 1. The Silver Bullet of Product Development Building a design system. The true story.
  2. 2. Hello! Role: CEO and Co-founder at UXPin. Design Ops team. Background: UX Design & Psychology Passion: Design and Development at scale. Product Strategy. Design Ops. Design Systems. @marcintreder
  3. 3. The Full-Stack UX Platform Agile UX in one place: design systems, prototyping, and documentation together
  4. 4. UXPin in a Nutshell Mission: To streamline the product development process with the power of design and collaboration! Customers: +150 countries. Focus on enterprises (PayPal, Sapient…) Team: 70 people. 2 offices (Mountain View, CA and Gdansk, Poland) www.uxpin.com
  5. 5. Building a Design System The Roadmap Why? What? How?
  6. 6. Ready?
  7. 7. As always, it all started with the research...
  8. 8. +40 interviews with design leaders “What is the biggest problem your team is facing in the design process?”
  9. 9. Sophia Baboolal via Unsplash The Impossibility of Scale • UI gradually decays into inconsistency
 • User happiness decreases
 • Teams become slower and slower
  10. 10. The entropy of a sufficiently complex digital product always increases.
  11. 11. Is design doomed?
  12. 12. Is design doomed?
  13. 13. No.
  14. 14. Enter: Design System
  15. 15. Yes No, but we're currently working on one No, and we aren't working on one I don't know 0% 10% 20% 30% 40% Does your company have a pattern library or design system? Answered: 3,157
  16. 16. Does your company have a pattern library or design system? Answered: 3,157 What is a Design System? And how does it help solve the problem of design inconsistency?
  17. 17. “A scalable framework of decisions & team behaviors across a product portfolio to converge on a cohesive experience.“ - Nathan Curtis
  18. 18. It’s the Process, not the Result
  19. 19. What Does it Contain?
  20. 20. UI Patterns Hi-Fi UI Patterns Lo-Fi Implementation Guidelines Code snippets/Code reference Color Palettes Icon Families Typographic Scales Grid/Layout definitions Brand Guidelines Design Principles 0% 22.5% 45% 67.5% 90% Structure of a Design System Analyzed: 39 systems
  21. 21. Let’s get this organized. 
  22. 22. s The Structure of a Design System Color Palettes Typographic Scales Grid Definitions Icons & Assets Templates Modules Components Elements Design Principles Implementation Guidelines Editorial Guidelines Building Blocks UI Patterns Rules
  23. 23. Patterns? Styleguides? That’s not new! You've probably heard that many times before.
  24. 24. History Non-extensive, subjective, history of Design Systems Design Patterns. Elements of Object-Oriented Software A Pattern Language Christopher Alexander YUI Library Sass CSS Bootstrap Salesforce Lighting ES6 JS Modules
  25. 25. Why Today? Why this time Design Systems are going to reach scale. Digital matters: 6/10 top 10 companies in the world are tech companies (Apple, Alphabet, Microsoft, Amazon.com, Facebook, Alibaba).  Experience matters: Design was never more important. Business value of user experience is widely recognized. Technology is ready: Web technology became modular (js modules, and libraries e.g. React, CSS preprocessors, task managers...) Is design ready?
  26. 26. How? How can you start building a design system?
  27. 27. 1. Accept that building a Design System is an ongoing process. Make it part of your product development. Start building it now.
  28. 28. “A design system isn’t a project. It’s a product serving products.” - Nathan Curtis
  29. 29. Design system is a process and therefore is simultaneously always ready and never done. Design system with one color defined, properly named, implemented and accepted by an organization is better than a full static style guide.
  30. 30. 2. Form a multidisciplinary design operations team. Designers, engineers and content managers should run the DesOps house and gradually solve problems of a product organization related to the consistency of experience and efficiency of design/development process
  31. 31. 3. Build your interface inventory The Interface Inventory is a neatly organized box with all the pieces of your product. It shows all the glaring inconsistencies and serves as a kick-off to the process of building a design system.
  32. 32. Do you want to see a real interface inventory?
  33. 33. 4. Build your building blocks Step by step start standardizing your building blocks. Take colors, basic properties, typography, iconography - improve it, organize it, document and deliver to your product teams.
  34. 34. UXPin Color Palette From a mess of 116 color variables to a systemic palette
  35. 35. Color Research Our Senior UI Architect counted all the instances of specific color variables in code.
  36. 36. Variables matching I created a spreadsheet matching new and old colors
  37. 37. Naming is Hard Naming is difficult, yet crucial. Keep one convention!
  38. 38. Primary/base colors and other properties: Secondary/accent colors and other properties @blue-base: #006cff; @blue-lighten-15: lighten(@blue-base, 15%); // #4d98ff
  39. 39. Typography?
  40. 40. Text styles + LESS mixing
  41. 41. Now, make it available.
  42. 42. Let’s take a look at an actionable design system
  43. 43. 6. Accept that in a Design System - Design and Code go arm in arm
  44. 44. One of Your Tools
  45. 45. Icons Management - Performance 45 Icons Test 3 Icons test Median Average Median Average React.js SVG Icons Component 575ms 583.3ms 558ms 566.5ms Individual PNG Icons Encoded with Base64 578.5ms 580.3ms 587ms 583.3ms PNG Sprite 608.5ms 633.1ms 596ms 549.9ms SVG Loaded as CSS background Data URL 620ms 628.3ms 607ms 630.6ms SVG Sprite 660.5ms 694.6ms 584ms 651.8ms Individual SVG Icons Encoded with Base64 666.5ms 671.4ms 580.3ms 580.3ms Icon Font 973.5ms 1131.2ms 630ms 643.2ms Individual PNG Icons 1485ms 1514ms 675.9ms 675.9ms Individual SVG Icons 1550ms 1584ms 680ms 743.6ms
  46. 46. 7. Kick off the process of standardizing and documenting patterns
  47. 47. Start Small Start with elements and go category after category, then move to components, modules and templates...
  48. 48. Putting it all together: Actionable Design System
  49. 49. Thank you!

×