Greg Mathews
Smash.gg handles all the heavy lifting when it comes to setting up and running an esport tournament, league, or event. I was one of two designers at smash.gg where I focused on defining the design process with the engineering and product teams, created design frameworks around functionality, and executed on feature work.
Smash.gg is becoming the place where the esports industry goes to be more productive and efficient. Organizers run their tournaments, players represent themselves, and all the results are calibrated on smash.gg. However, we noticed that there were many inconsistencies in the navigation, and site functionality.
Navigation was inconsistent which made it hard for users jumping between profile types. Owners of multiple profiles expected to have access to similar functionality, but custom features were built for specific profiles without thinking of scalability.
We audited and reviewed the growing list of profile types and came up with a framework for profiles that would create consistent navigation and define a reusable pattern for creating features. I aggregated these ideas to create a design framework for how profiles work across smash.gg.
Profiles on smash.gg represent a person, organization, team, tournament, or ranking. Profiles should be a representation of who that person is, what games they compete in, how good they are, and what roles they play in the industry. Profiles on their own are important for the user experience, but the connections between profiles are the most valuable. What creates connections between profiles are features.
Features are the connections between profiles. A player’s profile may have a team list feature which connects this player to a specific team. Features show up in the sidebar and is the main way users can navigate on the page and between profiles. The addition of features makes their profile extremely customizable and allows the user to truly represent themselves on smash.gg.
Permissions is a feature that is on all profiles. Permissions are extremely important to representing some profiles because often times many people are a part of a single profile, for example a lot of people end up contributing to one single tournament. Permissions on profiles end up getting applied on a per feature basis. Roles can be set up to make assigning permissions to profiles easier.
The profile framework helped to create a collective understanding of how smash.gg organizes itself. It helped to speed up development because we are designing/building profiles and features in a way that can be shared across the different profile types. In additional to internal efficiencies this created it helped to create an easier navigation pattern for users no matter what profile type they are viewing.
Leagues on smash.gg represent a collection of tournaments that contribute to an overall standing. Before I started at smash.gg the team had built an MVP of leagues to see if there was any heat around the idea. Leagues ended up creating a symbiotic relationship between larger organizations and small grass roots events. League organizers want grass roots events to be a part of their league so they do not have to run tens of events on their own, and grass roots events want to be a part of a league because it boosts attendance because their event is contributing to something more than just that one bracket.
After releasing the MVP of Leagues it increased attendance and events on smash.gg. For a while other priorities came above improving leagues further but it finally came time to revisit leagues to better support this profile type’s unique needs.
Leagues are one of the only profile types on smash.gg that can have 100+ events spanning across many many months. Because events can be hosted over such a long length of time the schedule of events ends up becoming extremely valuable.
Users are able to jump directly to the month they are looking for. Users can also filter events by the amount of points they will receive by participating, and by location.
It is important for profiles to feel custom to the brand that the profile is representing. The League profile was the first profile type that we created the ability to have a customizable modular homepage where the user could choose to add rows and custom content to their homepage. Users wanted to make their profiles match their brand and so the ability to add/remove/move sections to create a custom homepage experience was paramount.
For the longest time smash.gg had the same homepage which included only two sections—one for featured tournaments, and another for recently finished featured tournaments. The homepage became a page where users would skip through immediately because it rarely changed and rarely had relevant information for them. The featured tournaments section was very valuable for our partnership conversations, but the homepage in general fell short for our users.
We had a tight timeline to update the page and decided to focus on updating the tournament cards to surface the most important information for the users We updated the layout of those cards and added new categories to the homepage to increase the chance that users could discover an interesting tournament.
Due to our constrained timeline we couldn't do much in terms of personalization at this time, but we ended up adding sections for the top five games on the site featuring the most popular games, increasing the odds that users could find a tournament they were interested in. We also added categories for a couple other features that users love to interact with—Shops, Fantasy, and Leagues.
Right after a large tournament happens people often come to smash.gg to see the results. Previously, the recently finished section of the site wasn’t prominent had difficulty finding the results of the major tournaments that recently finished. The new design upgraded the recently finished category to have the same weight as the other categories so that users could easily find it. We also designed the tournament cards with a modular section on the right side of the cards to be able to show the placement right on the homepage.
The new homepage design increased actions on the homepage by 50%, increased on-site search by 70%, and increased traffic to shops that are hosted on tournaments.
