The road to faster mock-ups: How we built and shared our design system
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.
The road to faster mock-ups: How we built and shared our design system
- 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)
- 5. This talk will cover
- 6. 2017 2013
- 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
- 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)
- 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 ��le?
- 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
- 53. What is Sketch?
- 54. Sketch has reusable elements called symbols
- 58. Demo
- 65. Demo
- 66. Benefits
- 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
- 84. Questions?
- 85. Andrew Denty UX Designer at Redgate @andrewdenty