UX/UI redesign and rebranding of Leagues.gg
In June 2020 reached out to me, as they wanted to build an entirely new platform with a focus on scalability, statistics, and much more flexibility for the teams and organizations on their platform. And so we did.
In close cooperation with stakeholders at Leagues.gg, I have been leading the redesign and rebranding of the Leagues.gg platform all the way from the sketching and prototyping phase to designing the interface pixel by pixel.
– Radical UX/UI redesign and rethinking of their old interface.
– Continous design of new features as the platform expands.
– Rebranding with an included style guide.
– After the redesign, Leagues has received a pre-seed investment of 1,5M DKK from Accelerate (September, 2021).
– Over 200% year-on-year revenue growth.
– Has become the biggest esport platform in Denmark and are well-established in Scandinavia.
– Has worked with brands such as Red Bull, Telia, Steelseries, Hungry and Komplett since the launch of the redesign.
– Got +5.000 active players and coaches on the platform.
– Kept a +200% year-on-year revenue growth since the launch of the redesign.
About the client
Operating in Denmark, Sweden, Norway, Finland and Russia, Leagues.gg has millions of viewers and thousands of active players attending esport tournaments and leagues every week.
From the platform, players can battle other players in tournaments, leagues and scrims. However, Leagues.gg is not just another esport platform. Leagues.gg has a strong vision of making the esport industry more transparent and manageable for players, teams and organisations. From the Leagues.gg platform, you can find and recruit new players, teams and coaches to join or recruit.
Furthermore, Leagues also features tools for e.g. game analysis, player contract management, a calendar for easy management for matches and team practice.
Snapshot of the design file including the +100 frames that was designed during the project
The design process
Step 1 – Research
Leading into the project, I interviewed the founders of Leagues.gg as well as a focus group of users of the current Leagues.gg platform to get an understanding of who is using Leagues.gg.
The findings lead to four core user personas:
– Esport players
– Esport coaches
– Esport team managers
– Esport organizations
Step 2 – Wireframing
To ensure full focus on the user experience of the platform, we started the design process by creating wireframes for each page on the new platform. By focusing on wireframes, all visuals can be pushed aside and thus they served as an important element for discussing the user experience of the platform with the client.
The 100+ wireframes were reiterated continuously in cooperation with the client until we reached optimal user experience and once we ensured that all elements we wanted to include were included, before heading to the visuals.
Step 3 – Visual exploration
Once the wireframes were finalized, we focused on visual explorations to test different paths for the visual style. Here Leagues.gg users were included in the design process, to help to determine the right style for the new platform.
Step 4 – Prototyping
Finally, after narrowing down the visual style, all the wireframes were transformed into a high-fidelity prototype, replicating the final product. Again, Leagues.gg users were included to test the prototype and gather valuable feedback, which we used to optimize different elements of the product before launch. Findings from the testing lead us to e.g. change the league pages to show more data in less screen space and we also updated the content hierarchy of the front page.
Old Leagues.gg design before redesign
An iterative approach
Throughout the project, these user personas have been used to move the needle forward. With the design of each feature, stakeholders such as coaches, the founders, as well as the focus group of users have been heavily involved to constantly provide feedback and in making sure that the features appeal to the target user group and are not solely based on assumptions from the design process.
Going from wireframe to prototype and then involving stakeholders in an iterative approach has given us the opportunity to make fast progress in the project whilst ensuring that the needle is moving in the right direction
New Leagues.gg design: League page + Player ranked stats
New Leagues.gg design: Streams page + Player Finder
Rethinking the UX
A major part of the project has been based on rethinking all the user flows, all the way from how a new user is optimally onboarded on the platform to how we could make joining new tournaments and scrims as seamless as possible for existing users.
Rethinking the entire user experience and interface design of the Leagues.gg product as well as creating a stronger brand, including elements and guidelines that can be used in all aspects of Leagues.gg’s visuals from print design, to social media materials and on their website.