Interaction design with Rive and Flutter by Ergosign

FichtelApp animations for the big screen

After the huge success of the FichtelApp, our app is now making the leap to the big screen, specifically on 8 digital kiosks that will be found in the Wunsiedel district starting at the end of 2024. The special feature of these kiosks is that they are interactive, making them accessible for everyone to use.

Just like with the app for mobile phones or tablets, a digital Werner invites users to participate. He guides people through the menu of the digital kiosk and helps them navigate the application. Various animations for Werner were designed using Rive, making the experience with the kiosk particularly welcoming.

In this insights article, we want to explain in detail what the animation with Rive is all about and how the implementation with Flutter works.

A spotlight on Werner

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.

A spotlight on Rive 

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.

Rive X Flutter integration

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.

Are you also looking for an app solution that excites customers and stakeholders? Then, a custom-made app with tailor-made animations might be just what you need! Get in touch with us — we look forward to an initial conversation!