EBRD project

The problem

The CMS was outdated and their legacy site was almost a decade old, lacking modern functionality and aesthetics. The overhaul aims to bring the site up to current standards, enhancing user engagement and the brand for a digital world.

The brief and objectives

Modernise the EBRD site look and deliver a design system: Their legacy site was almost a decade old, lacking modern functionality and aesthetics. The overhaul aims to bring the site up to current standards, enhancing user engagement and enhance the brand for a digital world.

User-Centric Design: Prioritise user needs and feedback in the design process. Focus on creating a coherent and straightforward user experience across different departments.

‍Improve Accessibility and Usability: Make the website more accessible to users unfamiliar with the organisation. Simplify language, tone of voice, way finding, information architect and structure, and functionality.

Crafting a new UX, UI and Design System solution:
‍Create a comprehensive framework of components following atomic principles across UI, UX and content that provides a standardised approach to design within EBRD, ensuring consistency, efficiency, and scalability in product development. Encompassing a collection of reusable components, guidelines, principles, and tools that work together to create a cohesive user experience across the EBRD web estate.

Key deliverables of the design system:

Component Library: A set of reusable UI components delivered as a Figma Matrix Mother File (buttons, forms, modals, etc.) Built with consistency and design patterns in mind. The components are designed to be easily integrated into varying applications, ensuring uniformity in design.

‍Style Guide: Detailed documentation with the Matrix outlining visual and functional elements such as colour palettes, typography, spacing, and iconography. The style guide ensures that design elements are used correctly and consistently.

‍Design Tokens: A Figma file of all atomic elements was the final deliverable — with variables that store visual design attributes (colours, fonts, spacing) to maintain consistency and enable quick updates across the entire system, ensuring the the deliverable remains future proof and maintainable.

‍Pattern Library: A repository of design patterns that address common user interface design problems, providing solutions that can be reused across different parts of an application as also design to help understand the components in a wider context.

‍Guidelines and Best Practices: Documentation wireframes and Figma annotations provided instructions on how to use components and patterns effectively, along with principles and standards for accessibility, responsiveness, and user flows.

The design process

01

Discovery phase

The lead UX designer and Senior UX designer undertook the discovery phase. This included; User interviews, stakeholder interviews, landscape analysis and competitor analysis. I had a small amount of time assigned to me for this phase to immerse myself and to conduct my own research around the AEM framework.

02

Wireframing

Wireframing was also undertaken and produced by the UX designers, but I was involved collaborating and discussing the design decisions and structure of the pages.

03

Branding workshops

This is where I entered the project full time and ran multiple workshops for the brand refresh. 3 concepts were produced initially to define the art direction and visual territory. There were 4 rounds of iterations in total.

04

Design system creation

Applying the chosen art direction and creating the unique tokens and elements for the base styles and atoms

05

Component design

Identifying and designing a list of components needed to fit EBRD's needs in the newly designed art direction.

06

Example page designs

This phase was designed in tandem with the component design phase and following the defined wireframes. This is so I could cross check the component designs working with the overall page structure and component cohesion.

07

Component matrix

Detailing each component with; specifications, functionality, behaviours, animation, notes on use cases and options for variations.

The solution

A design system that delivered on all project requirements listed below, a modern fresh look and feel, with UX and accessibility at it's heart.

Brand refresh
Atomic tokenised Design system in Figma
Designed in a component first approach for AEM (Adobe Experience Manager)
Scaleable & Multilingual (Translations for multiple languages)
A big focus on Accessibility (at least AA WCAG standard met)
Light and dark mode
3 responsive states for every component (Desktop, Tablet, Mobile)
New typography set (all fonts multilingual)
New brand colour palette
New art direction - Setting a new visual territory / visual direction for EBRD

Challenges

There were various stakeholders, departments and business units to appease. Because of this we needed to help the main stakeholder deliver expectations and navigate internal challenges.
‍
There was also difficulties managing a 3rd party build partner selected by EBRD. They were not our in-house dev team, and we had to adapt to work around their ways of working and collaboration.

EBRD redesign & Design System

The design process