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.
8. UX & DESIGN DEBT
– 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
@BennoLoewenberg
9. COSTLY CHAOS
– Time
– Focus
– Brand
- Money
– Engagement
– Value and quality
– Customer satisfaction
@BennoLoewenberg
11. EU SHOWER TAP
@BennoLoewenberg
any amount of water
at any temperature
can be chosen …
12. US/CA SHOWER FAUCET
@BennoLoewenberg
… easier to use,
but limited set of choices
(just a bit of hot water
connot be selected)
13. MULTI-SCREEN & OMNI-CHANNEL
UI design becomes increasingly important
for products and services.
UX determines the value of digital offerings
and is their key differentiator .
@BennoLoewenberg
14. GOALS
+ 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)
@BennoLoewenberg
19. INTERPLAY
+ 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
Source: Emily Maxie
20. FACILITATION
+ 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.
@BennoLoewenberg
36. @BennoLoewenberg (aft. Dominic McPhee)
STYLE GUIDE
PATTERN LIBRARY
Design Language Making it real
PRINCIPLES
DOCUMENTATION
LIVING STYLEGUIDE
UI & UX KITS
major
success
factor
GOVERNANCE
59. 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. 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. 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
Source: Nathan Curtis
65. 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
66. 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
67. 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
68. @BennoLoewenberg (aft. Ken Skistim)
BALANCE
Flexibility Consistency
Design System
Create everthing
from scratch
Only use what
comes in-the-box
69. @BennoLoewenberg (aft. Firefox Photon)
BALANCE
Similarity
PlatformProduct
Familiarity
0
Design System
Bad Usability
No Brand
70. SCALING UX
Design Systems are a way to make UX tangible
to teams and to make brand values actionable .
@BennoLoewenberg