A flexible design system for Europe's biggest lender

The European Investment Bank

The European Investment Bank (EIB) is the lending arm for the European Union. It is the biggest multilateral financial institution in the world and one of the largest providers of climate finance. Since its establishment, they’ve invested over 1 Trillion euros in projects that tackle climate change, sustainability and innovation.

The Challenge

The EIB approached us looking for a digital partner who could help them enhance their existing website. After a visual identity update, they were keen to update their homepage and navigation, improve the quality of the codebase and their development processes.

The site is big, and with over 30,000 pages of vital content, they needed a team of experts that could quickly understand the current set-up, and take a leading role in enhancing their site while ensuring that all work was maintainable and future-proof. With an internal development team and an external design agency already working on the project, we needed to work in a truly collaborative way.

The Solution

We initially worked with the EIB on a consultative basis, providing training and guidance to the design and development teams based in Luxembourg. This provided a solid grounding for us to develop the digital design, lead enhancements to the website and improve ways of working.

Collaborative approach

Within the design phase, The EIB needed us to work closely with another design agency to understand the creative process and decision making which led to the new visual identity. They aimed to modernise the look and feel of The EIB, showcasing the future thinking organisation they are. By taking the time upfront to question and listen to the team’s challenges and needs we were able to ensure that the visual identity evolved to work beautifully in a newly designed homepage, across additional components and established the grid system and vertical spacing rules. This approach was not only carried through the way we worked with The EIB and the other design agency but in the tools, we used too. A cross-company Slack channel enabled quick and informal voice and text conversations, resulting in faster problem-solving. Using Figma for design enabled the whole project team, with members distributed around Europe, to collaborate in real-time and experiment as though co-located. For Project Management, we implemented Asana as the central hub for defining and prioritising work.

Design system

Due to the size of the site, there was a huge variety of content types and communication requirements. Focusing on individual components rather than page templates providing flexibility and consistency across the site. When designing each new component we had to ensure that it worked both well in isolation, but also harmoniously in combination with any of the other components. Careful consideration was given to the size, spacing and prominence of each element to ensure a clear hierarchy for the user. This made reading detailed and often technical information a delight.

The whole project team used Figma, a collaborative, cross-platform tool that works online. It gave everyone access to the shared library to ensure the principles were followed throughout the project. It is home to the new Design System as a living document, accessible to designers, developers and content editors as and when needed.

Homepage and navigation UI

The user experience was the most important factor in designing the homepage and menu, with so many content pages it was imperative that users could easily find the information they were looking for, not getting lost in the volume. We were tasked with creating an immersive menu with a strong visual hierarchy. It needed to enable easy content discovery whilst providing the user with an awareness of depth. We designed each level of the navigation to appear only when selected and added subtle rollover animations to enhance the experience. By using clear iconography to showcase additional levels we encouraged the user to dive deeper into the navigation. Additional paired back, subtitles were designed to provide context but not detract from the clickable elements. Overall the navigation was designed to provide a clean, smooth and considered experience.

Agile delivery of a new front-end development framework

To develop new components for a live site it was necessary to adopt an iterative approach. Newly designed reusable components were built, tested and introduced in sprints. This made it manageable for everyone involved and meant that all future pages were consistent in UI, design and code, making each subsequent page much quicker to implement. In addition to building new pages with these components, the EIB team will be able to easily convert existing pages into a new style. This new framework gives the whole team a common language for all modules and components. Providing further efficiencies and the ability to scale the site with new content as they continue to roll out the new framework.

DevOps workflow

To future-proof the quality of the site, we introduced a new Git workflow. This included a tight QA process where all code would be automatically checked against a set of rules and standards for better accountability and governance. The process also ensured any new work was reviewed and approved by another team member before being added to the site. This ensured the main codebase was always consistent and stable and also enabled any of the development team, internally or externally, to work on the project concurrently in a safe manner.