Slide 1
Slide 1 text
The road to faster
mock-ups
How we built and
shared our design system
Slide 2
Slide 2 text
Andrew Denty
UX Designer at Redgate
@andrewdenty
Slide 3
Slide 3 text
ReadyRoll
(A tool to help people develop SQL Server databases)
Slide 4
Slide 4 text
Honeycomb
(Redgate’s design system)
Slide 5
Slide 5 text
This talk will cover
Slide 6
Slide 6 text
2017
2013
Slide 7
Slide 7 text
2017
2013
Building a
design system
Slide 8
Slide 8 text
2017
2013
Building a
design system
Implementing
and improving
Slide 9
Slide 9 text
2017
2013
Building a
design system
Implementing
and improving
Faster
mockups
Slide 10
Slide 10 text
This talk won’t cover
Slide 11
Slide 11 text
What is a design system?
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
– Jakob Nielsen
“Since the dawn of time (1984), we have
known that consistency is one of the
strongest contributors to usability.”
Slide 15
Slide 15 text
Design systems
• Aid usability
• Guide product consistency
• Enable us to work more efficiently
• Help create a branded experience
Slide 16
Slide 16 text
Life without a design system
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Why were our products
so inconsistent?
Slide 21
Slide 21 text
Conway’s law
Slide 22
Slide 22 text
Designers embedded in teams
Slide 23
Slide 23 text
Design systems weren’t
as big in 2013
Slide 24
Slide 24 text
Fluent Design - May 2017
Slide 25
Slide 25 text
Recognisability wasn’t critical
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Last and most importantly:
Usability
Slide 28
Slide 28 text
“With the productivity
I'll get out of this tool,
it's like buying time.”
Robert Sondles
Slide 29
Slide 29 text
"Our old deployment
process was
cumbersome and
stressful – now it's
almost fun.”
Mattias Geigant
Slide 30
Slide 30 text
Consistent design ≠ good usability
(but is a factor)
Slide 31
Slide 31 text
Building Honeycomb
Slide 32
Slide 32 text
The window of opportunity
• Desire for our products to work together more closely and a focus on
selling them together as a suite
• As a result - more working across teams
• An awareness from conferences like UX Cambridge of the value of
design systems
• Finally, exec level buy in and a formal Head of Design position
Slide 33
Slide 33 text
So we set about building Honeycomb
• Jointly led by UX, our website team, graphic
designers and marketing
• Worked closely with Nathan Curtis from
Eight Shapes
Slide 34
Slide 34 text
What Honeycomb included
•Website - honeycomb.red-gate.com
•A web toolkit - to spin up new projects
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Honeycomb week
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Redgate switcher
Slide 40
Slide 40 text
One year on
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Growing pains?
Slide 43
Slide 43 text
Can you send me the file?
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Chinese whispers
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Multiple frameworks.
Differing states.
Web WPF WinForms
Slide 48
Slide 48 text
What is the source of truth?
Slide 49
Slide 49 text
Duplicated work
Slide 50
Slide 50 text
Hard to switch projects
Slide 51
Slide 51 text
Faster
mockups
Slide 52
Slide 52 text
+
Brand.ai
Sketch
Faster Mockups
Slide 53
Slide 53 text
What is Sketch?
Slide 54
Slide 54 text
Sketch has reusable elements
called symbols
Slide 55
Slide 55 text
Symbol Use
Download
Slide 56
Slide 56 text
Symbol Use
Download
Slide 57
Slide 57 text
Download
Symbol Use
Slide 58
Slide 58 text
Demo
Slide 59
Slide 59 text
Symbol
master
Brand.ai
GitHub
Slide 60
Slide 60 text
Symbol
master
Brand.ai
GitHub
Slide 61
Slide 61 text
Symbol
master
Brand.ai
GitHub Symbol
master
Brand.ai
GitHub
Slide 62
Slide 62 text
Symbol
master
Brand.ai
GitHub
Slide 63
Slide 63 text
Symbol
master
Brand.ai
GitHub
Slide 64
Slide 64 text
Symbol
master
Brand.ai
GitHub
Slide 65
Slide 65 text
Demo
Slide 66
Slide 66 text
Benefits
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
Brand.ai Alternatives
+
Slide 69
Slide 69 text
New! Sketch Libraries
Shared symbols in the next major version
Slide 70
Slide 70 text
Why we chose Sketch
and Brand.ai
+
Slide 71
Slide 71 text
Where we are now
Slide 72
Slide 72 text
Spacing
Slide 73
Slide 73 text
You’ll need more time on it
than you think
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
1/2 day
Slide 77
Slide 77 text
Get everyone involved in the
design system
Slide 78
Slide 78 text
There are still lots of things
missing…
Slide 79
Slide 79 text
We still don’t have a good way
of sharing work
Slide 80
Slide 80 text
Single source of truth?
Slide 81
Slide 81 text
Where we’re going next
• Get more designers involved
• Add more components to the sketch library
• Figure out a better way to share our work
• Longer term think about integrations to fix problem with multiple
sources of truth.
Slide 82
Slide 82 text
2017
2013
Building a
design system
Implementing
and improving
Faster
mockups
Slide 83
Slide 83 text
Cambridge Sketch
Meetup group
meetup.com/cambridge-sketch
Slide 84
Slide 84 text
Questions?
Slide 85
Slide 85 text
Andrew Denty
UX Designer at Redgate
@andrewdenty