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

1. Rick Williams
22nd January 2009

2. BEFORE WE GET DOWN TO BUSINESS…

3. 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.

5. WHAT WAS OUR BRIEF FROM FIAT?
BUILD A PRODUCT THAT HELPS IMPROVE YOUR DRIVING
USING TELEMATIC DATA COLLECTED FROM THE CAR

6. WHY IS ECO:DRIVE “SOPHISTICATED”?
THE CHALLENGES
CONNECTING YOUR DRIVING DATA CAN BE LARGE AMOUNTS OF
CAR TO YOUR CONFUSING DATA, ONCE PER
COMPUTER IS A NEW SECOND OF EVERY
CONCEPT TO MOST JOURNEY

7. WHY IS ECO:DRIVE “SOPHISTICATED”?
THE CHALLENGES
CONNECTING YOUR DRIVING DATA CAN BE LARGE AMOUNTS OF
CAR TO YOUR CONFUSING DATA, ONCE PER
COMPUTER IS A NEW SECOND OF EVERY
CONCEPT TO MOST JOURNEY
YET THE SOLUTION HAD TO BE
INTUITIVE EASY TO USE RESPONSIVE

8. A LITTLE BIT MORE DETAIL…
BUILT USING ADOBE AIR 1.1 AND FLEX

9. A LITTLE BIT MORE DETAIL…
BUILT USING ADOBE AIR 1.1 AND FLEX
BUILT IN 4 MONTHS BY A DEVELOPMENT TEAM OF 5

10. A LITTLE BIT MORE DETAIL…
BUILT USING ADOBE AIR 1.1 AND FLEX
BUILT IN 4 MONTHS BY A DEVELOPMENT TEAM OF 5
CREATED USING FLEXBUILDER 3 PROFESSIONAL EDITION

11. A LITTLE BIT MORE DETAIL…
BUILT USING ADOBE AIR 1.1 AND FLEX
BUILT IN 4 MONTHS BY A DEVELOPMENT TEAM OF 5
CREATED USING FLEXBUILDER 3 PROFESSIONAL EDITION
LAUNCHED IN 3 LANGUAGES, SOON TO BE 5

12. WHY ADOBE AIR?
CROSS PLATFORM

13. WHY ADOBE AIR?
CROSS PLATFORM
SMOOTH INSTALL OF THE FRAMEWORK AND APPLICATION

14. WHY ADOBE AIR?
CROSS PLATFORM
SMOOTH INSTALL OF THE FRAMEWORK AND APPLICATION
EASY AUTO-UPDATE FUNCTIONALITY

15. WHY ADOBE AIR?
CROSS PLATFORM
SMOOTH INSTALL OF THE FRAMEWORK AND APPLICATION
EASY AUTO-UPDATE FUNCTIONALITY
INTERGRATED SQLITE DB

16. WHAT ARE WE TALKING ABOUT
THE TEAMS AND THE WORKFLOW

17. WHAT ARE WE TALKING ABOUT
THE TEAMS AND THE WORKFLOW
KEEPING QUALITY HIGH

18. WHAT ARE WE TALKING ABOUT
THE TEAMS AND THE WORKFLOW
KEEPING QUALITY HIGH
GETTING UNDER THE COVERS OF ECO:DRIVE

19. WHAT AM I GOING TO TALK ABOUT
THE TEAMS AND THE WORKFLOW
KEEPING QUALITY HIGH
GETTING UNDER THE COVERS OF ECO:DRIVE
OUR TOP TIPS AND LESSONS LEARNT

20. FEATURES DEMO

21. WHAT DOES ECO:DRIVE
LOOK LIKE INSIDE?

22. THE MANDATORY BLOCK DIAGRAM

23. THE MANDATORY BLOCK DIAGRAM
USB KEY

24. THE MANDATORY BLOCK DIAGRAM
HTTP ECO:INDEX
WEB SERVICE
USB KEY HTTP COMMUNITY
WEB SERVICE
HTTP FUEL PRICE
WEB SERVICE

25. UPDATE DEMO

26. IMPORTING DATA: STEP BY STEP
EACH CAR ON THE USB KEY IS MATCHED TO A CAR IN
THE DESKTOP APPLICATION

27. IMPORTING DATA: STEP BY STEP
EACH CAR ON THE USB KEY IS MATCHED TO A CAR IN
THE DESKTOP APPLICATION
FIRST 50% OF THE PROGRESS BAR: PARSING DATA INTO MEMORY

28. IMPORTING DATA: STEP BY STEP
EACH CAR ON THE USB KEY IS MATCHED TO A CAR IN
THE DESKTOP APPLICATION
FIRST 50% OF THE PROGRESS BAR: PARSING DATA INTO MEMORY
SECOND 50%: SAVING THAT DATA TO THE DATABASE

29. IMPORTING DATA: STEP BY STEP
EACH CAR ON THE USB KEY IS MATCHED TO A CAR IN
THE DESKTOP APPLICATION
FIRST 50% OF THE PROGRESS BAR: PARSING DATA INTO MEMORY
SECOND 50%: SAVING THAT DATA TO THE DATABASE
EACH JOURNEY IS SUBMITTED TO THE ECO:INDEX WEB SERVICE

30. IMPORTING DATA: STEP BY STEP
EACH CAR ON THE USB KEY IS MATCHED TO A CAR IN
THE DESKTOP APPLICATION
FIRST 50% OF THE PROGRESS BAR: PARSING DATA INTO MEMORY
SECOND 50%: SAVING THAT DATA TO THE DATABASE
EACH JOURNEY IS SUBMITTED TO THE ECO:INDEX WEB SERVICE
UPDATE THE DATABASE AND THE USER INTERFACE

31. IMPORTING DATA: PARSING
EASE OF PARSING WAS NOT THE FIRST PRIORITY
LIMITED SPACE AVAILABLE IN BLUE & ME COMPUTER
MORE COMPUTING POWER AVAILABLE ON THE DESKTOP
THAN IN THE CAR
DATA IS STORED IN A TIGHTLY PACKED BIT ARRAY
NO BITARRAY IN ACTIONSCRIPT 3

32. IMPORTING DATA: PARSING
SEVERAL ITERATIONS OF THE PARSING CODE
FIRST WAS FUNCTIONAL, BUT SLOW
ONCE UI WAS COMPLETED, WE RUTHLESSLY OPTIMISED

33. IMPORTING DATA: WRITING DATA TO THE DATABASE
THERE WERE TWO MAJOR REQUIREMENTS
IMPORT HAD TO BE HIGHLY USER INTERFACE HAD TO REMAIN
PERFORMANT SMOOTH AND RESPONSIVE

34. IMPORTING DATA: WRITING DATA TO THE DATABASE
THERE WERE TWO MAJOR REQUIREMENTS
IMPORT HAD TO BE HIGHLY USER INTERFACE HAD TO REMAIN
PERFORMANT SMOOTH AND RESPONSIVE
THERE WERE TWO PROBLEMS
USING A TIMER WAS NOT USER “FOR” LOOPS MEANT AN
FAST ENOUGH UNRESPONSIVE APPLICATION

35. IMPORTING DATA: WRITING DATA TO THE DATABASE
THERE WERE TWO MAJOR REQUIREMENTS
IMPORT HAD TO BE HIGHLY USER INTERFACE HAD TO REMAIN
PERFORMANT SMOOTH AND RESPONSIVE
THERE WERE TWO PROBLEMS
USING A TIMER WAS NOT USER “FOR” LOOPS MEANT AN
FAST ENOUGH UNRESPONSIVE APPLICATION
THE SOLUTION?
THE “ASYNC CHUNKER MONKEY”

36. IMPORTING DATA: THE ASYNC CHUNKER WHAT?
USING SYNCHRONOUS “FOR” LOOP TO PROCESS
EACH ITEM IN AN ARRAY

37. IMPORTING DATA: THE ASYNC CHUNKER WHAT?
USING SYNCHRONOUS “FOR” LOOP TO PROCESS
EACH ITEM IN AN ARRAY
USING A TIMER

38. IMPORTING DATA: THE ASYNC CHUNKER WHAT?
USING SYNCHRONOUS “FOR” LOOP TO PROCESS
EACH ITEM IN AN ARRAY
USING THE ASYNC CHUNKER MONKEY

39. IMPORTING DATA: THE ASYNC CHUNKER WHAT?
USING SYNCHRONOUS “FOR” LOOP TO PROCESS
EACH ITEM IN AN ARRAY
USING THE ASYNC CHUNKER MONKEY
MAX TIME FOR EXECUTION IS SET BY DEVELOPER

40. IMPORTING DATA: THE ASYNC CHUNKER WHAT?
USING SYNCHRONOUS “FOR” LOOP TO PROCESS
EACH ITEM IN AN ARRAY
USING THE ASYNC CHUNKER MONKEY
MAX TIME FOR EXECUTION IS SET BY DEVELOPER

41. DATA VISUALISATION DEMO

42. VISUALISING THE DATA
JOURNEY VIEW – TREND VIEW – ECO:VILLE

43. GRAPHING THE DATA: JOURNEY VIEW
INDIVIDUAL
DATA
SCRUB BAR DYNAMIC
LOADING

44. THE PEOPLE BEHIND THE PRODUCT…

45. HOW DID IT ALL WORK OUT?

46. HOW DID IT ALL WORK OUT?

47. HOW DID IT ALL WORK OUT?

48. HOW DID IT ALL WORK OUT?

49. HOW DID IT ALL WORK OUT?

50. HOW DID IT ALL WORK OUT?

51. HOW DID IT ALL WORK OUT?

52. HOW DID IT ALL WORK OUT?

53. HOW DID IT ALL WORK OUT?

54. HERE’S HOW WE ENDED UP SEEING IT…

55. THE MOST TRICKY PART…

56. ...GETTING THE DESIGN WORKFLOW RIGHT
ENSURE THAT USER EXPERIENCE TALKS TO CREATIVE DEVELOPMENT

57. ...GETTING THE DESIGN WORKFLOW RIGHT
ENSURE THAT USER EXPERIENCE TALKS TO CREATIVE DEVELOPMENT
IN AN IDEAL WORLD, USER EXPERIENCE WOULD SUPPLY DESIGNERS WITH
ANIMATED WIREFRAMES

58. GETTING THE DESIGN WORKFLOW RIGHT...
ENSURE THAT USER EXPERIENCE TALKS TO CREATIVE DEVELOPMENT
IN AN IDEAL WORLD, USER EXPERIENCE WOULD SUPPLY DESIGNERS WITH
ANIMATED WIREFRAMES
EVERYONE SHOULD SIT IN THE SAME ROOM

59. ...AND KEEPING THE QUALITY HIGH

60. ...AND KEEPING THE QUALITY HIGH
UNIT TESTS USING FLEXUNIT AND FLEXCOVER

61. ...AND KEEPING THE QUALITY HIGH

62. ...AND KEEPING THE QUALITY HIGH
UNIT TESTS USING FLEXUNIT AND FLEXCOVER

63. ...AND KEEPING THE QUALITY HIGH
UNIT TESTS USING FLEXUNIT AND FLEXCOVER
PROOF OF CONCEPTS

64. ...AND KEEPING THE QUALITY HIGH

65. ...AND KEEPING THE QUALITY HIGH
UNIT TESTS USING FLEXUNIT AND FLEXCOVER

66. ...AND KEEPING THE QUALITY HIGH
UNIT TESTS USING FLEXUNIT AND FLEXCOVER
PROOF OF CONCEPTS

67. ...AND KEEPING THE QUALITY HIGH
UNIT TESTS USING FLEXUNIT AND FLEXCOVER
PROOF OF CONCEPTS
CONTINUOUS INTEGRATION USING CRUISECONTROL.NET

68. ...AND KEEPING THE QUALITY HIGH

69. ...AND KEEPING THE QUALITY HIGH
UNIT TESTS USING FLEXUNIT AND FLEXCOVER

70. ...AND KEEPING THE QUALITY HIGH
UNIT TESTS USING FLEXUNIT AND FLEXCOVER
PROOF OF CONCEPTS

71. ...AND KEEPING THE QUALITY HIGH
UNIT TESTS USING FLEXUNIT AND FLEXCOVER
PROOF OF CONCEPTS
CONTINUOUS INTEGRATION USING CRUISECONTROL.NET

72. ...AND KEEPING THE QUALITY HIGH
UNIT TESTS USING FLEXUNIT AND FLEXCOVER
PROOF OF CONCEPTS
CONTINUOUS INTEGRATION USING CRUISECONTROL.NET
PEER REVIEW ON EVERY CHECK-IN

73. 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