A design system. A year in review.
5 likes2,688 views
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.
A design system. A year in review.
- 1. A Design System A year in review.
- 2. Firstly, a bit of background
- 3. • One monolithic codebase • 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 ability to ship at scale.Good
- 6. Duplicated efforts and lack of sharing. Bad
- 7. Inconsistency amongst our products and platforms. Bad
- 8. Making site wide changes was really difficult. Bad
- 10. No standards resulted in a free for all. Ugly :(
- 11. We had to do something.
- 12. Starting small…
- 13. Unify the colour palette. Proof of concept
- 15. To this…
- 16. Getting teams to try something new alongside their existing schedules was hard. Really hard. Hard sell
- 17. Naturally, our team at 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 and seeing 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 to C-level on all the benefits that a design system could bring and ran demos of our POC. C-level buy-in
- 20. It had two be an equal partnership between design and engineering. Two-sided
- 21. All the great benefits 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
- 24. 24 Meet Backpack
- 25. Bring Design and Engineering together to enable squads to create beautiful, coherent products at scale. Mission
- 26. We were given 6 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 30 days of LinkedIn Premium can get you further than you think!
- 28. • Build on atomic 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 Backpack can 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 Feb Mar Apr Sass React
- 34. • Craft • Auto layout plugin for Sketch • React Storybook • Lerna • Theo • Design Systems Slack Useful tools
- 35. • More components • Tooling • Native apps What’s next?
- 36. Thanks! 😀 @jamesf3rguson @sweeneytimm skyscanner.net