Emma Dodson Karto

UI/UX Design

•

Graphic Design

Rethinking the home page for an e-sports community

Participation

Design

Testing

Dev handoff

Team

3 Developers

2 UI Designers

Community manager

Duration

2 months

Tools

Figma

Esportal.com is an online gaming platform for Counter Strike Global Offensive. Users can use the platform to create teams for matches, or compete in CS:GO tournaments.

Discovery

Assessing the Problem Space

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.

Discovery

How can I improve the user experience efficiently?

The aim of the project was to improve the home page experience without 'reinventing the wheel' as we were looking to launch the new design before the end of the year. Therefore the scope for the project was limited to using current features but improving the layout and flow.

1. Horizontal Menu not fit for purpose

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

1. Horizontal Menu not fit for purpose

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

1. Horizontal Menu not fit for purpose

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

2. Cognitive overwhelm for users

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

2. Cognitive overwhelm for users

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

2. Cognitive overwhelm for users

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

3. Non-useful Content

In relation to cognitive overwhelm, there are sections on the home page that have no practical use and can be moved elsewhere such as news and videos.

3. Non-useful Content

In relation to cognitive overwhelm, there are sections on the home page that have no practical use and can be moved elsewhere such as news and videos.

3. Non-useful Content

In relation to cognitive overwhelm, there are sections on the home page that have no practical use and can be moved elsewhere such as news and videos.

4. Lack of Community

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

4. Lack of Community

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

4. Lack of Community

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

outcome

Impact and clarity

Vertical Menu on the left

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.

Vertical Menu on the left

Friends list on the right

Prior to the redesign, your friends list was available from a minimised bar at the bttom of the page. Now the friend list is open and visible at all times so that users can build their matchmaking teams more easily.

Friends list on the right

Focused content

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

Focused content

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

Focused content

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