Esportal is an online community platform for the popular game Counter Strike Global Offensive.

From This

To This

Understanding the Problem

The Esportal website is an actively developed website that adds new features on a regular basis. In 2020 it was decided that the current design was no longer fit for purpose and that the user experience could be improved.

Feedback from a user survey concluded that users want:

  • A quick way to join the matchmaking queue for a new CS:GO game
  • A quick view of live CS:GO gathers and a way to join them
  • View ongoing tournaments and a way to join them
  • Access to their profile and statistics
  • Access to their friends list

We also discussed better onboarding for new users, as the website is quite complex and overwhelming for beginners.


As part of the design team I :

  • Created the wireframes once potential solutions had been ideated
  • Created prototypes after several iterations of feedback.
  • Provided feedback to the developers to make sure the live version matched the prototypes before launch
Please note:
  • I worked at Esportal between 2015-2022 and moved from freelance graphic designer to full-time graphics and UI designer during this time.
  • The entire website was in constant periods of redevelopment between 2018-2022 as it expanded,  so I will keep the case study focused on only the desktop Home page redesign from 2020 for brevity.

Problem Areas Highlighted by Initial Brainstorming

Horizontal Menu

Due to new features being added continously, the horizontal menu was becoming too complicated and unusable.


No Focus/Useless Content

There is too much content on the home page. Users don’t know what to do first. We concluded that lack of confidence meant users were likely to leave quickly without guidance.

Weak onboarding

Esportal wants to have a more impactful home page with a clear message to guide its users.

Lack of Community Eement

Despite being a community website there is no clear way to connect with other users on the front page.


Wireframe Version 1

Left side vertical menu with collapsing sections to allow for sub-menus and leave space for any new features.

Feedback – Much better than old menu but there is a lot of empty space in the bottom half. Could we put tournaments or have ad space there?

Profile in top right I reduced the number of icons and are considering a welcome message for personalisation. There is also space to add the users rank progress.

Feedback – Some questions raised about profile page access and needing to visualise the rank progression.

Above fold content changes. . I added a tournament banner (for current tournament) which could also be a rotating banner. The gathers list was moved up and reduced to one list instead of three lists. I changed the layout to one column of content for better responsiveness

Feedback – Content is clearer but we need to consider onboarding or a way to direct users to join matchmaking, gathers and servers.

Further feedback

It was also noted that users wanted to see their friends list on the home page and be able to interact and open chat windows.


Wireframe Version 2 (Approved)

Left side vertical menu the menu now also includes a section for live tournaments that click through to the tournament pages.

Feedback – Approved for prototype.

Profile in top right I used the feedback from the previous version to show more detail. There is now a welcome message, a rank progress bar and then the user’s profile photo and notification icons.

Feedback – Approved for prototype.

Above fold content changes Now that tournaments were moved to the left menu, we could use the above fold content for Call to Action/onboarding. And for impact we would use a full background image.

Feedback – Approved for prototype but will undergo changes once onboarding process has been decided.

Friends List I added a right sidebar to for a friends list. It was also suggested adding a stream or news articles to the top section

Feedback – Approved for prototype.



Prototype - Approved for Development

Vertical Menu

The menu now lists main menu items in a vertical list and each menu item has a collapsing sub-menu (here you see Play open and listing all the menu options available). This sidebar is fixed content and is always available to the user.

We also added marketing for live tournaments that users can join on the website.

Focused Content

The content of the page is now clearly directed toward pointing users toward activities. They can choose how they want to play and see ongoing matches they can join as well.


We have now given users 4 key options – Play Matchmaking, Play Gathers, Play Public Servers and Play Ladders. It is of note that users visiting this site are familiar with this terminology from playing CS:GO.

Friends List

There is now a friends list on the right side of the website. Similar to the left sidebar, this area is fixed content, so only the middle of the website changes. This means that the friends list is available at all times.