Client: ÖBB
Type: Motion GFX
Program(s): Adobe AfterEffects, Lottie
For the launch of ÖBB's redesigned ticketshop we were tasked with creating the intro animation / wizard for their mobile phone applications. These were to be made as a Lottie animation which would be pushed to ÖBB's native apps on iOS and android.
Working closely with the ÖBB design team, we produced storyboards showing our concept and then produced the animations using Aftereffects and exported out using Lottie plugin.
In the first animation for the wizard, everything appears on the stage in a dynamic sequence. The scenery pops in (the Prater ferris wheel representing Vienna) like a pop-up book, while the rails and road are drawn in. The train enters the scene first, prompting the tickets to fly in and subtly scatter. Meanwhile, the tram and the bus slowly drive into scene, completing the animated setup.
As the user swipes to the next step of the wizard, a pocket transitions onto the screen, and a mobile phone slides out of it. Speech bubbles on the phone indicate the times when the train and bus will arrive, while the status bar displays the journey’s progress.
In the third step of the wizard, the favorites functionality of the journey planner is highlighted by having the user tap on a heart icon. The subsequent screen displays various journey options, showcasing the different modes of transport available to the commuter, all conveniently accessible in the palm of their hand.
In the final stage of the wizard, the tickets fly in organically and slam on the brakes comically upon reaching the device screen. The simplified UI highlights that ÖBB customers can buy tickets through the app. A pulsating user icon indicates the benefits available from the app: discounts, cards, and gifts. The final screen then loops to reinforce the message.
The intro screen lent itself well to looping animations and was used as the app’s loading screen. The movement of clouds, bushes, trees, tracks, and road stripes effectively conveyed the landscape’s motion. The subtle movements and bumps of the vehicles added a realistic touch, portraying them as moving without them actually moving.