3D Interaction Prototyping
Introduction
Login screens are often the most transactional and 'cold' part of any product experience. To explore ways of humanizing this touchpoint, I prototyped a 3D 'Whack-a-Mole' game designed for the Google Fiber mobile login flow.
My goal was to test the feasibility of integrating high-fidelity, interactive 3D assets into our mobile interface. By using Spline to model 3D characters and build game logic, I sought to transform a mundane security step into an engaging, delightful moment that could potentially increase user interaction and brand warmth. This project also served as a broader exploration of how 3D interactivity can elevate our existing brand identity.
Process
Technical Prototyping
I modeled the characters and utilized Spline’s interaction engine to map the game logic. By customizing existing interactive frameworks and adapting them to fit my custom-built 3D world, I was able to rapidly prototype a high-fidelity experience that functioned as a true-to-life interactive demo. This allowed me to focus on brand alignment, and character design in tight deadline.
Exploring Feasibility
While our current mobile tech stack is optimized for performance, this prototype provided a critical "proof of concept" regarding 3D asset weight and interaction latency. It challenged our team to rethink the limits of our mobile interfaces and paved the way for future discussions regarding how we might integrate interactive, performance-conscious 3D elements.
Extending the Visual Language
Beyond the primary prototype, I utilized Spline as a 'sandbox' to experiment with 3D applications of the Google Fiber brand. These explorations allow me to rapidly test new visual styles, lighting environments, and icon systems that could eventually be integrated into our design system.
Conclusion
While this prototype is currently in the design-discovery phase, it demonstrated that 3D interaction is a viable path for increasing user delight and successfully pushed the boundaries of our internal design discussions regarding mobile interactivity. Projects like this are essential for identifying the gap between our current tech stack and our future design ambitions.
