Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A design system. A year in review.

1,312 views

Published on

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.

Published in: Design
  • Be the first to comment

A design system. A year in review.

  1. 1. A Design System A year in review.
  2. 2. Firstly, a bit of background
  3. 3. • One monolithic codebase • Designs were funnelled
 through a centralised and
 co-located team. • Good product consistency 2014
  4. 4. • We squadified. • Pages and components became microservices. • People were empowered to
 be fully autonomous. 2015
  5. 5. Accelerated our ability to
 ship at scale.Good
  6. 6. Duplicated efforts and
 lack of sharing. Bad
  7. 7. Inconsistency amongst our products and platforms. Bad
  8. 8. Making site wide changes was really difficult. Bad
  9. 9. Polyglot technologies. React Bad
  10. 10. No standards resulted in a
 free for all. Ugly :(
  11. 11. We had to do something.
  12. 12. Starting small…
  13. 13. Unify the colour palette. Proof of concept
  14. 14. From this… #B2E57F #FFA500#FF0027#F6A1B3 #E7E7E8 #4191D3 #6ACA26 #8265D9 #ED5173 #9CE708 #4C4C4C #3B404D #FFD726 #FA8A19 #FF5C4D #B03743 #00BF96 #008075 #86DD41 #FFC506 #D0021B #0084FF #C9C9CE #000000 #71A220 #C6DAA6 #F5F5F5 #AAE702 #FA7F19 #D00620 #B0B0B0 #17C0E9 #21D7EE #00BBCC #02BBC4 #1BA8BC #006982 #21C4D9 #0094B8 #5BE2ED #29A8BB #9EE8ED #C2EAEC #1394B5 #E1A70A #FAC25F #E8B401 #C7D834 #AAE700 #34363D #4D5059 #FAF3B0
  15. 15. To this…
  16. 16. Getting teams to try something new alongside their existing schedules was hard. Really hard. Hard sell
  17. 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. 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. 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. 20. It had two be an equal partnership between design and engineering. Two-sided
  21. 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
  22. 22. A full-time team was formed.
  23. 23. backpack.prod.aws.skyscnr.com (open-sourcing soon) Meet Backpack
  24. 24. 24 Meet Backpack
  25. 25. Bring Design and Engineering together to enable squads to create beautiful, coherent products at scale. Mission
  26. 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. 27. •Salesforce •Facebook •Dropbox •Twitter •Google Learning from the giants 30 days of LinkedIn Premium can get you further than you think!
  28. 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. 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. 30. • Increase adoption • Create a library of components Our focus
  31. 31. Adoption 0 30 60 90 120 Q1 2017 Jan Feb Mar Apr Sass React
  32. 32. • Craft • Auto layout plugin for Sketch • React Storybook • Lerna • Theo • Design Systems Slack Useful tools
  33. 33. • More components • Tooling • Native apps What’s next?
  34. 34. Thanks! 😀 @jamesf3rguson @sweeneytimm skyscanner.net

×