I was tasked to lead the redesign for 5E Arena and it’s rebranding to GoNxt. The goal was to address the design issues 5E had and create a new version tailored for a global audience.
Based on user feedback, we realized that Party creation and matchmaking which made up the core experience of the product was underwhelming. Our objective was to understand these issues in depth and design better overall matchmaking experience.
Based on user feedback, we realized that Party creation and matchmaking which made up the core experience of the product was underwhelming. Our objective was to understand these issues in depth and design better overall matchmaking experience.
MY ROLE
Product Design
User Research
Prototyping
User Research
Prototyping
TIMELINE
May 2023 - June 2023
TOOLS USED
Figma
Miro
Miro
THE PROBLEM
Setting up to play a match with friends was confusing and took too long.
AUDIT AND RESEARCH
Discovering current problems.
Party creation within matchmaking was a problem
Matchmaking and party creation were intertwined, requiring users to go to the matchmaking screen first to interact with their friends.
This caused several fundamental UX issues, making the process confusing and lengthy.
This caused several fundamental UX issues, making the process confusing and lengthy.
1
Wasted screen real estate
The side navigation occupied almost 20% of the screen area, making the already complex matchmaking and party creation systems even messier.
2
Chat only limited to single screen
Users had to return to the matchmaking screen to chat with their friends' party, even though they spent a lot of time exploring other features on the platform.
3
Tedious process to connect with friends
To create a party, users had to go through four steps:
- Access the matchmaking screen from home.
- Click on the plus icon to open the “Invite” dialog.
- Search for friends.
- Click the invite button.
4
Missed opportunities with the Friend’s tab
The Friend's tab was only used to check friends' status/profile or directly message them, while many party features could have been built into it.
INITIAL IDEATIONS
Three potential directions.
Solution 1- Focus on social interaction
One of the goals of the redesign was to transform the platform from just a CS matchmaking tool into a comprehensive gaming platform that offers all aspects of social interaction.
Building on this idea, this solution kept matchmaking rooms and parties as separate concepts.
Building on this idea, this solution kept matchmaking rooms and parties as separate concepts.
Increases social activity on GoNxt
Makes matchmaking room and party invites separate, which might overwhelm users
Limited use-case where a user would want to party and matchmake with two different people
Solution 2- Focus on familiarity
In this solution, the Friend’s bar handled all party creation and management, simplifying matchmaking to just maps and server selection.
This design would be familiar to users as Counter strike natively implements a similar solution.
This design would be familiar to users as Counter strike natively implements a similar solution.
Provides a familiar design, making it easy for users to adapt
Friends navigation might become too crowded and overwhelming
Solution 3- Focus on ease of use
Addressing the concerns with Solution 2, this approach focused on distributing relevant functionalities between the matchmaking screen and the Party tab while keeping them connected.
This meant that Room features are managed on the matchmaking screen, but parties can be created from both places.
This meant that Room features are managed on the matchmaking screen, but parties can be created from both places.
Makes it easier for the users to create parties using two options
Reduces clutter in the Friends bar by moving room functionalities to the matchmaking screen
USER TESTING
Settling the debate.
Since stakeholders had varied opinions on the best solution, we decided to conduct moderated user testing sessions. We built a prototype for each of the three variants and asked users to interact with them and provide feedback.
FINAL DESIGNS
It’s party time.
You just breeze through it
The party creation flow was simplified, allowing users to invite their friends with just one click and start playing matches.
The side navigation was also compressed, helping users focus on what really matters.
The side navigation was also compressed, helping users focus on what really matters.
Details matter
When a party was created, users' first instinct was to message their friends. Therefore, the party chat opens automatically as soon as the party is created, reducing an extra step for users.
The chat functionality was accessible at all times and still connected to the main friends chat so that user can quickly direct message their other friends and foster easier invite process.
The chat functionality was accessible at all times and still connected to the main friends chat so that user can quickly direct message their other friends and foster easier invite process.
Matchmaking with ease
Select map & server, Game on!
Once a party was created, users could quickly select the map pool and servers to play on.
The "Save Preferences" functionality was also introduced, allowing users to have their preferred maps and servers pre-selected, further reducing the time to play.
The "Save Preferences" functionality was also introduced, allowing users to have their preferred maps and servers pre-selected, further reducing the time to play.
Incorporating strong brand identity
While resolving the UX issues was the key objective of the redesign, good visual design was also a priority.
One example being GoNxt brand vector used in the match loading screens made the design more visually engaging and reinforced the brand identity throughout the product.
One example being GoNxt brand vector used in the match loading screens made the design more visually engaging and reinforced the brand identity throughout the product.
EDGE CASES AND CONSIDERATIONS
Figuring unconventional paths.
What if the matchmaking failed?
Matchmaking could fail for various reasons, so it was crucial to convey the exact cause to the user. A two-way feedback method was designed for this:
A dialog pops up, stating the reason and details. Once the user dismisses the dialog, the matchmaking CTA becomes restricted.
A dialog pops up, stating the reason and details. Once the user dismisses the dialog, the matchmaking CTA becomes restricted.
Party join and invite system
Users could receive different types of invite notifications, so the invite system was designed to handle various invite types and scenarios where multiple invites arrive simultaneously.
OUTCOME
A much improved core product experience.
Another set of moderated user testing sessions was conducted once the flow was finalized. Ten existing 5E Arena users were tasked with creating a party and starting a match on the platform while sharing their impressions of the redesign.
35% reduction in time to play.
Most users took significantly less time to create a party and matchmake with their friends, thanks to the reduced intermediate steps.
90% of the users preferred the redesign.
They found the new experience to be much more intuitive and seamless.
My learnings:
More ease of use doesn’t always lead to the best design direction.
Although Solution 3 seemed like the best option from a designer's perspective, users preferred Solution 2 due to familiarity bias.
Edge cases are key to designing good real-world products.
Not restricting designs to ideal paths and data, helped uncover many design issues that might have otherwise gone unnoticed.
Detailed prototypes can lead to better user testing insights
A fully interactive prototype allowed users to engage actively without being overly aware of constraints. This enabled us to gather valuable quantitative insights, such as time to play.
