Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Designing at Scale: Creating a Global User Experience

1.342 visualizaciones

Publicado el

Experience Report from UX Cambridge 9th September 2015

----
About the Experience Report
----
Skyscanner, the world's travel search engine, launched in 2003 and has grown at significant pace, with over 600 employees spanning 53 nationalities across nine global offices.

In any company experiencing this level of growth, it's often challenging to create and maintain a unified user experience.

In this session we'l look at some of the challenges we've faced as designers. You'll gain insight into some of the pitfalls that a rapidly growing company can encounter when trying to manage both brand and user experience at scale.

Touching on how creating a product shapes the modern day brand, we'll look at how we've approached designing relevant experiences for the world's travellers. We will also take a brief look at some of the technical challenges of delivering a coherent design experience across multiple platforms, technology stacks and co-located teams.

----
About the Speaker
----
James is a full stack designer specialising in crafting user experiences for the mobile web, with a love for combining design and code to create ideas that delight and come alive in the browser.

He is currently working for meta travel search engine Skyscanner, solving complex problems for the world's travellers.

---
@jamesf3rguson
@skyscanner
@uxcambridge
#uxcam

Publicado en: Diseño
  • Sé el primero en comentar

Designing at Scale: Creating a Global User Experience

  1. 1. @jamesf3rguson Designing at Scale Creating a global user experience
  2. 2. @jamesf3rguson I’m James and I’m a Designer + Maker with 12+ years experience in:
  3. 3. @jamesf3rguson I’m James and I’m a Designer + Maker with 12+ years experience in: •product strategy
  4. 4. @jamesf3rguson I’m James and I’m a Designer + Maker with 12+ years experience in: •product strategy •multi-device responsive and adaptive design
  5. 5. @jamesf3rguson I’m James and I’m a Designer + Maker with 12+ years experience in: •product strategy •multi-device responsive and adaptive design •building and leading global design teams
  6. 6. @jamesf3rguson I’m from Edinburgh!
  7. 7. @jamesf3rguson I’m from Edinburgh! •Birthplace and home to inventor, Alexander Graham Bell
  8. 8. @jamesf3rguson I’m from Edinburgh! •Birthplace and home to inventor, Alexander Graham Bell •Hosts festivals attracting visitors from all over the world
  9. 9. @jamesf3rguson I’m from Edinburgh! •Birthplace and home to inventor, Alexander Graham Bell •Hosts festivals attracting visitors from all over the world •And if enjoying a wee dram isn’t your thing, we even make our own Edinburgh Gin!
  10. 10. @jamesf3rguson
  11. 11. @jamesf3rguson
  12. 12. @jamesf3rguson The world’s travel search engine
  13. 13. @jamesf3rguson The world’s travel search engine
  14. 14. @jamesf3rguson Founded 2003, grown to 700+ employees with 9 global offices
  15. 15. @jamesf3rguson 40m+ unique monthly visitors Founded 2003, grown to 700+ employees with 9 global offices
  16. 16. @jamesf3rguson 40m+ unique monthly visitors 35m+ app downloads Founded 2003, grown to 700+ employees with 9 global offices
  17. 17. @jamesf3rguson 40m+ unique monthly visitors 35m+ app downloads Founded 2003, grown to 700+ employees with 9 global offices £93m 2014 revenue
  18. 18. @jamesf3rguson But let’s first rewind a year…
  19. 19. @jamesf3rguson think “boxes and arrows” ux team
  20. 20. @jamesf3rguson think “colouring in” graphic team
  21. 21. @jamesf3rguson who were time bound and decided to ‘simplify it a little’ engineering
  22. 22. @jamesf3rguson No one was happy.
  23. 23. @jamesf3rguson No one was happy. Let alone the user!
  24. 24. @jamesf3rguson But then, things changed.
  25. 25. @jamesf3rguson The entire organisation was re-structured.
  26. 26. @jamesf3rguson lean agile continuous delivery theory of constraints manufacturing
  27. 27. @jamesf3rguson Designer Engineers Tester Product Owner We created small ‘start-up’-esque, cross-functional teams, comprising of no more than 8 people.
  28. 28. @jamesf3rguson These teams, ‘squads’ are responsible for a specific part of the Skyscanner product. They
  29. 29. @jamesf3rguson These teams, ‘squads’ are responsible for a specific part of the Skyscanner product. They • have an enduring mission
  30. 30. @jamesf3rguson These teams, ‘squads’ are responsible for a specific part of the Skyscanner product. They • have an enduring mission • have a product owner to prioritise work
  31. 31. @jamesf3rguson These teams, ‘squads’ are responsible for a specific part of the Skyscanner product. They • have an enduring mission • have a product owner to prioritise work • own their codebase and choose their own technology
  32. 32. @jamesf3rguson These teams, ‘squads’ are responsible for a specific part of the Skyscanner product. They • have an enduring mission • have a product owner to prioritise work • own their codebase and choose their own technology • establish & improve their own processes
  33. 33. @jamesf3rguson These teams, ‘squads’ are responsible for a specific part of the Skyscanner product. They • have an enduring mission • have a product owner to prioritise work • own their codebase and choose their own technology • establish & improve their own processes
  34. 34. @jamesf3rguson So what does this all mean for design?
  35. 35. @jamesf3rguson We no longer sit with other designers. Instead we sit with engineers and other team mates.
  36. 36. @jamesf3rguson We no longer divide ux + graphic design. Instead we look for T-shaped designers.
  37. 37. @jamesf3rguson We experiment. Almost every thing we do, we measure to validate our learning.
  38. 38. @jamesf3rguson We iterate. Early and often.
  39. 39. @jamesf3rguson No more Photoshop. Well, less.
  40. 40. @jamesf3rguson We’ve come to learn that tools like Git, SASS, and Grunt are not just for developers.
  41. 41. @jamesf3rguson And even Terminal can be your friend. Honest :)
  42. 42. @jamesf3rguson So what challenges have we faced?
  43. 43. @jamesf3rguson Syncing as a team of designers can be tricky.
  44. 44. @jamesf3rguson
  45. 45. @jamesf3rguson
  46. 46. @jamesf3rguson
  47. 47. @jamesf3rguson
  48. 48. @jamesf3rguson
  49. 49. @jamesf3rguson
  50. 50. @jamesf3rguson
  51. 51. @jamesf3rguson
  52. 52. @jamesf3rguson
  53. 53. @jamesf3rguson
  54. 54. @jamesf3rguson Recommended Reading Tools Our Work Conferences Inspiration
  55. 55. @jamesf3rguson Recommended Reading Tools Our Work Conferences Inspiration Virtual stand-up
  56. 56. @jamesf3rguson Consistency at Scale
  57. 57. @jamesf3rguson The great green button debate
  58. 58. @jamesf3rguson The great green button debate
  59. 59. @jamesf3rguson Select menus Close buttons Calendar icons Filters
  60. 60. @jamesf3rguson Some questionable and then some almost identical colours have infiltrated out site #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
  61. 61. @jamesf3rguson So how are we fixing it? We’re using some of our new skills and tools mentioned earlier…
  62. 62. @jamesf3rguson Common styles service Search form Date Picker Filters Search results Summary bar Booking panel
  63. 63. @jamesf3rguson CSS SASS Less Stylus Formats RGBA HEX Units PX, EM, REM, PT, SP, DIP Base Colours Typography Spacing Icons Animations etc. Asset management Icons Fonts Graphics etc. UI guidelines Elements Forms Buttons Surfaces etc. Specifies Stores Generates
  64. 64. @jamesf3rguson Common styles service Search form Date Picker Filters Search results Summary bar Booking panel
  65. 65. @jamesf3rguson Common styles service Search form Date Picker Filters Search results Summary bar Booking panel SASS LESS Stylus CSS LESS SASS
  66. 66. @jamesf3rguson Common styles service Search form Date Picker Filters Search results Summary bar Booking panel SASS LESS Stylus CSS LESS SASS Backbone Angular Backbone Angular
  67. 67. @jamesf3rguson Common styles service Search form Date Picker Filters Search results Summary bar Booking panel SASS LESS Stylus CSS LESS SASS Backbone Angular Backbone Angular lodash jQuery CoffeeScript JavaScript Handlebars Polymer
  68. 68. @jamesf3rguson SASS LESS
 Stylus Vanilla CSS HTML JS (with jQuery) SASS CoffeeScript + jQuery Luckily, the output always boils down to:
  69. 69. @jamesf3rguson
  70. 70. @jamesf3rguson Want to change something?
  71. 71. @jamesf3rguson Want to change something? •Clone a copy of the repo
  72. 72. @jamesf3rguson Want to change something? •Clone a copy of the repo •Make the change
  73. 73. @jamesf3rguson Want to change something? •Clone a copy of the repo •Make the change •Submit a merge request.
  74. 74. @jamesf3rguson What are the benefits?
  75. 75. @jamesf3rguson Highly collaborative.
  76. 76. @jamesf3rguson Everyone owns the product.
  77. 77. @jamesf3rguson We iterate often.
  78. 78. @jamesf3rguson Ultimately, One single source of truth for design
  79. 79. @jamesf3rguson @jamesf3rguson

×