Emma Dodson KartoEmma Dodson KartoEsportal is an online community platform for the popular game Counter Strike Global Offensive.
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:
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 :
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.
Left side vertical menu with collapsing sections to allow for sub-menus and leave space for any new features.
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.
Left side vertical menu the menu now also includes a section for live tournaments that click through to the tournament pages.
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.
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.
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.
Onboarding
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.