73
Rick Williams 22nd January 2009

Fiat eco:Drive

Embed Size (px)

DESCRIPTION

A look at how Fiat eco:Drive was developed by AKQA London

Citation preview

Page 1: Fiat eco:Drive

Rick Williams22nd January 2009

Page 2: Fiat eco:Drive

BEFORE WE GET DOWN TO BUSINESS…

Page 3: Fiat eco:Drive

WHO IS AKQA?

GLOBAL ADVERTISING AGENCY.

OFFICES IN LONDON, SAN FRANCISCO, WASHINGTON DC,

NEW YORK, AMSTERDAM AND SHANGHAI.

LONDON OFFICE HAS 250 PEOPLE. AKQA HAS 800 EMPLOYEES WORLDWIDE.

AKQA AMSTERDAM IS LOOKING FOR FLASH DEVELOPERS.

Page 4: Fiat eco:Drive
Page 5: Fiat eco:Drive

WHAT WAS OUR BRIEF FROM FIAT?

BUILD A PRODUCT THAT HELPS IMPROVE YOUR DRIVINGUSING TELEMATIC DATA COLLECTED FROM THE CAR

Page 6: Fiat eco:Drive

THE CHALLENGES

CONNECTING YOUR CAR TO YOUR

COMPUTER IS A NEW CONCEPT TO MOST

DRIVING DATA CAN BE CONFUSING

LARGE AMOUNTS OF DATA, ONCE PER

SECOND OF EVERY JOURNEY

WHY IS ECO:DRIVE “SOPHISTICATED”?

Page 7: Fiat eco:Drive

THE CHALLENGES

CONNECTING YOUR CAR TO YOUR

COMPUTER IS A NEW CONCEPT TO MOST

DRIVING DATA CAN BE CONFUSING

LARGE AMOUNTS OF DATA, ONCE PER

SECOND OF EVERY JOURNEY

WHY IS ECO:DRIVE “SOPHISTICATED”?

YET THE SOLUTION HAD TO BE

INTUITIVE EASY TO USE RESPONSIVE

Page 8: Fiat eco:Drive

A LITTLE BIT MORE DETAIL…

BUILT USING ADOBE AIR 1.1 AND FLEX

Page 9: Fiat eco:Drive

BUILT IN 4 MONTHS BY A DEVELOPMENT TEAM OF 5

A LITTLE BIT MORE DETAIL…

BUILT USING ADOBE AIR 1.1 AND FLEX

Page 10: Fiat eco:Drive

BUILT IN 4 MONTHS BY A DEVELOPMENT TEAM OF 5

CREATED USING FLEXBUILDER 3 PROFESSIONAL EDITION

A LITTLE BIT MORE DETAIL…

BUILT USING ADOBE AIR 1.1 AND FLEX

Page 11: Fiat eco:Drive

BUILT IN 4 MONTHS BY A DEVELOPMENT TEAM OF 5

CREATED USING FLEXBUILDER 3 PROFESSIONAL EDITION

LAUNCHED IN 3 LANGUAGES, SOON TO BE 5

A LITTLE BIT MORE DETAIL…

BUILT USING ADOBE AIR 1.1 AND FLEX

Page 12: Fiat eco:Drive

WHY ADOBE AIR?

CROSS PLATFORM

Page 13: Fiat eco:Drive

WHY ADOBE AIR?

SMOOTH INSTALL OF THE FRAMEWORK AND APPLICATION

CROSS PLATFORM

Page 14: Fiat eco:Drive

WHY ADOBE AIR?

SMOOTH INSTALL OF THE FRAMEWORK AND APPLICATION

EASY AUTO-UPDATE FUNCTIONALITY

CROSS PLATFORM

Page 15: Fiat eco:Drive

SMOOTH INSTALL OF THE FRAMEWORK AND APPLICATION

EASY AUTO-UPDATE FUNCTIONALITY

INTERGRATED SQLITE DB

WHY ADOBE AIR?

CROSS PLATFORM

Page 16: Fiat eco:Drive

WHAT ARE WE TALKING ABOUT

THE TEAMS AND THE WORKFLOW

Page 17: Fiat eco:Drive

WHAT ARE WE TALKING ABOUT

KEEPING QUALITY HIGH

THE TEAMS AND THE WORKFLOW

Page 18: Fiat eco:Drive

WHAT ARE WE TALKING ABOUT

KEEPING QUALITY HIGH

GETTING UNDER THE COVERS OF ECO:DRIVE

THE TEAMS AND THE WORKFLOW

Page 19: Fiat eco:Drive

KEEPING QUALITY HIGH

GETTING UNDER THE COVERS OF ECO:DRIVE

OUR TOP TIPS AND LESSONS LEARNT

WHAT AM I GOING TO TALK ABOUT

THE TEAMS AND THE WORKFLOW

Page 20: Fiat eco:Drive

FEATURES DEMO

Page 21: Fiat eco:Drive

WHAT DOES ECO:DRIVE LOOK LIKE INSIDE?

Page 22: Fiat eco:Drive

THE MANDATORY BLOCK DIAGRAM

Page 23: Fiat eco:Drive

THE MANDATORY BLOCK DIAGRAM

USB KEY

Page 24: Fiat eco:Drive

THE MANDATORY BLOCK DIAGRAM

ECO:INDEXWEB SERVICE

HTTP

COMMUNITYWEB SERVICE

HTTP

FUEL PRICEWEB SERVICE

HTTP

USB KEY

Page 25: Fiat eco:Drive

UPDATE DEMO

Page 26: Fiat eco:Drive

IMPORTING DATA: STEP BY STEP

EACH CAR ON THE USB KEY IS MATCHED TO A CAR INTHE DESKTOP APPLICATION

Page 27: Fiat eco:Drive

IMPORTING DATA: STEP BY STEP

EACH CAR ON THE USB KEY IS MATCHED TO A CAR INTHE DESKTOP APPLICATION

FIRST 50% OF THE PROGRESS BAR: PARSING DATA INTO MEMORY

Page 28: Fiat eco:Drive

IMPORTING DATA: STEP BY STEP

EACH CAR ON THE USB KEY IS MATCHED TO A CAR INTHE DESKTOP APPLICATION

SECOND 50%: SAVING THAT DATA TO THE DATABASE

FIRST 50% OF THE PROGRESS BAR: PARSING DATA INTO MEMORY

Page 29: Fiat eco:Drive

IMPORTING DATA: STEP BY STEP

EACH CAR ON THE USB KEY IS MATCHED TO A CAR INTHE DESKTOP APPLICATION

EACH JOURNEY IS SUBMITTED TO THE ECO:INDEX WEB SERVICE

SECOND 50%: SAVING THAT DATA TO THE DATABASE

FIRST 50% OF THE PROGRESS BAR: PARSING DATA INTO MEMORY

Page 30: Fiat eco:Drive

IMPORTING DATA: STEP BY STEP

EACH CAR ON THE USB KEY IS MATCHED TO A CAR INTHE DESKTOP APPLICATION

UPDATE THE DATABASE AND THE USER INTERFACE

EACH JOURNEY IS SUBMITTED TO THE ECO:INDEX WEB SERVICE

SECOND 50%: SAVING THAT DATA TO THE DATABASE

FIRST 50% OF THE PROGRESS BAR: PARSING DATA INTO MEMORY

Page 31: Fiat eco:Drive

IMPORTING DATA: PARSING

LIMITED SPACE AVAILABLE IN BLUE & ME COMPUTER

MORE COMPUTING POWER AVAILABLE ON THE DESKTOPTHAN IN THE CAR

EASE OF PARSING WAS NOT THE FIRST PRIORITY

NO BITARRAY IN ACTIONSCRIPT 3

DATA IS STORED IN A TIGHTLY PACKED BIT ARRAY

Page 32: Fiat eco:Drive

IMPORTING DATA: PARSING

FIRST WAS FUNCTIONAL, BUT SLOW

ONCE UI WAS COMPLETED, WE RUTHLESSLY OPTIMISED

SEVERAL ITERATIONS OF THE PARSING CODE

Page 33: Fiat eco:Drive

IMPORTING DATA: WRITING DATA TO THE DATABASE

THERE WERE TWO MAJOR REQUIREMENTS

IMPORT HAD TO BE HIGHLY PERFORMANT

USER INTERFACE HAD TO REMAIN SMOOTH AND RESPONSIVE

Page 34: Fiat eco:Drive

IMPORTING DATA: WRITING DATA TO THE DATABASE

THERE WERE TWO MAJOR REQUIREMENTS

IMPORT HAD TO BE HIGHLYPERFORMANT

USER INTERFACE HAD TO REMAIN SMOOTH AND RESPONSIVE

THERE WERE TWO PROBLEMS

USING A TIMER WAS NOTFAST ENOUGH

USER “FOR” LOOPS MEANT AN UNRESPONSIVE APPLICATION

Page 35: Fiat eco:Drive

IMPORTING DATA: WRITING DATA TO THE DATABASE

THERE WERE TWO MAJOR REQUIREMENTS

IMPORT HAD TO BE HIGHLY PERFORMANT

USER INTERFACE HAD TO REMAIN SMOOTH AND RESPONSIVE

THERE WERE TWO PROBLEMS

USING A TIMER WAS NOTFAST ENOUGH

USER “FOR” LOOPS MEANT AN UNRESPONSIVE APPLICATION

THE SOLUTION?

THE “ASYNC CHUNKER MONKEY”

Page 36: Fiat eco:Drive

IMPORTING DATA: THE ASYNC CHUNKER WHAT?

USING SYNCHRONOUS “FOR” LOOP TO PROCESSEACH ITEM IN AN ARRAY

Page 37: Fiat eco:Drive

IMPORTING DATA: THE ASYNC CHUNKER WHAT?

USING A TIMER

USING SYNCHRONOUS “FOR” LOOP TO PROCESSEACH ITEM IN AN ARRAY

Page 38: Fiat eco:Drive

IMPORTING DATA: THE ASYNC CHUNKER WHAT?

USING THE ASYNC CHUNKER MONKEY

USING SYNCHRONOUS “FOR” LOOP TO PROCESSEACH ITEM IN AN ARRAY

Page 39: Fiat eco:Drive

IMPORTING DATA: THE ASYNC CHUNKER WHAT?

USING THE ASYNC CHUNKER MONKEY

USING SYNCHRONOUS “FOR” LOOP TO PROCESSEACH ITEM IN AN ARRAY

MAX TIME FOR EXECUTION IS SET BY DEVELOPER

Page 40: Fiat eco:Drive

IMPORTING DATA: THE ASYNC CHUNKER WHAT?

USING THE ASYNC CHUNKER MONKEY

USING SYNCHRONOUS “FOR” LOOP TO PROCESSEACH ITEM IN AN ARRAY

MAX TIME FOR EXECUTION IS SET BY DEVELOPER

Page 41: Fiat eco:Drive

DATA VISUALISATION DEMO

Page 42: Fiat eco:Drive

VISUALISING THE DATA

JOURNEY VIEW – TREND VIEW – ECO:VILLE

Page 43: Fiat eco:Drive

GRAPHING THE DATA: JOURNEY VIEW

SCRUB BAR

INDIVIDUAL DATA

DYNAMIC LOADING

Page 44: Fiat eco:Drive

THE PEOPLE BEHIND THE PRODUCT…

Page 45: Fiat eco:Drive

HOW DID IT ALL WORK OUT?

Page 46: Fiat eco:Drive

HOW DID IT ALL WORK OUT?

Page 47: Fiat eco:Drive

HOW DID IT ALL WORK OUT?

Page 48: Fiat eco:Drive

HOW DID IT ALL WORK OUT?

Page 49: Fiat eco:Drive

HOW DID IT ALL WORK OUT?

Page 50: Fiat eco:Drive

HOW DID IT ALL WORK OUT?

Page 51: Fiat eco:Drive

HOW DID IT ALL WORK OUT?

Page 52: Fiat eco:Drive

HOW DID IT ALL WORK OUT?

Page 53: Fiat eco:Drive

HOW DID IT ALL WORK OUT?

Page 54: Fiat eco:Drive

HERE’S HOW WE ENDED UP SEEING IT…

Page 55: Fiat eco:Drive

THE MOST TRICKY PART…

Page 56: Fiat eco:Drive

...GETTING THE DESIGN WORKFLOW RIGHT

ENSURE THAT USER EXPERIENCE TALKS TO CREATIVE DEVELOPMENT

Page 57: Fiat eco:Drive

IN AN IDEAL WORLD, USER EXPERIENCE WOULD SUPPLY DESIGNERS WITH ANIMATED WIREFRAMES

ENSURE THAT USER EXPERIENCE TALKS TO CREATIVE DEVELOPMENT

...GETTING THE DESIGN WORKFLOW RIGHT

Page 58: Fiat eco:Drive

IN AN IDEAL WORLD, USER EXPERIENCE WOULD SUPPLY DESIGNERS WITH ANIMATED WIREFRAMES

EVERYONE SHOULD SIT IN THE SAME ROOM

ENSURE THAT USER EXPERIENCE TALKS TO CREATIVE DEVELOPMENT

GETTING THE DESIGN WORKFLOW RIGHT...

Page 59: Fiat eco:Drive

...AND KEEPING THE QUALITY HIGH

Page 60: Fiat eco:Drive

...AND KEEPING THE QUALITY HIGH

UNIT TESTS USING FLEXUNIT AND FLEXCOVER

Page 61: Fiat eco:Drive

...AND KEEPING THE QUALITY HIGH

Page 62: Fiat eco:Drive

UNIT TESTS USING FLEXUNIT AND FLEXCOVER

...AND KEEPING THE QUALITY HIGH

Page 63: Fiat eco:Drive

PROOF OF CONCEPTS

UNIT TESTS USING FLEXUNIT AND FLEXCOVER

...AND KEEPING THE QUALITY HIGH

Page 64: Fiat eco:Drive

...AND KEEPING THE QUALITY HIGH

Page 65: Fiat eco:Drive

UNIT TESTS USING FLEXUNIT AND FLEXCOVER

...AND KEEPING THE QUALITY HIGH

Page 66: Fiat eco:Drive

PROOF OF CONCEPTS

UNIT TESTS USING FLEXUNIT AND FLEXCOVER

...AND KEEPING THE QUALITY HIGH

Page 67: Fiat eco:Drive

PROOF OF CONCEPTS

CONTINUOUS INTEGRATION USING CRUISECONTROL.NET

UNIT TESTS USING FLEXUNIT AND FLEXCOVER

...AND KEEPING THE QUALITY HIGH

Page 68: Fiat eco:Drive

...AND KEEPING THE QUALITY HIGH

Page 69: Fiat eco:Drive

UNIT TESTS USING FLEXUNIT AND FLEXCOVER

...AND KEEPING THE QUALITY HIGH

Page 70: Fiat eco:Drive

PROOF OF CONCEPTS

UNIT TESTS USING FLEXUNIT AND FLEXCOVER

...AND KEEPING THE QUALITY HIGH

Page 71: Fiat eco:Drive

PROOF OF CONCEPTS

CONTINUOUS INTEGRATION USING CRUISECONTROL.NET

UNIT TESTS USING FLEXUNIT AND FLEXCOVER

...AND KEEPING THE QUALITY HIGH

Page 72: Fiat eco:Drive

PROOF OF CONCEPTS

CONTINUOUS INTEGRATION USING CRUISECONTROL.NET

PEER REVIEW ON EVERY CHECK-IN

UNIT TESTS USING FLEXUNIT AND FLEXCOVER

...AND KEEPING THE QUALITY HIGH

Page 73: Fiat eco:Drive

LINKS AND Q&A

http://www.fiat.co.uk/ecoDrive - eco:Drive home page

http://code.google.com/p/as3localelib/ - Locale Library

http://thanksmister.com/?p=92 – Detecting Local Drives with Adobe AIR

http://is.gd/7RcW - Article about Usability, Interactivity in Agile Processes

My blog: http://www.pixelpod.co.uk

THANK YOU