ngeurope 2014 | responsive takes flight

Post on 27-Nov-2014

1.927 Views

Category:

Technology

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

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.

TRANSCRIPT

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.

2013FOUNDED

BrooklynHEADQUARTERS

EMPLOYEES

53

OPERATIONS

CASan Francisco

FRParis

BRRio de Janeiro

“Virgin America is so far and awaymy 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

ARCHITECTURE1

We’re not experts.

Angular was opinionated where it mattered.But it was also flexible where it mattered.

API Functional Utility

Controllers

Views Directives

RequireJS

GruntJS

Node / NPM

REST API Magnolia CMS Jenkins

Compass Susy

SASS

Ruby

UI FRAMEWORK2

RESPONSIVECOMPONENTS3

windowService

window

vx-common-window <body>

controller controller controller

directive directive

FORMS4

Travelers

Cabins

Travel Advisories

TAM

News

Cities

Warnings

ADS

Seats

Upgrades

MCS

Errors

Account

Charges

Availability

Status

Points

Fees

Payment

Session

Promotions

Avatar

Fares

Non-stop

Alerts Sales

First

Dates

Refund

DHS

Thru

Insurance

Connecting

Rewards

IMAGES5

Total Transfer Size

1682kb 1739kb1783kb

1893kb

Mo $watch(), mo problems.

TAKE OFF

"Most Impressive Industry Evolution" — UX AWARDS

"The first radical rethinking of the flight booking experience in a decade" — WIRED

"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

top related