Client: ÖBB
Type: Motion GFX
Program(s): Adobe AfterEffects, Lottie
For the launch of ÖBB’s redesigned Ticketshop, we created a motion-led onboarding experience for the mobile application.
Working closely with the design team, the introduction was designed to guide users through the ticket purchasing process using playful transitions, subtle storytelling, and a journey through Vienna itself.
Built in After Effects and exported as Lottie animations for iOS and Android, the sequence combined lightweight performance with rich visual detail.
The experience opens with a moving perspective through Vienna. The traveller arrives beside a pop-up book version of the city as buses, trains and landmarks slowly assemble around them, introducing both the journey and the rhythm of the interface.
As the traveller moves through the experience, the interface begins to physically transform. Tickets fold into shape while transport elements slide into place, reinforcing the feeling of movement and progression.
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.