This stage focuses on translating the selected micro-interactions into functional interface elements. The aim here is to move from conceptual ideas into working prototypes, testing how motion, timing, and visual style perform within a realistic interface.
The interface itself was developed in Figma, informed by early research into existing investment platforms such as Trading212 and Invest Engine. These platforms demonstrated a clear and functional approach to presenting financial data, which helped guide the overall layout and interaction patterns used here.
Based on competitor analysis, the interface was designed to prioritise clarity and familiarity. Investment platforms often rely on dense information, so adopting established UI patterns helps reduce friction and improves usability.
Rather than reinventing core structures, the focus was placed on integrating micro-interactions into a layout that already feels intuitive. This allowed more attention to be given to how motion enhances the experience, rather than how users learn the interface itself.
The loading interaction was developed using Unicorn Studio, allowing the brand’s tortoise mark to be rendered as a 3D object. This was a deliberate step outside of standard tools used within the course, enabling a more experimental approach to motion and form.
The tortoise rotates on its Y axis, similar to a coin spinning in space. This creates a sense of physicality and weight, reinforcing the brand identity in a way that a flat animation would not achieve.
From a functional perspective, the continuous rotation works effectively as a looping loading state. It provides enough visual interest to hold attention during short wait times, while remaining subtle enough not to feel distracting.
The rotation was set to a continuous loop of approximately 1.2–1.5 seconds per full rotation, using a linear easing to avoid visible acceleration points that could feel unnatural in a looping state.
Early iterations experimented with slower rotations, however these felt unresponsive and increased perceived waiting time. Increasing the speed improved responsiveness without becoming distracting.
To support accessibility, this animation could be replaced with a static logo or subtle opacity pulse when reduced motion is enabled, ensuring the loading state is still communicated without continuous movement.
Screen Recording 2026-05-05 at 16.50.56.mov