Athena

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

An early iteration of the website design as we experimented with different brand colours.

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

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…

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.

We had a lot of sketches like these early on brainstorming the different ways that we could tell the Athena story through metaphors and interaction.

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.

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.

Three-dimensional scroll

Navigation + Scroll

Moving away from conventional website layouts, the WebGL website design we used for Athena considered navigation as a distinct and potentially meaningful experience for the user. While screens might be two-dimensional, the Athena brand launch site suggested that websites themselves don’t have to be. Throughout the website, users were encouraged to explore what it might be like to scroll into rather than down, and what adding a new dimension to the digital world could do.

Stepping away from a traditional website design in favour of more user-oriented navigation, the site gave control back to users to create a surprising and enjoyable experience. This choice also encouraged a more personal relationship with the brand, as users were given the chance to explore and uncover for themselves an experience of what Athena is, and what their relationship with the brand could be.

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.