UI/UX Design
UI/UX Design
•
Graphic Design
Graphic Design
Rethinking the home page for an e-sports community
Rethinking the home page for an e-sports community
Rethinking the home page for an e-sports community
Participation
Participation
Design
Testing
Dev handoff
Team
Team
3 Developers
2 UI Designers
Community manager
Duration
Duration
2 months
Tools
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.
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
Discovery
Assessing the Problem Space
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.
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.
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
Discovery
How can I improve the user experience efficiently?
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.
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 continously, the horizontal menu was becoming too complicated and unusable
1. Horizontal Menu not fit for purpose
Due to new features being added continously, 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.
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.
outcome
outcome
Impact and clarity
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
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.
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
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.
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.