Slide 1
Slide 1 text
BUILDING SCALABLE
Design Systems
Laura Van Doore
@lauravandoore
Slide 2
Slide 2 text
Designing & building
software is complex.
@lauravandoore
Slide 3
Slide 3 text
• Growing design teams
Organisations are investing more in design
• Infinitely more complex design problems
Software needs to become more sophisticated to keep up with the demands
& desires of our users.
• Distributed teams
Agile delivery models encouraging cross functional teams.
Why is design struggling to scale?
@lauravandoore
Slide 4
Slide 4 text
Maintaining design debt is starting
to feel like this:
Slide 5
Slide 5 text
“A fractured process makes for
a fractured user experience.”
- NATE FORTIN
Slide 6
Slide 6 text
So how can we design the process
in order to deliver better products &
user experience?
Slide 7
Slide 7 text
Answer:
A DESIGN SYSTEM
Slide 8
Slide 8 text
Design System (noun)
[de-zine sis-tuhm]
A collection of reusable components, governed by
clear standards, that can be assembled together to
build any number of applications or products.
@lauravandoore
Slide 9
Slide 9 text
Design System Style Guide
‣ Design Principles
‣ Live Code & Implementation info
‣ UX & Accessibility Metrics
‣ Animation Timing & Easing
‣ Voice & tone Guidelines
‣ Style Guide & Design Resources
‣ UX Personas
‣ Typography
‣ Colour Palettes
‣ Component Styling
‣ Grids
‣ Static Code Samples
@lauravandoore
Slide 10
Slide 10 text
Benefits of
Design Systems
Slide 11
Slide 11 text
‣ Consistency
Consistency and clarity in the user interface
‣ Communication
Speaking the same language
‣ Efficiency
Increased ability to roll out new features and software
products
Slide 12
Slide 12 text
‣ Maintainability
Both in code base, testing and design assets
‣ Scalability
A solid architecture you can expand into new products
‣ Baked in Accessibility
‣ Facilitates speedy onboarding for new designers and
engineers
Slide 13
Slide 13 text
So …
How popular are Design Systems?
Slide 14
Slide 14 text
86%
According to InVision
of Product Design teams have a Design System
Slide 15
Slide 15 text
A quick look at the best design systems
being used around the world.
BEST IN CLASS
@lauravandoore
Slide 16
Slide 16 text
Atlassian Design
Slide 17
Slide 17 text
Atlassian Design
Product
Marketing
Brand
Slide 18
Slide 18 text
Atlassian Design
Slide 19
Slide 19 text
Shopify Polaris
Slide 20
Slide 20 text
Salesforce Lightning Design
Slide 21
Slide 21 text
IBM Carbon
Slide 22
Slide 22 text
Meetup Swarm
Slide 23
Slide 23 text
Adele
Design System Repository
Slide 24
Slide 24 text
A QUICK PREVIEW
Design Systems at Fathom
@lauravandoore
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
PLUGINS & WORKFLOWS
Sketch Essentials
@lauravandoore
Slide 29
Slide 29 text
Auto Layout
Responsive Design in Sketch
Slide 30
Slide 30 text
Sketch Icons
Use your icon font seamlessly in Sketch
Slide 31
Slide 31 text
Style Libraries
Push & Pull layer styles from your Design System
Slide 32
Slide 32 text
Toybox Roller
Find & fix design inconsistencies in Sketch
Slide 33
Slide 33 text
InVision Inspect
For getting your Design System from Sketch to code
Slide 34
Slide 34 text
Sketch Library Design System
≠
@lauravandoore
Slide 35
Slide 35 text
A Sketch Library is just one small part
of a successful Design System.
Slide 36
Slide 36 text
Design Systems
are a team sport
@lauravandoore
Slide 37
Slide 37 text
The best Design Systems
are a shared asset between
design & development.
Slide 38
Slide 38 text
Getting started
@lauravandoore
Slide 39
Slide 39 text
Building a Design System is a
marathon, not a sprint.
Slide 40
Slide 40 text
EXPECTATION
REALITY
vs
Slide 41
Slide 41 text
Don’t think of it like a project.
Slide 42
Slide 42 text
Approach it like a product.
With a roadmap, objectives & many
different groups of users.
Slide 43
Slide 43 text
Inventory
Take stock of where you are.
1
Slide 44
Slide 44 text
It might look something like this …
Slide 45
Slide 45 text
Find patterns & create order out of the chaos …
Slide 46
Slide 46 text
Structure
Define a structure for your Design System
2
Slide 47
Slide 47 text
Define a new structure
Atoms & Molocules?
Slide 48
Slide 48 text
Define a new structure
GE Predix System
Slide 49
Slide 49 text
Standardise
Also known as “Getting to one”
3
Slide 50
Slide 50 text
ROLLING OUT YOUR OWN
Design System
@lauravandoore
Slide 51
Slide 51 text
Chip Away
#1
@lauravandoore
Slide 52
Slide 52 text
Chip Away
The design system is something that is only worked
on in spare time, or when designers/engineers are
between projects.
@lauravandoore
#1
Cost Risk Speed Quality
Slide 53
Slide 53 text
Hibernation
#2
@lauravandoore
Slide 54
Slide 54 text
Hibernation
Getting a core team of designers & engineers
working on the Design System full-time. Possibly
allows the time for designers/engineers to come up
with the best implementation.
@lauravandoore
#2
Cost Risk Speed Quality
Slide 55
Slide 55 text
Piggyback
#3
@lauravandoore
Slide 56
Slide 56 text
Piggyback
Plan to get the bulk of the Design System implemented
as a part of another project. Balances out the cost
better, as you see the returns immediately.
@lauravandoore
#2
Cost Risk Speed Quality
Slide 57
Slide 57 text
Chip Away
1
Hibernation
Piggyback
2
3
@lauravandoore
Rollout strategies
Slide 58
Slide 58 text
EXTENDING & MAINTAINING
Design Systems
@lauravandoore
Slide 59
Slide 59 text
Just like Design, a Design System
is never finished.
Slide 60
Slide 60 text
Have a plan & a process for how
to extend on your system.
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Don’t forget to take stock
@lauravandoore
Slide 63
Slide 63 text
Thanks
Laura Van Doore
@lauravandoore