Legalbet 2.0 sports analytics website redesign

We released the previous version of the website 4 years ago and have been maintaining the site. At some point, we noticed that the current design no longer suits the extended functionality of the website.

In 2018, more than 50% of users accessed the website from the mobile devices, yet there was no mobile version. Also, the navigation wasn’t perfect: as the website grew, so did the menu, finally reaching a few screens in height. So accessing the subsections from the menu got clumsy.

Blocks grew more informative so we were looking for a way to extend the number of the blocks, preserving the tidy look and keeping them easy to read. To improve the navigation and introduce the mobile version, we started the redesign

Modular structure

Every block on the website is now a separate module with visible borders. The modules are white and the background is grey, which makes the blocks defined and readable. Also, ads and promoted blocks can now be highlighted with a bright background colour.

The tables have becоme neater and easier to read.

The modular structure enabled us to employ the same blocks in different sections of the website.

Navigation

The old side navigation was a pile of links stretching over a few screens. It could only be used from the top of the page. In addition, the elements were quite confusing. To handle that, we made the menu bar simple and horizontal.

In the new version’s menu bar, only six main sections are displayed, which makes it easier to use. On hover, the subsection links are displayed, letting you go deeper. The menu is fixed at the top of the page so it can be quickly accessed

The old navigation had one convenient feature: you could see the subsection updates right away. We preserved this configuration for the inner pages — each section has a detailed vertical menu. It displays the subsection updates and lets you quickly see any of them.

Also, there is a second menu section at the top of the page where we moved some of the filters. For example, in the betting centre, the leagues are displayed in the right column while you turn to the upper filter section to sort by time. The filters are logically arranged on the page depending on their subject — this makes them easier to interact with.

In general, the theme-based filters are placed on the right and the rest go to the upper menu block.

Mobile version

It was important to optimize the website for mobile devices as most users view Legalbet.ru on small screen. All the solutions described above work on mobile devices, too.
The mobile-adapted versions of the blocks almost always match the desktop ones in terms of structure, so they are easy to maintain.

As a result, a minimalistic and functional interface was created. It suits the company’s current needs and can be easily adjusted in the future.