RokkerX

The first phase centred on translating the sports themed brand ambition into a compelling digital framework. I analysed the existing guidelines and identified opportunities to expand them through movement, layered visuals and energetic pacing. I created the interaction model in Figma, building a prototype that paired video backgrounds with smooth transitions to give the site a sense of flow. This included a responsive structure across desktop and mobile that ensured consistency in experience regardless of device.

In parallel, I defined the core components of the UI system. Navigation elements, layout modules and content containers were designed to feel confident and active, echoing the competitive spirit of the sectors RokkerX operates in. A strong emphasis was placed on hierarchy and scannability to support content heavy sections while maintaining the sense of dynamism that shaped the overall direction.

The next phase focused on motion intent. To clearly articulate the depth and energy I envisioned, I created a series of short videos demonstrating transitions, parallax layers and section behaviours. These motion studies allowed for a shared understanding of how the site should feel in action, ensuring the development process could faithfully interpret the animated concepts.

I explored depth by introducing subtle parallax movement that shifted as the user scrolled, giving static sections greater dimensionality. For content dense areas, I designed controlled scrolling features that revealed information progressively, avoiding cognitive overload and maintaining narrative flow. Every animation was crafted to feel purposeful, enhancing usability rather than distracting from it.