Für die neue bliro App sollte ein interaktives Voice Assistant Interface entwickelt werden, das den Status des Transkriptionsprozesses in Echtzeit intuitiv und dynamisch abbildet. Ziel war es, über eine responsive 3D-Motion-Szene verschiedene User Interaction States – darunter Standby, Active Transcription und Error Handling – visuell zu vermitteln, ohne die Mobile Performance zu beeinträchtigen. Zusätzlich mussten individuelle Event-Trigger nahtlos in die bestehende React Native Infrastruktur integriert werden, um den Statuswechsel in Echtzeit auszulösen.
Durch die Entwicklung eines maßgeschneiderten 3D-Motion-Systems auf Basis von Spline konnten die verschiedenen Transkriptionsphasen der bliro App visuell und intuitiv dargestellt werden. Eine speziell implementierte Custom Webhook Architecture steuert in Echtzeit den Wechsel zwischen den definierten Interaction States (Standby, Active Transcription, Error Handling) und synchronisiert nahtlos die 3D-Experience mit dem App-Backend. Die Integration in die React Native App wurde durch gezielte Performance-Optimierungen auf hohe Effizienz und kurze Ladezeiten abgestimmt.
Im Rahmen des Website Relaunchs entwickelten wir für bliro eine animierte 3D-Sphere als Teil des neuen visuellen Erscheinungsbilds. Inspiriert von den Themenfeldern KI, Voice Assistance und Transkription, sollte die Sphere Dynamik und Fortschritt symbolisieren. Die Resonanz auf das neue Element war so positiv, dass die Sphere über die Website hinaus zum Markenbestandteil avancierte.
Die Sphere wurde weitergedacht – von einem gestalterischen Highlight hin zu einer funktionalen Komponente im User Interface. Unser Ziel war es, den Transkriptionsprozess durch dynamisches visuelles Feedback direkt in der App intuitiver und transparenter zu gestalten.
Wir konzipierten ein 3D-Motion-System, bei dem die Sphere ihre Darstellung je nach Prozessphase anpasst: ruhiges Schweben im Standby, verstärkte Pulsation während der Transkription und visuelle Veränderung bei Fehlerzuständen. Die Übergänge wurden bewusst fließend und subtil gehalten, um eine natürliche User Experience zu gewährleisten.
Für die Steuerung der 3D-Sphere entwickelten wir eine Webhook-Architektur, die Statusänderungen in der App zuverlässig und in Echtzeit auf die 3D-Sphere überträgt. Während der Implementierung begleiteten wir die technische Anbindung und stellten sicher, dass alle Events korrekt mit der Sphere synchronisiert wurden.
Um die Sphere auch auf mobilen Endgeräten performant darzustellen, unterstützten wir mit gezielten Empfehlungen zur Performance-Optimierung: reduzierte Geometrie, optimierte Assets und angepasste Animationskurven für stabile Ladezeiten und hohe Framerates.
Durch die Integration der Sphere als aktives Interface-Element erhielt bliro eine starke, neue Interaktionsebene. Statuswechsel werden klarer wahrgenommen, die Plattform wirkt dynamischer und die Markenwahrnehmung wurde nachhaltig modernisiert.
