Design Systems (english) #UXcampHH

UI design becomes increasingly important for products and services. Influencing their users' expierence. UX itself determines the value of digital offerings and is their key differentiator. But "historically grown" incoherent interfaces deteriorate value and brand of products and services.

This talk is about design systems, that help to avoid (or overcome) design dept and to enable scaling UX across platforms, products and devices. Modularity and standardisation of repeatedly used aspects helps speeding up processes and increasing business value. Design systems help making user experience tangible to teams and brand values actionable.

#DesignSystems #DesignSystem #ProductDesign #DesignProcess #InteractionDesign #UserExperience #UX #UI #ModularDesign #AtomicDesign #PatternLibraries #PatternLibrary #StyleGuides #StyleGuide #UXguidelines #UXguideline #Elements #Modules #Components #ButtonFixing #ButtonBurnout

Transcript

1.   DESIGN SYSTEMS  UXCAMP, HAMBURG AUGUST 11, 2018 @BENNOLOEWENBERG
2. @BennoLoewenberg even “simple” things can become complicated  BUTTON 
3. Danger DANGER Danger Danger Positive Good Positive positive Source: Richard Saunders This Not this
4. Source: Dominic McPhee
5. Source: David Roessli website investors shop mobile app
6.   DIVERSE CLUTTER  Source: open device lab Helsinki Products, Platforms, Devices
7. “HISTORICALLY GROWN” @BennoLoewenberg Code, Tech, Design, Org
8. @BennoLoewenberg – Lots of people and tools involved – Little-to-no testing (technical and UX) – Minimal-to-no documentation or specification – Disparate components across all lines of business   UX & DESIGN DEBT 
9. @BennoLoewenberg – Time – Focus – Brand - Money – Engagement – Value and quality – Customer satisfaction   COSTLY CHAOS 
10. @BennoLoewenberg   UI-ELEMENTS DETERMINE    IF & HOW FUNCTIONS CAN BE USED 
11. @BennoLoewenberg any amount of water at any temperature can be chosen …   EU SHOWER TAP 
12. @BennoLoewenberg … easier to use, but limited set of choices (e. g. just a bit of hot water cannot be selected)   US/CA SHOWER FAUCET 
13. @BennoLoewenberg UI design becomes increasingly important for products and services. UX determines the value of digital offerings and is their key differentiator .   MULTI-SCREEN & OMNI-CHANNEL 
14. @BennoLoewenberg + Design debt reduction (cohesive brand & UX) + More focus on UX & specialties (no redundancies) + Speeding up the processes (design, handover, code) + Increasing business value (maintainability, scalability)  GOALS 
15. Alta, Archipelago, Argon, Apex, Axiom, Backpack, Base, Binary, Bloom, Blueprint, Boundless, Build, Bouy, Canvas, Carbon, Cedar, Chameleon, Chrome, Cirrus, Clarity, Clay, Cosmos, DressCode, Eos, Evergreen, Fabric, Feather, Feelix, Fiori, Fishtank, Fleet, Float, Fluent, Foundation, Frontier, Fuse, Garden, Gel, Gestalt, Glu, Glue, Gravity, Grommet, Harmony, Hedwig, Honeycomb, Horizon, Indigo, Kotti, Lexicon, Lightning, Luci, Material, Mind, Mineral, Nachos, Northstar, Nova, One, Opattern, Orbit, Origami, Otkit, PatternFly, Photon, Plasma, Polaris, Skin, Predix, Primer, Purple, Ratio, Ring, Rizzo, Scooter, Show- Car, Snacks, Solar, Solid, SolidWork, Spark, Spectrum, s, Starling, Swarm, ThingWorx, Uniform, nison, Unity, Ustyle, @BennoLoewenberg   DESIGN SYSTEMS 
16. @BennoLoewenberg  DEFINITION    OF A DESIGN SYSTEM 
17. @BennoLoewenberg read: does NOT equal Design System ≠ Style Guide Design System ≠ Pattern Library Design System ≠ System Design  DE-TERMINATION 
18. Source: Nathan Curtis [commented] “ A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.”
19. @BennoLoewenberg + Blueprint for baseline UI and interaction patterns + Rules defining the interplay of technological and visual components for consistent UX + Codify a system to encourage re-use across products for a cohesive UX  INTERPLAY 
20. @BennoLoewenberg + Standardisation of basics frees up to focus on e. g. research, inspiration for new concepts, handoff process, holistic view on features and their impact to the system. + Structure for the foundation of all products and product versions, without requiring a lot of efford each time.  FACILITATION 
21.  ANATOMY    OF MODULAR DESIGN  @BennoLoewenberg
22. “ As a front-end dev, it is my job to abstract design into repeatable rules.” Source: Hidde de Vries [commented] Design system
23.   INSTEAD OF FIXED LAYOUTS …  @BennoLoewenberg
24.   … FLEXIBLY USABLE ELEMENTS  @BennoLoewenberg
25. @BennoLoewenberg Designing for modules and their interplay in different screens, not static pages. Design for change of products, platforms and user-related affordances.  ADAPTABILITY 
26.   INTERRELATED INDEPENDENT PARTS  @BennoLoewenberg (aft. Diana Mounter) Element Component Page layout Interaction model
27. “ Describing what something IS before attempting to describe what it looks like: Defining the semantics of a design language is fundamental to design at scale.” Source: Mark Dalgleish [commented]
28.   DESIGN TOKENS  @BennoLoewenberg (aft. Jina Anne) NO hard coded values
29. @BennoLoewenberg (aft. Sophia Voychehovski Prater)  RESPONSIVE  Teaser box Search results grid Landing page
30. @BennoLoewenberg (aft. styltil.es)  THEMABLE  LOGO LOGO LOGO Partner Site Product B Product A
31. @BennoLoewenberg  COMPOSITION    OF A DESIGN SYSTEM 
32. SOME RESOURCES @BennoLoewenberg STYLE GUIDE & PATTERN LIB   MANY “DESIGN SYSTEMS” 
33. Sources: Jeremy Keith & Tim Bendt [commented] “ It’s not very useful to create a library of patterns without providing any framework for using  those patterns.” “ A design system is [primarily] a tool for documentation and communication.”
34. @BennoLoewenberg most important HOW TO USE HOW TO USE HOW IT LOOKS & SOUNDS MADE TO USE
35. @BennoLoewenberg most important HOW TO USE GUIDELINES STYLE & PATTERNS DES & DEV RESOURCES
36. BUILDING BLOCKS (STYLE GUIDE) Color Pallettes Typographic Scales Grid Definitions Icons & Assets UI PATTERNS (LIBRARY) Elements Components Modules Templates RULES (GUIDELINES) Design Principles Implementation Guidelines Editorial Guidelines @BennoLoewenberg (aft. UXpin)
37. @BennoLoewenberg (aft. Dominic McPhee) STYLE GUIDE PATTERN LIBRARY Design Language Making it real PRINCIPLES DOCUMENTATION LIVING STYLEGUIDE UI & UX KITS major success factor GOVERNANCE
38. @BennoLoewenberg  EXAMPLES    OF DESIGN SYSTEMS 
39. @BennoLoewenberg HOW IT LOOKS
40.  STYLEGUIDE  Source: Atlassian Design
41.  STYLEGUIDE  Source: Atlassian Design
42.   PATTERN LIBRARY  Source: IBM Carbon
43.   PATTERN LIBRARY  Source: IBM Carbon
44.   ANIMATION GUIDELINES  Source: Google Material Design
45. Source: Google Material Design   ANIMATION GUIDELINES 
46. HOW TO USE @BennoLoewenberg HOW TO USE
47.   DESIGN PRINCIPLES  Source: Apple Human Interface Guidelines [commented]
48.   DESIGN PRINCIPLES  Source: Apple Human Interface Guidelines [commented]
49. Source: SAP Fiori   UX GUIDELINES 
50. Source: SAP Fiori   UX GUIDELINES 
51. Source: Shopify Polaris   CONTENT GUIDELINES 
52. Source: Shopify Polaris   CONTENT GUIDELINES 
53. @BennoLoewenberg MADE TO USE
54.   LIVING STYLEGUIDE  Source: Salesforce Lightning
55.   LIVING STYLEGUIDE  Source: Salesforce Lightning
56.   UI KITS  Source: Material Design Themer – Sketch Library
57.   PROTOTYPING KITS  Source: SAP Fiori – Axure Widgets
58. Source: Facebook Design – Sound Files   MEDIA ASSET KITS 
59. @BennoLoewenberg  CREATING    A DESIGN SYSTEM 
60.   BIG PICTURE  + Establish a baseline framework + Care for company-wide awareness of it and its use + Institute a global design and development tool set + Implement a “single source of truth” across all LOBs + Constanly review and maintain the design system @BennoLoewenberg
61. Source: Nathan Curtis   DEFINED WORKFLOW 
62.  INITIATION  1. Element audit 2. User research and features determination 3. Object-repository identification 4. Minimum viable design system 5. Pilot project (reference design showcase) @BennoLoewenberg
63.   AUDIT & REPOSITORY  Source: Design System Worksheet – Nathan Curtis
64. Source: Gall’s Law on Complex Systems [commented] “ A complex system that works, has evolved from a simple system that worked. A complex system designed from scratch never works nor can be patched up to work. Start (over) with a working simple system ”
65.   LITTLE STEPS  Start small core elements & assets everyone can understand & use Make it usable tokenize design options & showcase pages & elements Use it prioratize it, conduct design clinics, demos & audits to foster design & development convergence @BennoLoewenberg
66. @BennoLoewenberg  ASPECTS    OF A DESIGN SYSTEM 
67.  PRODUCT  It is NOT a simple side project ! A design system is a full-blown product serving other software products. It significantly influences the quality of the products, that are built with it and therefore is a success factor @BennoLoewenberg
68.   SUCCESS FACTORS  A design system needs strategy and resources as every “regular” product. For it’s successful realisation many participants need to contribute to it. Designers and developers will keep supporting it , only if they have ownership of the design system. @BennoLoewenberg
69.   NEVER DONE  It is NOT a one-off ! To keep a design system alive, relevant, it constantly needs to be maintained . The bigger it grows, the shorter the cycles need to be for checking its affordances, quality and updating it . @BennoLoewenberg
70. @BennoLoewenberg (aft. Ken Skistim)  BALANCE  Flexibility Consistency Design System Create everthing from scratch Only use what comes in-the-box
71. @BennoLoewenberg (aft. Firefox Photon)  BALANCE  Similarity Platform Product Familiarity 0 Design System Bad Usability No Brand
72.   SCALING UX  Design Systems are a way to make UX tangible to teams and to make brand values actionable . @BennoLoewenberg
73.   @BENNOLOEWENBERG   LINKEDIN / XING / TWITTER Design Sprint