Design systems help us design consistent, joined up experiences across different products and platforms. With many designers working across a company, how do you easily share your design system so they’re each working with the latest version and not duplicating work? This session is a case study aiming to give an overview of how we have used our design system, Honeycomb. Most talks on design systems focus on building a web toolkit, or library, with a bunch of developer ready components. But I want to show how we have created a number of resources for designers to speed up how they create designs before they hand over to developers. We have used tools such as Sketch and Brand AI to build a library of components, which makes it really easy to create and change mockups. We typically use these mockups to test designs with end users before building.

1. The road to faster
mock-ups
How we built and
shared our design system

2. Andrew Denty
UX Designer at Redgate
@andrewdenty

3. ReadyRoll
(A tool to help people develop SQL Server databases)

4. Honeycomb
(Redgate’s design system)

5. This talk will cover

6. 2017
2013

7. 2017
2013
Building a
design system

8. 2017
2013
Building a
design system
Implementing
and improving

9. 2017
2013
Building a
design system
Implementing
and improving
Faster
mockups

10. This talk won’t cover

11. What is a design system?

14. – Jakob Nielsen
“Since the dawn of time (1984), we have
known that consistency is one of the
strongest contributors to usability.”

15. Design systems
• Aid usability
• Guide product consistency
• Enable us to work more efficiently
• Help create a branded experience

16. Life without a design system

20. Why were our products
so inconsistent?

21. Conway’s law

22. Designers embedded in teams

23. Design systems weren’t
as big in 2013

24. Fluent Design - May 2017

25. Recognisability wasn’t critical

27. Last and most importantly:
Usability

28. “With the productivity
I'll get out of this tool,
it's like buying time.”
Robert Sondles

29. "Our old deployment
process was
cumbersome and
stressful – now it's
almost fun.”
Mattias Geigant

30. Consistent design ≠ good usability
(but is a factor)

31. Building Honeycomb

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

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

34. What Honeycomb included
•Website - honeycomb.red-gate.com
•A web toolkit - to spin up new projects

36. Honeycomb week

39. Redgate switcher

40. One year on

42. Growing pains?

43. Can you send me the file?

45. Chinese whispers

47. Multiple frameworks.
Differing states.
Web WPF WinForms

48. What is the source of truth?

49. Duplicated work

50. Hard to switch projects

51. Faster
mockups

52. +
Brand.aiSketch
Faster Mockups

53. What is Sketch?

54. Sketch has reusable elements
called symbols

55. Symbol Use
Download

56. Symbol Use
Download

57. Download
Symbol Use

58. Demo

59. Symbol
master
Brand.aiGitHub

60. Symbol
master
Brand.aiGitHub

61. Symbol
master
Brand.aiGitHub Symbol
master
Brand.aiGitHub

62. Symbol
master
Brand.aiGitHub

63. Symbol
master
Brand.aiGitHub

64. Symbol
master
Brand.aiGitHub

65. Demo

66. Benefits

68. Brand.ai Alternatives
+

69. New! Sketch Libraries
Shared symbols in the next major version

70. Why we chose Sketch
and Brand.ai
+

71. Where we are now

72. Spacing

73. You’ll need more time on it
than you think

76. 1/2 day

77. Get everyone involved in the
design system

78. There are still lots of things
missing…

79. We still don’t have a good way
of sharing work

80. Single source of truth?

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

82. 2017
2013
Building a
design system
Implementing
and improving
Faster
mockups

83. Cambridge Sketch
Meetup group
meetup.com/cambridge-sketch

84. Questions?

85. Andrew Denty
UX Designer at Redgate
@andrewdenty