Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Systems (english) #UXCE20

Design Systems (english) #UXCE20

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

Benno Loewenberg

June 07, 2020
Tweet

More Decks by Benno Loewenberg

Other Decks in Business

Transcript

  1. @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 
  2. @BennoLoewenberg – Time – Focus – Brand - Money –

    Engagement – Value and quality – Customer satisfaction   COSTLY CHAOS 
  3. @BennoLoewenberg … easier to use, but limited set of choices

    (e. g. just a bit of hot water cannot be selected)   US/CA SHOWER FAUCET 
  4. @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 
  5. @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 
  6. Alps, Alta, Anatomy, Archipelago, Argon, Apex, Aurora, Axiom, Backpack, Base,

    Binary, Bits, Bloom, Bluemix, Blueprint, Boundless, Build, Bouy, Bolt, Canvas, Carbon, Cedar, Chameleon, Chrome, Cirrus, Clarity, Clay, Comet, Connect, Constellation, Cosmos, DressCode, Duet, Eos, Epoxy, Evergreen, Fabric, Feather, Feelix, Fiori, Fish Tank, Fleet, Float, Fluent, Foundation, Forma, Frontier, Fuse, Fusion, Garden, Gel, Gestalt, Glu, Glue, Gravity, Grommet, Group, Harmony, Hedwig, Helix, Honeycomb, Horizon, Indigo, Janus, Keirin, Kotti, Latitude, Leonardo, Lexicon, Lightning, Liquid, Luci, Luna, Material, Mayflower, Miui, Mind, Mineral, Minutiae, Mixtape, Momentum, Mosaic, Muesli, Nachos, Nicollet, Northstar, Nova, One, Oneui, Opattern, Orbit, Origami, Otkit, Oxide, Patternfly, Photon, Plasma, Polaris, Poncho, Precise, Predix, Primer, Protocol, Purple, Quartz, Quik, Ratio, Recess, Ring, Rizzo, Sandcastle, Saphir, Scooter, Seeds, Skin, ShowCar, Snacks, Solar, Solid, SolidWork, Spark, Spectrum, Stacks, Starling, Sticky, SynNeo, titch, Swarm, Tape, Terra, ThingWorx, Thumbprint, rm, Unison, Unity, Ustyle, Vanilla, erblocks, Yarn @BennoLoewenberg   DESIGN SYSTEMS 
  7. @BennoLoewenberg read: does NOT equal Design System ≠ Style Guide

    Design System ≠ Pattern Library Design System ≠ System Design Design System ≠ Sketch Library  DE-TERMINATION 
  8. 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.”
  9. @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 
  10. @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 
  11. “ As a front-end dev, it is my job to abstract

    design into repeatable rules.” Source: Hidde de Vries [commented] Design system
  12. @BennoLoewenberg Designing for modules and their interplay in different screens,

    not static pages. Design for change of products, platforms and user-related affordances.  ADAPTABILITY 
  13. “ 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]
  14. 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.”
  15. 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)
  16. @BennoLoewenberg (aft. Dominic McPhee) STYLE GUIDE PATTERN LIBRARY Design Language

    Making it real PRINCIPLES DOCUMENTATION LIVING STYLEGUIDE UI & UX KITS major success factor GOVERNANCE
  17.   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
  18.  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
  19. 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 ”
  20.   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
  21.  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
  22.   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
  23.   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
  24. Source: Wolf Brüning “ Four problems a design system can help

    you to avoid: • Inconsistencies, • Misunderstandings, • Thinking in Pages, • Duplicate Work.”
  25. Requests & Suggestions Usage FIN.NEO UI-Kit Living Styleguide UX-Tools &

    Guidelines Training & Support »Single Source fo Truth« @BennoLoewenberg   CONTRIBUTION & USE 
  26.   SCALING UX  Design Systems are a way to make

    UX tangible to teams and to make brand values actionable . @BennoLoewenberg