Share
Embed
Slide 1
Slide 1 text
1
Josh Thompson | UXA2021
Design Systems
with Augmented
Teams: Best Practice
for Connection and
Alignment
Slide 2
Slide 2 text
2
Josh Thompson | UXA2021
What I am going to take
you through today
What is a
design system
Benefits of a
design system
Stages of a
design system
Lessons I have
learnt
The tools
Slide 3
Slide 3 text
3
Josh Thompson | UXA2021
What I am going to take
you through today
What is a
design system
Benefits of a
design system
Stages of a
design system
Lessons I have
learnt
The tools
Slide 4
Slide 4 text
4
Josh Thompson | UXA2021
What I am going to take
you through today
What is a
design system
Benefits of a
design system
Stages of a
design system
Lessons I have
learnt
The tools
Slide 5
Slide 5 text
5
Josh Thompson | UXA2021
What I am going to take
you through today
What is a
design system
Benefits of a
design system
Stages of a
design system
Lessons I have
learnt
The tools
Slide 6
Slide 6 text
6
Josh Thompson | UXA2021
What I am going to take
you through today
What is a
design system
Benefits of a
design system
Stages of a
design system
Lessons I have
learnt
The tools
Slide 7
Slide 7 text
7
An ever
changing world
Josh Thompson | UXA2021
Slide 8
Slide 8 text
8
What is wrong
with this image?
Josh Thompson | UXA2021
Slide 9
Slide 9 text
9
What is wrong
with this image?
Josh Thompson | UXA2021
Slide 10
Slide 10 text
10
Poor urban design
(systems)
=
Confusion
Unsafe
No confidence
Not meeting needs
No design system
=
Siloed
Misalignment
Inconsistent
Not serving all users
Josh Thompson | UXA2021
Slide 11
Slide 11 text
11
What is a design system
and why do we need one?
Josh Thompson | UXA2021
Slide 12
Slide 12 text
12
What is a design system
and why do we need one?
Josh Thompson | UXA2021
Slide 13
Slide 13 text
13
Josh Thompson | UXA2021
Slide 14
Slide 14 text
14
Josh Thompson | UXA2021
New patterns, styles, ideas
Slide 15
Slide 15 text
15
Josh Thompson | UXA2021
New patterns, styles, ideas
New patterns, styles, ideas
New patterns, styles, ideas
Slide 16
Slide 16 text
16
Josh Thompson | UXA2021
Customer
experience
suffers
=
Slower
development
cycles
Josh Thompson | UXA2021
New patterns, styles, ideas
New patterns, styles, ideas
New patterns, styles, ideas
Slide 17
Slide 17 text
17
Josh Thompson | UXA2021
Are we using the correct red?
Is that the right hex code?
Is that the primary CTA pattern?
Where can I find that
component?
Slide 18
Slide 18 text
18
Josh Thompson | UXA2021
Brand Language Design Principles
Implementation
Guidelines
Content Guidelines
Ecosystem Overview
Organisational
Structure
Onboarding & Role
Resources
Editorial Guidelines
Elements Components Templates
Colours Typography Grids Icons
DESIGN SYSTEM
Tokens or Building Blocks
Elements or Atomic Design
Rules & Standards
What is in a
design system?
Modules
Slide 19
Slide 19 text
19
Josh Thompson | UXA2021
Brand Language Design Principles
Implementation
Guidelines
Content Guidelines
Ecosystem Overview
Organisational
Structure
Onboarding & Role
Resources
Editorial Guidelines
Elements Components Templates
Colours Typography Grids Icons
DESIGN SYSTEM
Tokens or Building Blocks
Elements or Atomic Design
Rules & Standards
What is in a
design system?
Modules
Slide 20
Slide 20 text
20
Josh Thompson | UXA2021
Brand Language Design Principles
Implementation
Guidelines
Content Guidelines
Ecosystem Overview
Organisational
Structure
Onboarding & Role
Resources
Editorial Guidelines
Elements Components Templates
Colours Typography Grids Icons
DESIGN SYSTEM
Tokens or Building Blocks
Elements or Atomic Design
Rules & Standards
What is in a
design system?
Modules
Slide 21
Slide 21 text
21
Josh Thompson | UXA2021
Brand Language Design Principles
Implementation
Guidelines
Content Guidelines
Ecosystem Overview
Organisational
Structure
Onboarding & Role
Resources
Editorial Guidelines
Elements Components Templates
Colours Typography Grids Icons
DESIGN SYSTEM
Tokens or Building Blocks
Elements or Atomic Design
Rules & Standards
What is in a
design system?
Modules
Slide 22
Slide 22 text
22
Josh Thompson | UXA2021
Brand Language Design Principles
Implementation
Guidelines
Content Guidelines
Ecosystem Overview
Organisational
Structure
Onboarding & Role
Resources
Editorial Guidelines
Elements Components Templates
Colours Typography Grids Icons
DESIGN SYSTEM
Tokens or Building Blocks
Elements or Atomic Design
Rules & Standards
What is in a
design system?
Modules
Slide 23
Slide 23 text
23
IBM Carbon design system
Atlassian design system
Lightning design system
Josh Thompson | UXA2021
Slide 24
Slide 24 text
24
A design system is always
ready and never finished
“
“
Josh Thompson | UXA2021
Slide 25
Slide 25 text
25
Josh Thompson | UXA2021
The benefits of a
design system
Visibility
Faster delivery
& speed to
market
Standardisation
Predictable,
safe and
scalable
Flexibility
Slide 26
Slide 26 text
26
Josh Thompson | UXA2021
The benefits of a
design system
Visibility
Faster delivery
& speed to
market
Standardisation
Predictable,
safe and
scalable
Flexibility
Slide 27
Slide 27 text
27
Josh Thompson | UXA2021
Designers
Developers
Multiple Users
Slide 28
Slide 28 text
28
Josh Thompson | UXA2021
The benefits of a
design system
Visibility
Faster delivery
& speed to
market
Standardisation
Predictable,
safe and
scalable
Flexibility
Slide 29
Slide 29 text
29
Josh Thompson | UXA2021
Global colour change from
9 months to 3 minutes
Slide 30
Slide 30 text
30
Josh Thompson | UXA2021
The benefits of a
design system
Visibility
Faster delivery
& speed to
market
Standardisation
Predictable,
safe and
scalable
Flexibility
Slide 31
Slide 31 text
31
Josh Thompson | UXA2021
Design systems do save time and money. Just by
eliminating code redundancy, more than 20% of a
developer’s time can be regained. For a team of 100
developers, this means around US$2 million per year.
“
“
Drew Loomer, Managing Architect, projekt202
Slide 32
Slide 32 text
32
Josh Thompson | UXA2021
The benefits of a
design system
Visibility
Faster delivery
& speed to
market
Standardisation
Predictable,
safe and
scalable
Flexibility
Slide 33
Slide 33 text
33
Josh Thompson | UXA2021
The benefits of a
design system
Visibility
Faster delivery
& speed to
market
Standardisation
Predictable,
safe and
scalable
Flexibility
Slide 34
Slide 34 text
34
Josh Thompson | UXA2021
The stages of a design
system (in cycling terms)...
Slide 35
Slide 35 text
35
Stage 1
● Audits
● Analysis
● Testing
● Assessment
● Synthesis
Josh Thompson | UXA2021
The stages of a design system
Slide 36
Slide 36 text
36
Stage 1 Stage 2
● Audits
● Analysis
● Testing
● Assessment
● Synthesis
Josh Thompson | UXA2021
● Form design system team
● Establishing standards, ways of
working, comms channels and
ceremonies
● Return on investment baselines
● Internal design system launch
The stages of a design system
Slide 37
Slide 37 text
37
Stage 1 Stage 2 Stage 3
● Audits
● Analysis
● Testing
● Assessment
● Synthesis
Josh Thompson | UXA2021
● Form design system team
● Establishing standards, ways of
working, comms channels and
ceremonies
● Return on investment baselines
● Internal design system launch
● Review ways of working and
processes
● Adjust team size, role’s and
responsibilities
● Return on investment (ROI)
benchmark review (quarterly)
● Public design system launch
The stages of a design system
Slide 38
Slide 38 text
38
Stage 1 Stage 2 Stage 3 Stage 4
● Audits
● Analysis
● Testing
● Assessment
● Synthesis
Josh Thompson | UXA2021
● Form design system team
● Establishing standards, ways of
working, comms channels and
ceremonies
● Return on investment baselines
● Internal design system launch
● Review ways of working and
processes
● Adjust team size, role’s and
responsibilities
● Return on investment (ROI)
benchmark review (quarterly)
● Public design system launch
● Continuous optimisation
● Evaluation of processes and
team structures
● ROI report to business
● Rinse and repeat
The stages of a design system
Slide 39
Slide 39 text
39
Stage 1 Stage 2 Stage 3 Stage 4 Stage 5
● Audits
● Analysis
● Testing
● Assessment
● Synthesis
Josh Thompson | UXA2021
● Form design system team
● Establishing standards, ways of
working, comms channels and
ceremonies
● Return on investment baselines
● Internal design system launch
● Review ways of working and
processes
● Adjust team size, roles and
responsibilities
● Return on investment (ROI)
benchmark review (quarterly)
● Public design system launch
● Continuous optimisation
● Evaluation of processes and
team structures
● ROI report to business
● Rinse and repeat
● Build in other brands,
banners or pillars of the
business
The stages of a design system
Slide 40
Slide 40 text
40
Josh Thompson | UXA2021
The lessons I’ve learnt and
mistakes we’ve made
Slide 41
Slide 41 text
41
Josh Thompson | UXA2021
Lessons learnt
580
Font styles
58
Unique colours
Slide 42
Slide 42 text
42
Josh Thompson | UXA2021
Lessons learnt
13
Font styles
11
Unique colours
Slide 43
Slide 43 text
43
Josh Thompson | UXA2021
Brand Language Design Principles
Implementation
Guidelines
Content Guidelines
Ecosystem Overview
Organisational
Structure
Onboarding & Role
Resources
Editorial Guidelines
Elements Components Templates
Colours Typography Grids Icons
DESIGN SYSTEM
Tokens or Building Blocks
Elements or Atomic Design
Rules & Standards
Modules
Slide 44
Slide 44 text
44
Josh Thompson | UXA2021
Slide 45
Slide 45 text
45
Josh Thompson | UXA2021
Brand Language Design Principles
Implementation
Guidelines
Content Guidelines
Ecosystem Overview
Organisational
Structure
Onboarding & Role
Resources
Editorial Guidelines
Elements Components Templates
Colours Typography Grids Icons
DESIGN SYSTEM
Tokens or Building Blocks
Elements or Atomic Design
Rules & Standards
Modules
Slide 46
Slide 46 text
46
The Tools...
Josh Thompson | UXA2021
Slide 47
Slide 47 text
47
Josh Thompson | UXA2021
Slide 48
Slide 48 text
48
The spinny
rainbow of death
Josh Thompson | UXA2021
Slide 49
Slide 49 text
49
Josh Thompson | UXA2021
Slide 50
Slide 50 text
50
Josh Thompson | UXA2021
Slide 51
Slide 51 text
51
Josh Thompson | UXA2021
Slide 52
Slide 52 text
52
Josh Thompson | UXA2021
Slide 53
Slide 53 text
53
Josh Thompson | UXA2021
+ + = Not collaborative
Files hard to find
Hard to control versions
No comments within artwork
Not centralised
Costly
Slide 54
Slide 54 text
54
Josh Thompson | UXA2021
homepage-design.v1
Slide 55
Slide 55 text
55
Josh Thompson | UXA2021
homepage-design.v1
homepage-design.v2
Slide 56
Slide 56 text
56
Josh Thompson | UXA2021
homepage-design.v1
homepage-design.v2
homepage-design.v3
Slide 57
Slide 57 text
57
Josh Thompson | UXA2021
homepage-design.v1
homepage-design.v2
homepage-design.v3
homepage-design.v4
Slide 58
Slide 58 text
58
Josh Thompson | UXA2021
homepage-design.v1
homepage-design.v2
homepage-design.v3
homepage-design.v4
homepage-design.v5
Slide 59
Slide 59 text
59
Josh Thompson | UXA2021
homepage-design.v1
homepage-design.v2
homepage-design.v3
homepage-design.v4
homepage-design.v5
homepage-design.v5_final
Slide 60
Slide 60 text
60
Josh Thompson | UXA2021
homepage-design.v1
homepage-design.v2
homepage-design.v3
homepage-design.v4
homepage-design.v5
homepage-design.v5_final
homepage-design.v5_final_final
Slide 61
Slide 61 text
61
Josh Thompson | UXA2021
homepage-design.v1
homepage-design.v2
homepage-design.v3
homepage-design.v4
homepage-design.v5
homepage-design.v5_final
homepage-design.v5_final_final
homepage-design.v5_final_final_USE_THIS_ONE
Slide 62
Slide 62 text
62
Josh Thompson | UXA2021
Slide 63
Slide 63 text
63
Josh Thompson | UXA2021
Live design collaboration Prototype Code
Slide 64
Slide 64 text
64
My journey...
Josh Thompson | UXA2021
Slide 65
Slide 65 text
65
The incredible
highs
Josh Thompson | UXA2021
Slide 66
Slide 66 text
66
The low lows
Josh Thompson | UXA2021
Slide 67
Slide 67 text
67
Tokyo
Olympics
Emma McKeon
Genevieve Gregson
Josh Thompson | UXA2021
Slide 68
Slide 68 text
68
The aggregation
of marginal
gains
Dave Brailsford
Josh Thompson | UXA2021
Slide 69
Slide 69 text
69
Tokyo
Olympics
Speed climbing
Artistic swimming
Josh Thompson | UXA2021
Slide 70
Slide 70 text
70
Lay the
foundations...
Josh Thompson | UXA2021
Slide 71
Slide 71 text
71
Josh Thompson | UXA2021
start small
Slide 72
Slide 72 text
72
Josh Thompson | UXA2021
start small
develop a proof of concept
Slide 73
Slide 73 text
73
Josh Thompson | UXA2021
start small
develop a proof of concept
ensure adoption and alignment
Slide 74
Slide 74 text
74
Josh Thompson | UXA2021
start small
develop a proof of concept
ensure adoption and alignment
define principles
Slide 75
Slide 75 text
75
Josh Thompson | UXA2021
start small
develop a proof of concept
ensure adoption and alignment
define principles
set goals
Slide 76
Slide 76 text
76
Josh Thompson | UXA2021
start small
develop a proof of concept
ensure adoption and alignment
define principles
set goals
define tokens and guidelines
Slide 77
Slide 77 text
77
Josh Thompson | UXA2021
start small
develop a proof of concept
ensure adoption and alignment
define principles
set goals
define tokens and guidelines
start to scale
Slide 78
Slide 78 text
78
Thank you.
linktr.ee/jhtommo