ET Money — New App Onboarding with Rive & SwiftUI

ET Money's onboarding had a drop-off problem — static screens that felt transactional, not inviting. In parallel, core actions like invest and goal-lock needed motion that communicated trust. I redesigned onboarding and a set of in-app microinteractions with Rive, integrated through SwiftUI.

Onboarding

Instead of decorative illustrations, I used Rive so each step responds to input. When you enter your name, the greeting animates. When you set a goal, the visual reflects it. Every animation is input-driven, not auto-playing — motion feels like a response, not a video beside the form.

SwiftUI integration — Rive's iOS runtime bound state machine inputs to @State, so animation and forms shared one source of truth. Onboarding completion went up 47%; time-to-value dropped as the flow felt guided rather than administrative.

Microinteractions

In fintech, the transition communicates reliability. Each interaction is a self-contained Rive component — idle, active, success, error — so the app sets an input and the animation resolves itself.

Button confirmations — the invest control morphs into a checkmark with a slight bounce (~400ms), removing the need for a separate confirmation screen.

Toggle locks — locking a savings goal clicks into place with a snap that communicates permanence.

Pull-to-refresh — the indicator ties into Rive listeners so animation speed matches gesture velocity.

Tools

Rive — state machines for onboarding steps and gesture-driven feedback
SwiftUI — native forms, navigation, state management
Figma — wireframes, specs, and component documentation