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.

1. DESIGN SYSTEMS
UXCAMP EUROPE
JUNE 7. 2020
@BENNOLOEWENBERG

2. @BennoLoewenberg
even “simple” things
can become complicated
BUTTON

3. DangerDANGERDangerDanger
Positive GoodPositivepositive
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
“Frankenstack”, Code, 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. 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

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
Design System ≠ Sketch Library
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 boxSearch results gridLanding page

30. @BennoLoewenberg (aft. styltil.es)
THEMABLE
LOGO LOGOLOGO
Partner SiteProduct BProduct 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 USEHOW TO USE HOW IT LOOKS
& SOUNDS
MADE TO USE

35. @BennoLoewenberg
most
important
HOW TO USEGUIDELINES 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. @BennoLoewenberg
MADE TO USE

47. LIVING STYLEGUIDE
Source: Salesforce Lightning

48. LIVING STYLEGUIDE
Source: Salesforce Lightning

49. UI KITS
Source: Material Design – Sketch Library

50. PROTOTYPING KITS
Source: SAP Fiori – Axure Widgets

51. Source: Facebook Design – Sound Files
MEDIA ASSET KITS

52. HOW TO USE
@BennoLoewenberg
HOW TO USE

53. DESIGN PRINCIPLES
Source: Apple Human Interface Guidelines [commented]

54. DESIGN PRINCIPLES
Source: Apple Human Interface Guidelines [commented]

55. Source: SAP Fiori
UX GUIDELINES

56. Source: SAP Fiori
UX GUIDELINES

57. Source: Shopify Polaris
CONTENT GUIDELINES

58. Source: Shopify Polaris
CONTENT GUIDELINES

59. Source: Designers Italia
UX TOOLS

60. Source: Designers Italia
UX TOOLS

61. @BennoLoewenberg
CREATING
A DESIGN SYSTEM

62. 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

63. Source: Nathan Curtis
DEFINED WORKFLOW

64. 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

65. AUDIT & REPOSITORY
Source: Design System Worksheet – Nathan Curtis

66. 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 ”

67. 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

68. @BennoLoewenberg
ASPECTS
OF A DESIGN SYSTEM

69. 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

70. 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

71. 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

72. @BennoLoewenberg (aft. Ken Skistim)
BALANCE
Flexibility Consistency
Design System
Create everthing
from scratch
Only use what
comes in-the-box

73. @BennoLoewenberg (aft. Firefox Photon)
BALANCE
Similarity
PlatformProduct
Familiarity
0
Design System
Bad Usability
No Brand

74. Source: Karri Saarinen [commented]
“ Design systems are creating
an API for design .”

75. Source: Wolf Brüning
“ Four problems a design system
can help you to avoid:
• Inconsistencies,
• Misunderstandings,
• Thinking in Pages,
• Duplicate Work.”

76. @BennoLoewenberg
»A DESIGN SYSTEM IS
A TROJAN HORSE FOR UX«

77. UI-Kit
Living Styleguide
UX-Tools
& Guidelines
Training &
Support
@BennoLoewenberg
SINGLE SOURCE & SERVICE

78. Requests &
Suggestions
Usage
FIN.NEO
UI-Kit
Living Styleguide
UX-Tools
& Guidelines
Training &
Support
»Single Source fo Truth«
@BennoLoewenberg
CONTRIBUTION & USE

79. TIME FOR HIGH-VALUE WORK
Source: Cardello & Tsui [commented]
using a
Design System

80. SCALING UX
Design Systems are a way to make UX tangible
to teams and to make brand values actionable .
@BennoLoewenberg

81. http://
Talks & Workshops

82. @BENNOLOEWENBERG
LINKEDIN / XING / TWITTER