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.

ngEurope 2014 | Responsive Takes Flight

6,349 views

Published on

The slides from @oliverdore's session at ngEurope 2014 on responsive design, and how AngularJS was to realize the technical and creative challenges of building the next generation of airline website.

Published in: Technology
  • Be the first to comment

ngEurope 2014 | Responsive Takes Flight

  1. 1. RESPONSIVE TAKES FLIGHT
  2. 2. @oliverdore
  3. 3. ABOUT WORK & CO Work & Company was designed from the ground up to create the types of digital products and services that can singlehandedly change the face of a brand.
  4. 4. FOUNDED EMPLOYEES 2013 53 Brooklyn HEADQUARTERS OPERATIONS CA San Francisco FR Paris BR Rio de Janeiro
  5. 5. “Virgin America is so far and away my favorite airline that second place isn’t even close." — John Gruber, Daring Fireball
  6. 6. NOT SO LONG AGO…
  7. 7. HOW WE THOUGHT ABOUT THE REDESIGN
  8. 8. CONVERSION RESPONSIVE BRAND
  9. 9. DESIGN PROTOTYPE TEST ITERATE
  10. 10. PROTOTYPING & USER TESTING
  11. 11. “There wasn’t a design phase and a development phase - it was designers and developers working together.” — Joe Stewart, Design
  12. 12. “This isn’t how an airline site should be.”
  13. 13. OUR APPROACH TO RESPONSIVE
  14. 14. EVERYTHING FIRST.
  15. 15. ARCHITECTURE UI FRAMEWORK RESPONSIVE COMPONENTS FORMS IMAGES TECHNICAL APPROACH 1 2 3 4 5
  16. 16. 1 ARCHITECTURE
  17. 17. We’re not experts.
  18. 18. Angular was opinionated where it mattered. But it was also flexible where it mattered.
  19. 19. Views Directives Controllers API Functional Utility RequireJS GruntJS Node / NPM Compass Susy SASS Ruby REST API Magnolia CMS Jenkins
  20. 20. 2 UI FRAMEWORK
  21. 21. RESPONSIVE 3 COMPONENTS
  22. 22. window windowService vx-common-window <body> controller controller controller directive directive
  23. 23. 4 FORMS
  24. 24. Travelers Cabins Travel Advisories TAM News Cities Warnings ADS Seats Upgrades MCS Errors Account Charges Availability Status Points Fees Session Payment Promotions Avatar Fares Non-stop Alerts Sales First Dates Refund DHS Thru Insurance Connecting Rewards
  25. 25. 5 IMAGES
  26. 26. Total Transfer Size 1682kb 1739kb 1783kb 1893kb
  27. 27. Mo $watch(), mo problems.
  28. 28. TAKE OFF
  29. 29. "Virgin America's new site is unlike any other travel provider's site we've seen. We hope everyone else will copy it." — FAST COMPANY "The first radical rethinking of the flight booking experience in a decade" — WIRED "Most Impressive Industry Evolution" — UX AWARDS

×