Tomas Bumbulevicius's profile
Data Driven Infographic Videos - Trainline
Infographic Trainline Dynamic Videos for
Trip Journeys with After Effects
Diving into unexplored waters always been my main drive. When Trainline made a contact with an abstract concept in mind - I instantly knew that this is going to be exceptional. 

Simply said - we had to find a way to efficiently create hundreds of variable length (based on different designs for specific scenarios), dynamic data driven videos, to visualise train route journeys around Western Europe. When browsing for the routes, users should instantly retrieve infographic videos based on the selected journeys. 

Below you will find out how it was achieved. From initial problem, to solution, through storyboarding and quality inspection. Including tiny pieces of coding - from After Effects expressions to Extendscript scripting.
Concept & Storyboard
Project did not had creative direction to begin with. Client came with the data to be visualised, leaving wide area for creative freedom. The whole concept haven't changed much during the storyboard process - direction was approved initially, leaving only a matter of design questions in place.
Draft Storyboard: V1
Storyboard: V2
Storyboard: V3
Dynamic Data Structures as .csv
Each train route journey consisted of 13 custom data fields. Before I knew the powers and convenience of .jsons, I had chosen .csv as data structure. While it was nothing bad with it in general, there are more efficient ways of working with datas nowadays (as well as WERE, just I haven't paid enough attention to this!).

There is a saying - You live and You learn. This could be applied to knowledge gaps, where you go towards a more complex path just because of not knowing something. Lesson learned! 

Anyways, below is my proposed data set, according to which, client exported all 400+ routes.
.CSV Data Structure Example
Dynamic Design Complexities
Different amount of Train Types available on the route
Trains importance varies from route to another - meaning, users can not expect to have high speed transportation on less busy routes. With architectural and technical aspects in nature, some troubles arose when visualising it through design as well.

The easiest way to solve this would be showing all available trains at once. But as we all know, the easiest outcomes are not always the best, right? My goal was to allow each train its moment of fame, individually.  By pre-rendering each train, dynamically setting their visibility and timings, it helped me to achieve this.
Pre-Rendered Train Type Visuals
Variable facilities on each train type
Every train is different in terms of available facilities. With the planned design, maintaining consistency between different videos was the key. Accordingly, there was some hassles - disregarding what facilities are on board, to keep them animated in the same way and order. With some expressions and a tiny bit of sanity, it was achieved as below. Each icon animation stayed consistently from start to finish. 

For example, if 1st (WC) and 2nd (restaurant) were not available on train, all further icons re-adjust their position, towards the top left, maintaining their animation and timing between each other. This is something I was super happy (for a few moments!) back in the day!
All Facilities Animated
Expressions controlled Checkboxes setup
Not consistent video length based by Train Types
One complex solution implementation raises chances of more complexities along the road. Each train type visualisation affected music and sound effect choices. Four different audio track options for each scenario! 
Quality Inspection
Precisely prepared design guarantees 99% of successful video outputs, when built in a batch. To make really sure about the remaining single percent - it is never a shame to double check things. As long as it is also done in an efficient way.

Videos had 13 dynamically changing areas throughout the whole video length. Accordingly, I pre-rendered few frames for each key scene into separate output videos. This solution enabled to check for any potentially left mismatches in design or data structures. Fortunately, this was just an extra precaution and no major issues were found. 

This allowed to sign-off with 100% assurance. 400+ routes videos for your pleasure (or pain)! There is no need to watch all the videos below from start to finish, unless you are willing to see whether I left some issues intentionally, OR not. There is only one way to find out.
Journey Route Names
At the times when I was not fully aware of sourceRectAtTime() expression and its power, it was partially challenging to set properly sized text boxes. Custom sliders, character limits, scale limits and all other sort of other things just to make sure that Aeroport-Paris-Roissy-Charles-De-Gaulle CDG station title fits as good as Paris alone. The good thing about this - once you learn to do it hard way, nothing can scare you later down the road!
Station Title,  First & Last Train Leave Times
Similarly to the Journey Route Names - the text box was adjusted by the expressions magic. The spells here was not that flawless, but it did the trick. Train leave times rotated from random value to data passed into placeholder from the .csv data. Before the days, when Adobe After Effects natively supported comma separated values import. Which lead to even more magic - both Extendscript and expressions based.
Route Times
Just making sure the day does not exceed twenty four hours limit (we all would love having more of them for ourselves, unfortunately!) and there are no more minutes in an hour as it should be. Pretty easy task for expression to handle.
Trains Per Day
Amazingly, how some routes releases more than hundred of trains per day for the same route. It is every 15 minutes daily, assuming there are no stoppage times in the night time! This was the simplest Slider expression implementation.
Mentions & Thank You Notes
Big Thank You for Kamilė Meidutė for amazing graphic design.
Special Thank You for Ignas Širka for direct and indirect pushes ahead.

Since I loved making this post, chances are high it won't be my last. Thank you all!
Follow me
Data Driven Infographic Videos - Trainline


Data Driven Infographic Videos - Trainline

Dynamic Infographics animated video creation breakdown. From the initial concept, to creative direction establishment. From challenges building d Read More