European Bank for Reconstruction and Development ‘20

EBRD - Case Study on Belov Digital Agency

Gutenberg blocks


WordPress development

Ajax Search Pro plugin


European Bank for Reconstruction and Development Head Office



About The Client

The European Bank for Reconstruction and Development invests in changing lives across three continents by building sustainable and open market economies wherever they work. They also promote equality of opportunity through access to skills and employment, finance and entrepreneurship for women and young people.


UK, London


Building sustainable and open market economies


Economies, Corporate, Investment, Finance


The company needs a set of interrelated subsites to present annual reports for the year 2020.

For this report, we’ve created two subdomains – ar. and sr. for the annual report and sustainability report, respectively.


Additionally to what we always do for the EBRD’s annual report sites, the client required that this time we also do the following:

  1. Change the menu (for both desktop and mobile versions)
  2. Change the search screen
  3. Rearrange the header
  4. Fix the Gutenberg blog bugs that appeared after the WordPress update
  5. Improve the Stories block with cards in terms of both style and functionality
  6. Add a scroll progress bar
  7. Other small tweaks on the site


The company needs a set of interrelated sites to present the annual reports. The project is similar to the ones we’ve done for EBRD in previous years, with some requirements specific to this year’s case.

Our client wished to improve the visual qualities of the interface and the overall clarity of the sites. That involved reviewing all the global elements as well as some blocks on pages.


Home Page - Graph Blocks

The home page has custom Gutenberg blocks for the various information EBRD provides to the site visitors.

The blocks with interactive graphs (bar graphs, pie charts, schemes, etc.) have click and hover behavior and show tooltips for each element. The graphs are also downloadable – each one has a hamburger icon that shows a dropdown menu with download options.

About EBRD

Home Page - About Us Block

This block contains the key information about the company and its business and also displays it on cards. All of the cards have a background image and a clickable title with a “+” icon next to it. Unlike the Our Stories page, which has 50+ cards, this block has only 6 cards (3×2), but the cards themselves are similar on both pages. It ensures the consistency of the interface and enhances UX.

Scroll progress bar

Scroll Progress Bar

To improve UX, we added a scroll progress bar right below the header (seen at the top part of the screen). That helps the visitors understand where they are on the page and how much time they will approximately spend reading it.

The convenience of a site is not just how obvious the clickable elements are and what kind of icons you select. It’s also the smallest things like progress bars that show visitors that you care about their experience and value their time.

EBRD site header


The main purpose of tweaking the header from the 2019 year’s version is to increase the legibility of the logo and title. At the same time, we had to make it narrower to fit the scroll progress bar without clogging the interface.

Ajax search

Ajax Search

This project required adding multisite search functionality so that it looked through all the resources, not just the ones on this particular site. For that purpose, we chose the Ajax Search Pro plugin. The main difference with the EBRD’19 project is that the search button triggers not a full-width screen, but a dropdown menu with suggestions. It works the same way everywhere on the site where the search button is.

EBRD menu desktop

Menu - Desktop

The menu button is in the header – the click triggers the full-width menu that gradually pulls down on the screen. We also added transition effects for the menu items. Additionally, we ensured the menu fits the refreshed interface and changed its color and tweaked the style.

EBRD menu mobile

Menu - Mobile

In the smartphone view, the menu also takes the entire screen and is more compact. And, of course, all the changes in the style, as compared with the last year’s version, apply to this menu as well.

EBRD Our Stories

Our Stories Page

The page has to have the company’s cases, events and accomplishments presented on cards. These cards all have click behavior similar to the one in the About Us block on the home page. We took our previous work as a basis and changed the tooltips, which appear on-click on the card with text expanded. To optimize the page load time, we implemented the lazy loading technique.

EBRD footer


The footer provides the key information about the site, a search bar and the navigation elements – users can switch between different reports’ sites from there. The search results appear in the dropdown – the way it works with the search bar in the header. There is a custom slider block with text, images and a Read More button. All of the elements are editable from the admin dashboard.


We’ve built a system of interrelated sites for the annual reports of EBRD. Each site has a well-thought-through UI and UX with lots of custom Gutenberg blocks. For a better UX, we ensured maximum interactivity of all site elements and vivified the interface with transition effects.

The site uses multisite search powered by the Ajax Search Pro plugin for WordPress. The technology allows searching across all EBRD resources on all their sites. The search bar triggers a dropdown menu with suggestions.

The resulting sites show consistency in their interfaces – within one site and between them. Everything is made for the utmost convenience of the site users, and the dashboard is customized for the admins’ convenience as well.

More Case Studies

Explore our other projects

Metageeks - Case Study on Belov Digital Agency


Our team was tasked with creating a website featuring a completely customizable shopping cart, integration with a wishlist, a free..
EBRD - Case Study on Belov Digital Agency

European Bank for Reconstruction and Development ’19

This project was carried out in 2020 and involved creating the 2019 official annual report website. We used WordPress multisite..
PEARL iZUMi Cycling Gear - Case Study on Belov Digital Agency

PEARL iZUMi Cycling Gear

A brand new website for the blog project by PEARL iZUMi. Only the best modern technologies: WordPress Blocks (Gutenberg) Only..
Lake County Partners - Case Study on Belov Digital Agency

Lake County Partners

The website utilizes the best WordPress approach – the WordPress Blocks (Gutenberg) on our professional theme. No commercial themes or..

Transform Your Vision

Request your website now

Over 900 companies trust us with their online presence

Belov Digital is super fast and does a great job helping us!
Belov Digital Agency - WordPress Development - Reviews

Shawn Michael Lang

Great job! Very helpful through the whole process, quick turnaround time and a very good communications.
Belov Digital Agency - WordPress Development - Reviews

Lisa Higgins

Alex and his team were super helpful in the process of getting our site a new theme and functionality. Always keeping updates going as far as progress or answering questions. They beat all the timelines for our project. Looking forward to hiring them again in the future for more projects.
Belov Digital Agency - WordPress Development - Reviews

Joshua Lawton