SlideShare uma empresa Scribd logo
1 de 119
Baixar para ler offline
RESPONSIVE 
TAKES 
FLIGHT
@oliverdore
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.
FOUNDED 
EMPLOYEES 
2013 
53 
Brooklyn HEADQUARTERS 
OPERATIONS 
CA 
San Francisco 
FR 
Paris 
BR 
Rio de Janeiro
“Virgin America is so far and away 
my favorite airline that second place 
isn’t even close." 
— John Gruber, Daring Fireball
NOT SO LONG AGO…
HOW WE THOUGHT 
ABOUT THE REDESIGN
CONVERSION 
RESPONSIVE 
BRAND
DESIGN 
PROTOTYPE 
TEST 
ITERATE
PROTOTYPING & 
USER TESTING
“There wasn’t a design phase and a 
development phase - it was designers 
and developers working together.” 
— Joe Stewart, Design
“This isn’t how an airline site should be.”
OUR APPROACH 
TO RESPONSIVE
EVERYTHING FIRST.
ARCHITECTURE 
UI FRAMEWORK 
RESPONSIVE COMPONENTS 
FORMS 
IMAGES 
TECHNICAL 
APPROACH 1 
2 
3 
4 
5
1 ARCHITECTURE
We’re not experts.
Angular was opinionated where it mattered. 
But it was also flexible where it mattered.
Views Directives 
Controllers 
API Functional Utility 
RequireJS 
GruntJS 
Node / NPM 
Compass Susy 
SASS 
Ruby 
REST API Magnolia CMS Jenkins
2 UI FRAMEWORK
RESPONSIVE 
3 COMPONENTS
window 
windowService 
vx-common-window 
<body> 
controller controller controller 
directive directive
4 FORMS
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
5 IMAGES
Total Transfer Size 
1682kb 1739kb 
1783kb 
1893kb
Mo $watch(), mo problems.
TAKE OFF
"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
ngEurope 2014 | Responsive Takes Flight
ngEurope 2014 | Responsive Takes Flight

Mais conteúdo relacionado

Destaque

Intro to the LA Design Community Resources
Intro to the LA Design Community ResourcesIntro to the LA Design Community Resources
Intro to the LA Design Community Resources
Huge
 

Destaque (15)

Failure, the other 'f' word [Creative Mornings]
Failure, the other 'f' word [Creative Mornings]Failure, the other 'f' word [Creative Mornings]
Failure, the other 'f' word [Creative Mornings]
 
Angel Bootcamp - Angel Investing: Terms and Issues - Dave Young
Angel Bootcamp - Angel Investing: Terms and Issues - Dave YoungAngel Bootcamp - Angel Investing: Terms and Issues - Dave Young
Angel Bootcamp - Angel Investing: Terms and Issues - Dave Young
 
Introduction to the Los Angeles Startup Community
Introduction to the Los Angeles Startup CommunityIntroduction to the Los Angeles Startup Community
Introduction to the Los Angeles Startup Community
 
The Augmented Future: Entertainment & Utility
The Augmented Future: Entertainment & UtilityThe Augmented Future: Entertainment & Utility
The Augmented Future: Entertainment & Utility
 
RobotUX: A Framework for Human-Robot Interactions
RobotUX: A Framework for Human-Robot InteractionsRobotUX: A Framework for Human-Robot Interactions
RobotUX: A Framework for Human-Robot Interactions
 
A importância da UX para o consumo de conteúdo digital
A importância da UX para o consumo de conteúdo digitalA importância da UX para o consumo de conteúdo digital
A importância da UX para o consumo de conteúdo digital
 
The Android Revolution
The Android Revolution The Android Revolution
The Android Revolution
 
What Matters Now: Retail
What Matters Now: RetailWhat Matters Now: Retail
What Matters Now: Retail
 
Intro to the LA Design Community Resources
Intro to the LA Design Community ResourcesIntro to the LA Design Community Resources
Intro to the LA Design Community Resources
 
How Corporate Personhood Might Just Save the World
How Corporate Personhood Might Just Save the WorldHow Corporate Personhood Might Just Save the World
How Corporate Personhood Might Just Save the World
 
Social e conteúdo preditivo: como antever reações de usuários e diminuir risc...
Social e conteúdo preditivo: como antever reações de usuários e diminuir risc...Social e conteúdo preditivo: como antever reações de usuários e diminuir risc...
Social e conteúdo preditivo: como antever reações de usuários e diminuir risc...
 
The Little Book of IDEO: Values
The Little Book of IDEO: ValuesThe Little Book of IDEO: Values
The Little Book of IDEO: Values
 
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
Build Features, Not Apps
Build Features, Not AppsBuild Features, Not Apps
Build Features, Not Apps
 

Semelhante a ngEurope 2014 | Responsive Takes Flight

Building a CloudStack UI for the Enterprise
Building a CloudStack UI for the EnterpriseBuilding a CloudStack UI for the Enterprise
Building a CloudStack UI for the Enterprise
David Grizzanti
 
Quill slides-www2013
Quill slides-www2013Quill slides-www2013
Quill slides-www2013
Vivian Motti
 

Semelhante a ngEurope 2014 | Responsive Takes Flight (20)

Re-imagining Dubai Airport's future passenger experience
Re-imagining Dubai Airport's future passenger experienceRe-imagining Dubai Airport's future passenger experience
Re-imagining Dubai Airport's future passenger experience
 
Mobile Functional Beauty - Trebbble
Mobile Functional Beauty - TrebbbleMobile Functional Beauty - Trebbble
Mobile Functional Beauty - Trebbble
 
Decision Making in Product Design
Decision Making in Product DesignDecision Making in Product Design
Decision Making in Product Design
 
Ux intro
Ux introUx intro
Ux intro
 
TC SMART MAPS - A 10 Years Journey with FME
TC SMART MAPS - A 10 Years Journey with FMETC SMART MAPS - A 10 Years Journey with FME
TC SMART MAPS - A 10 Years Journey with FME
 
QueensLab presentation
QueensLab presentation QueensLab presentation
QueensLab presentation
 
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken SkistimasConsistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
 
Consistency vs Flexibility in Design Systems : A GE Case Study
Consistency vs Flexibility in Design Systems : A GE Case StudyConsistency vs Flexibility in Design Systems : A GE Case Study
Consistency vs Flexibility in Design Systems : A GE Case Study
 
"Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap...
"Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap..."Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap...
"Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap...
 
UberELEVATE Design Exercise
UberELEVATE Design ExerciseUberELEVATE Design Exercise
UberELEVATE Design Exercise
 
Building a CloudStack UI for the Enterprise
Building a CloudStack UI for the EnterpriseBuilding a CloudStack UI for the Enterprise
Building a CloudStack UI for the Enterprise
 
Digital Product Design's Biggest Challenge
Digital Product Design's Biggest ChallengeDigital Product Design's Biggest Challenge
Digital Product Design's Biggest Challenge
 
X-Platform native apps in C# and .NET using Xamarin tools (iOS/WP/Android)
X-Platform native apps in C# and .NET using Xamarin tools (iOS/WP/Android)X-Platform native apps in C# and .NET using Xamarin tools (iOS/WP/Android)
X-Platform native apps in C# and .NET using Xamarin tools (iOS/WP/Android)
 
The beat ride of mobile automation @#4 MoT Meetup, Athens
The beat ride of mobile automation @#4 MoT Meetup, AthensThe beat ride of mobile automation @#4 MoT Meetup, Athens
The beat ride of mobile automation @#4 MoT Meetup, Athens
 
Agi For Space Mission Analysis And Design
Agi For Space Mission Analysis And DesignAgi For Space Mission Analysis And Design
Agi For Space Mission Analysis And Design
 
Angular for the Enterprise - ngAtlanta 2019
Angular for the Enterprise - ngAtlanta 2019Angular for the Enterprise - ngAtlanta 2019
Angular for the Enterprise - ngAtlanta 2019
 
Quill slides-www2013
Quill slides-www2013Quill slides-www2013
Quill slides-www2013
 
Quill slides-www2013
Quill slides-www2013Quill slides-www2013
Quill slides-www2013
 
JavaScript: The Machine Language of the Ambient Computing Era
JavaScript: The Machine Language of the Ambient Computing EraJavaScript: The Machine Language of the Ambient Computing Era
JavaScript: The Machine Language of the Ambient Computing Era
 
Stripes RJUG March 2012
Stripes RJUG March 2012Stripes RJUG March 2012
Stripes RJUG March 2012
 

Último

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Último (20)

Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 

ngEurope 2014 | Responsive Takes Flight