Ergosign Interaction Design with Rive in Flutter

Werner is essentially the mascot of the Fichtelgebirge — both in reality and in his digital version. This creates a high recognition value, even far beyond the borders of the Fichtelgebirge. People know Werner from the app, promotional films, print, and online media, so it was clear that Werner had to be on the kiosk as well.

He acts as a quick start guide, and after the first interaction with the kiosk, the character goes through various states as he shrinks down, but he never disappears completely. Werner is always available and serves as an anchor point for people who are not very familiar with interacting with a digital screen. This simplifies and makes navigation of the application more welcoming. By using Rive for the animation design, the transitions feel particularly smooth, and the movements appear natural.

Rive is particularly well-suited for animations because it offers endless possibilities for high-detail animations. Additionally, Rive makes the handover to the developers easy. The Rive animation software, like Figma, is primarily a browser application, making it flexible and usable across different devices.

Developers receive a detailed handover with an animation preview, so they can understand exactly how the animation should behave and test it independently. However, design and development work hand in hand with Rive. The design team can do a lot of preparatory work and predefine the states. The development team can initialize the triggers provided by Rive, giving them full control over the animation.

Both tools are regularly used by us, both separately and in combination. Rive animations frequently find their place on our website as well as in client projects, inviting interaction or creating a 'Wow' effect. Flutter, on the other hand, has established itself as an industry standard in app development.

Flutter allows pixel-perfect development with full control over the appearance of elements. The software is based on a single, cross-platform codebase, allowing the application to run on Android, iOS, and, with minimal adjustments, on desktop and web platforms as well.

Both tools are cross-platform by nature. The widget-based architecture of Flutter and the user-friendly APIs of Rive ensure that animations can be integrated into an app quickly and efficiently.