Downloaded 35 times
Uploaded byJames Ferguson
A design system. A year in review.
The document reflects on a year of developing a design system that transitioned from a monolithic codebase to a more agile, microservices approach, which allowed for greater autonomy and scalability in product design. Despite initial challenges such as inconsistency and technology fragmentation, the team successfully unified the design elements and gained buy-in from C-level executives by emphasizing cost efficiency and revenue potential. Now, with a full-time team in place and growing adoption, the project aims to create a coherent product ecosystem integrating design and engineering principles while maintaining flexibility.
More Related Content
Similar to A design system. A year in review.
![Chapter4_Initiation_of_Sediment_Motion_v2[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/chapter4initiationofsedimentmotionv21-251208223747-f94ef163-thumbnail.jpg?width=640&height=640&fit=bounds)
![Chapt_4[1].ppt very interseting and important](https://cdn.slidesharecdn.com/ss_thumbnails/chapt41-251208222956-7cf5e0fa-thumbnail.jpg?width=640&height=640&fit=bounds)
A design system. A year in review.
- 1. A Design System Ayear in review.
- 2. Firstly, a bitof background
- 3. • One monolithiccodebase • Designs were funnelled through a centralised and co-located team. • Good product consistency 2014
- 4. • We squadified. •Pages and components became microservices. • People were empowered to be fully autonomous. 2015
- 5. Accelerated our abilityto ship at scale.Good
- 6. Duplicated efforts and lackof sharing. Bad
- 7. Inconsistency amongst our productsand platforms. Bad
- 8. Making site widechanges was really difficult. Bad
- 9.
- 10. No standards resultedin a free for all. Ugly :(
- 11. We had todo something.
- 12.
- 13. Unify the colourpalette. Proof of concept
- 14.
- 15.
- 16. Getting teams totry something new alongside their existing schedules was hard. Really hard. Hard sell
- 17. Naturally, our teamat the time became the first adopter. A few beers later, we managed to convince a couple of other teams to give it ago. Beer pays
- 18. Gaining traction andseeing things being used in multiple projects showed signs that this was useful. It was time to make a business case. Rule of 3
- 19. We presented toC-level on all the benefits that a design system could bring and ran demos of our POC. C-level buy-in
- 20. It had twobe an equal partnership between design and engineering. Two-sided
- 21. All the greatbenefits aside (which everyone nodded along to), we finally got people to listen when we talked about money. Both money wasted by reinventing the wheel - think design and engineering salaries, but also the potential revenue we could gain by speeding up delivery for teams by getting to market quicker. Money talks
- 22.
- 23.
- 24.
- 25. Bring Design and Engineeringtogether to enable squads to create beautiful, coherent products at scale. Mission
- 26. We were given6 months to get the project off the ground and prove its worth. We’re now nearly a year in and going from strength to strength with 5 full-time team members. BTW We’re hiring: bit.ly/2pa2Ww1 1 year in…
- 27. •Salesforce •Facebook •Dropbox •Twitter •Google Learning from the giants 30days of LinkedIn Premium can get you further than you think!
- 28. • Build onatomic design principles to instil component thinking • Offer Sketch, React and Sass solutions • Bake accessibility in from the start • Support RTL languages • Allow custom theming Approach
- 29. Everything in Backpackcan and should be challenged. We are not the consistency police. It belongs to design and engineering. We simply maintain it. Not an edict
- 30. • Increase adoption •Create a library of components Our focus
- 33. Adoption 0 30 60 90 120 Q1 2017 Jan FebMar Apr Sass React
- 34. • Craft • Autolayout plugin for Sketch • React Storybook • Lerna • Theo • Design Systems Slack Useful tools
- 35. • More components •Tooling • Native apps What’s next?
- 36. Thanks! 😀 @jamesf3rguson @sweeneytimmskyscanner.net