Nexa Flow Motion Experience
Creating an immersive, motion-first web application interface for Nexa Flow to enhance user retention and engagement.
Services
Key Results
+55%
User Retention
< 0.8s
Page Load Speed
The Challenge
Nexa Flow’s dashboard was highly functional but struggled with low user retention. Users felt overwhelmed by the sheer volume of data, leading to high drop-offs within the first week of onboarding.
Strategy & Vision
We introduced micro-animations and scroll-linked UI stories to break complex workflows into manageable visual beats. By staggering data displays and utilizing spring-based focus triggers, we guided the user's attention exactly where it was needed.
Design Approach
We built the workspace around a deep Graphite surface combined with Acid Lime accents, providing a crisp 14:1 contrast ratio for metrics. Every animation was designed with performance in mind, targeting only CSS transforms and opacity.
Engineering & Implementation
We built the interface in Astro, utilizing client-side scripts to run animations smoothly. All heavy layouts degrade gracefully to static structures on mobile devices or when users select the prefers-reduced-motion setting.
The Outcome
After deploying the new experience, Nexa Flow reported a substantial increase in first-week user retention and a reduction in support tickets related to dashboard onboarding.
Designing for Interaction
Nexa Flow is a software provider in the automation space. When managing automated flows, users need to keep track of multiple variables simultaneously. The challenge wasn’t just to display the data, but to structure the experience.
Micro-Interactions in Action
We believe animation is functional, not decorative. Here is how we restructured their primary dashboard:
- Staggered Loading: Dashboard widgets fade and slide up sequentially (max 5 items, 0.08s stagger delay) to prevent visual cognitive overload.
- Spring-based Focus: When a task completes, the corresponding badge scale increases with a gentle spring animation, giving immediate, positive feedback.
- Contrast Discipline: Metrics are highlighted in Acid Lime, ensuring perfect accessibility against the dark Graphite surface.
The interactive layers created by Noel turned our complex interface into a delightful, intuitive product. Retention metrics speak for themselves.David Chen Head of Product, Nexa Flow