The road to faster mock-ups: How we built and shared our design system - UX Cambridge 2017

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.

Transcript

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.ai Sketch 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.ai GitHub
60. Symbol master Brand.ai GitHub
61. Symbol master Brand.ai GitHub Symbol master Brand.ai GitHub
62. Symbol master Brand.ai GitHub
63. Symbol master Brand.ai GitHub
64. Symbol master Brand.ai GitHub
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