A Design System: One Year In Review
•
5 likes•2,448 views
In this talk we’ll uncover our journey in creating a Design System for Skyscanner and share our learnings on how we sold it to the business by proving its worth. We’ll talk through some of the design and tech considerations we’ve made and share the tools and techniques which have helped us along the way.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to A Design System: One Year In Review
Similar to A Design System: One Year In Review (20)
Recently uploaded
Recently uploaded (20)
A Design System: One 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