Athena

Home loan website boldly reimagines how we interact online with WebGL.

When home loan company Athena launched on the web, they wanted to do something radical. To bring that dream to life, we created a brand launch website that reimagined how we interact with brands online. In one of the first brand-oriented implementations of cross-device WebGL website design, the site used bold metaphors, abstract illustrations and scroll-based animations to give users control as they uncovered, step by step, what their journey with Athena could be.

Visit the website
Athena website banner.

Breaking the rules

Concept Site

Athena is a home loan company committed to shaking things up. They’re radically changing how we think about mortgages. And when they launched their first website, they wanted to dramatically rethink how we interact with brands online. That’s where we came in.

The brand launch website we created with them was unconventional to say the least. Forget what you think a website should be, and come on a journey to discover what it could be

Blank Athena image.

Bold metaphors

Storytelling

Throughout the Athena brand launch website, content was delivered through a radically different approach: interactive story. Bold visual metaphors gave a visceral experience of the more abstract concepts – like savings, lifestyle and speed – they aimed to convey. Meanwhile, the supporting written content was delivered in small, manageable chunks. Revealed only when necessary, this style of copy encouraged users to explore and uncover the underlying story for themselves.

Lightweight WebGL

WebGL

The minimal design style of the Athena website was largely driven not only by the story being told, but also by the technology bringing that story to life. Creating the simple, three-dimensional illustrations entirely with WebGL resulted in an incredibly lightweight website able to run quickly and smoothly across browsers and devices.

Screenshot of the bold, geometric ‘A’ logo on the Athena Home Loans brand launch website.

While creating a story-driven WebGL experience for a branded website was an unusual decision, it’s this innovative technology that helps bring Athena’s brand proposition to life throughout the website itself. Just as Athena is redefining what customers can expect from a home loan company, it's website reimagined how we interact with brands in the digital space.

Screenshot of four message boxes in the bold, abstract style of the Athena WebGL website design.

Subtle movements

Animations

While much of the movement on the site is mapped to the user’s scroll, the site also features a number of subtle animations that serve to enhance the emotion of the illustrations. These subtle, automatic movements gave life to the bold, modern aesthetic, adding a warmth and intimacy that made the WebGL website a little more human.

These subtle animations inspired a curiosity and intrigue that led audiences seamlessly from one scene to the next, creating a website design that reflected not just the brand’s words but its underlying mission and values.

An unconventional approach

Site Launch

At its core, the Athena brand launch website aimed to be a digital manifestation of the brand’s game-changer personality. In a marked departure from the formulaic nature of most financial websites, the site clearly separated the brand from its competitors, underscoring its commitment to being a driving force of change throughout the home loan industry.

Athena Home Loans website user experience design.

Stay in the loop

Subscribe to our newsletter to receive updates and insights about Athena and other S1T2 projects.

Welcome to the party