Up Bank
Up Bank is an innovative Australian digital bank known for its user-friendly mobile banking experience and a vibrant, tech-forward approach to personal finance. With a focus on educating users on personal finance, Up Bank has built a strong reputation for making banking engaging and intuitive.
Up Bank approached us to redesign the main homepage of their marketing website, aiming to create a more immersive and interactive experience that reflects their brand’s energy and innovation. They wanted to push the boundaries of web design by integrating cutting-edge animations, 3D interactions, and real-time data visualisation to engage visitors and showcase their unique banking features.
The challenge was to develop a high-performance website that could handle complex animations and real-time data visualisations while maintaining smooth interactions across devices. Our goal was to blend technology and design seamlessly, creating an experience that captivates users from the moment they land on the page.
We developed an interactive 3D mobile phone model using Blender and Three.js to bring Up Bank’s digital experience to life. The phone responds to touch and mouse movement, featuring inertia-based rotation and flipping, where faster swipes result in multiple flips. To enhance realism, we implemented low-poly modeling, compression techniques, and optimised shaders to maintain performance.
The phone was given a levitating appearance, subtly moving up and down, and tapping it triggers animations like lightning strikes and a shaking Up logo triangle. A dynamic lightning animation, powered by React Motion, extends vertically during page load or scroll, enhancing the interactive visual experience.
The 3D globe dynamically showcases real-time Up purchase data, auto-rotating to transaction locations with a shockwave effect to highlight activity. Users can interact with the globe by dragging to rotate and zooming in on key locations, with inertia-based motion ensuring smooth transitions. Clicking on a country reveals transaction insights, while the auto-rotate feature keeps engagement fluid. The globe is rendered with custom materials and shaders to ensure a visually compelling, high-performant experience.
To support "real-time" data visualisation, we integrated a system that extracts and displays Up Bank transaction data through dynamic graphs and a ticker style format. Transactions appear as they happen, linked to their geographic locations on the globe. This data-driven design provides users with insights into how and where Up customers are spending, reinforcing the bank’s global presence and digital-first approach.
On the better with mates section, we implemented a cursor trail effect that follows the user’s movements with a gooey, fluid-like animation. On desktop, the entire illustration orients toward the user's cursor, making interactions feel more responsive and intuitive. On mobile, the effect adapts to touch-based dragging, ensuring a seamless user experience across devices.
Using Rive, we created an animated brand character with micro-interactions that enhance user engagement. A pulsating gradient effect activates when users hover over the character, while multi-layered parallax clouds create depth by moving dynamically in response to cursor and touch inputs. The character’s hands and arms subtly react to cursor movement, even pointing toward key UI elements, adding a playful and interactive layer to the design.
The redesigned Up Bank homepage successfully transformed the user experience into an interactive and visually dynamic journey. The seamless integration of real-time data, 3D interactions, and engaging animations significantly improved user engagement and time spent on the page. By combining advanced web technologies with creative design, we delivered a homepage that not only aligns with Up Bank’s innovative brand identity but also sets a new standard for digital banking experiences.
"MASSIVE thank you to everyone at Woolly who have gone above and beyond, helping us build the new Up site. You’re all incredibly patient, understanding and talented. We’re so lucky to have you."
