UI / UX / MOTION DESIGN · REAL-TIME 3D
Workforce App
Give the sales conversation a world to explore. Housing, dining and infrastructure become one connected experience.
Enter the experience.
I introduced the offering with a clear invitation before the 3D scene. I gave people a starting point, then cleared the screen with a 700 ms transition.
Move between solutions.
I organized housing, dining and infrastructure into numbered categories. I tied each selection to camera movement so every choice has a visible destination.
Keep the interface legible.
I used the 3D scene to establish location and a stable detail panel for labels, specifications and photographs. This addresses a design problem shared with in-vehicle displays: a moving scene and information people need to read at a glance.
Make motion explain the change.
I used camera movement to establish location and panels to reveal the information behind each selection. I set timing and easing to give those changes a consistent pace.
| State change | Timing | Easing | Purpose |
|---|---|---|---|
| Start screen → scene | 700 ms | cubic-bezier(0.22, 1, 0.36, 1) | Fade, scale and blur clear the invitation. |
| Solution details expand | 320 ms | cubic-bezier(0.22, 1, 0.36, 1) | Reveal the next choices within the selected category. |
| Area information opens | 320 ms | cubic-bezier(0.22, 1, 0.36, 1) | Fade, slide and scale bring detail into view. |
| Area selection → camera focus | Adaptive; 0.6 s smoothing | Damped camera movement | Connect a UI selection to its position in the scene. |
Values from the shipped app. Camera movement uses adaptive damping rather than a fixed duration.
Why I built it.
The RK sales team relied on photographs and verbal explanations to present workforce housing, dining and infrastructure. That made the combined offering harder to show in one conversation.
I designed and built a real-time 3D sales platform for the RK sales team and their clients. They can explore the services together, move into individual areas and read the information in context.
Built with React Three Fiber and Three.js, using GLB models.
The result.
The RK sales team uses the app with prospective clients. Clients understand the offering more clearly, with a shared visual reference for the conversation.
Explore the live app →