ADIA Website

When we were asked, alongside over 20 global agencies, to pitch for the new ADIA website, we decided to take a risk. Instead of selling the finished product, we sold our process. We focused on opportunities, rather than designs, holding true to our belief that the best solution would have to be built together, through collaboration and iteration. It was an approach unlike any of the other agencies, and it paid off.

Together we embarked upon a journey to craft an online embodiment of the ADIA brand…

While our initial ideas for the ADIA website had been fresh, modern and very much in line with current website trends, after Discovery we knew a different approach was needed. The challenge we set ourselves was to redesign the ADIA brand in a way that was both timeless and relevant. This balancing act took many iterations to get right, but was really the only choice when it came to properly representing a company that is a living legacy of its people.

Drawing on ADIA’s history and the cultural context of Abu Dhabi, we set out to craft an art direction that echoed tradition with a modern twist. The result was a design system that balances bold innovation with understated elegance. It communicated not only the rich history of ADIA, but the dynamism and creativity of its evolution. And it provided the flexibility to live up to these ideas in that it can be iterated upon and improved over time as technology evolves.

The next step was to explore potential solutions that pushed the boundaries of what’s possible. Grounded in a deep understanding of the problem space, we challenged ourselves to find new and interesting ways to communicate experientially online. Taking Arabic geometry as a base, we created a series of experiments exploring how we could use emerging technology to bring that style to life, all while encouraging meaningful engagement and interaction from audiences.

The next step was to explore potential solutions that pushed the boundaries of what’s possible. Grounded in a deep understanding of the problem space, we challenged ourselves to find new and interesting ways to communicate experientially online. Taking Arabic geometry as a base, we created a series of experiments exploring how we could use emerging technology to bring that style to life, all while encouraging meaningful engagement and interaction from audiences.

We continued this kind of iterative process into development. We started by creating broad web-based prototypes early on in the process to test the technical feasibility, fidelity and creative strength of our ideas. This was then backed up by a development process broken into iterative cycles that allowed for periodic review and improvements for technical performance, user interface and information architecture.

The animation of geometric backgrounds across the ADIA website is crucial to capturing the brand’s elegance and wisdom. The graceful tempo and bespoke colour variations revealed through these animations not only complement the content but lead the user’s eye through the page. Here, motion reveals the intricacy of the geometric compositions, as light and shadow bring the essence of the ADIA brand to life through the very fabric of the site.

When it came to content structure, our goal was to build a cohesive narrative throughout the website; to tell the story of ADIA in a way that was both accessible and insightful. At a structural level, this meant fewer, more concise pages. Top level pages were used to highlight ADIA’s core offering, while subsequent pages were only added where necessary. At a content level, this meant refining the message; reducing copy to short, deliberate paragraphs and pairing these with carefully considered imagery.

The breadth of information of ADIA’s diverse portfolio provided a unique opportunity to position the organisation as an industry-leading source of knowledge for stakeholders. Our initial experiments explored how we could use geometry to tell the story of data, or making graphs that emerged from the background. While this approach was beautiful, it did hinder the navigation of information and the apparent accuracy of the data.

Instead, we decided on a more modern, precise approach based on three core principles. The first was centred on the beauty of data. We worked with ADIA to find intelligent patterns that would make beautiful yet meaningful graphics. Our second principle was that information should be clear, using thin lines and sharp points to ensure ease of consumption. Finally, we wanted our graphics to be descriptive. Here, we used bold, contrasting colours to focus the user’s attention on important details and insights.

For us, the work doesn’t end on project launch. We’re committed to learning in everything we do. And that means taking the time to reflect on where we’ve come from, and reassess where we’re going. In addition to general maintenance of the ADIA website, we built in a number of data and analysis mechanisms that would allow us to iterate on and expand the site based on user behaviour. This included monthly reports with UX and UI recommendations, as well as website performance metrics across browsers and devices to ensure that the experience functions as intended.