TSM's universal gaming network, under one app.
Gamers juggle a lot of different titles simultaneously. In 2019, League of Legends, Fortnite, Apex Legends, Overwatch, and many more games share the same viewers and fanbase. TSM Dev has provided some of the top gaming resources for all of these games, and now seeks to provide a singular platform for the entire network.
My goal was to jumpstart this project by designing the Accounts pages, in which users would link their accounts across our established networks.
Product Designer | TSM
Wireframing, Product Thinking, Visual Design, Prototyping, Interaction
As the e-sports scene is evolving rapidly, the gaming community has thus far struggled to establish a 'learning base' for its gamers. Although many sites like probuilds.net and fortnitemaster.com have emerged to cater to aspiring gamers for specific games, the gaming community as a whole lacks a home.
Currently, the community prefers certain outlets for various needs. Key problems:
Competitive players want to link their profiles and display their statistics and historical achievements among different games. Imagine a LinkedIn but for your gaming career.
Casual players want a single place to instantly access a community, guides and statistics for any game they choose.
Newbies want a place to learn how to play the game, and possibly find friends to play with so their first few hours are more welcoming.
Testing and analyzing strengths and weaknesses of various user sign-up flows of popular websites. Taking note of feature reach constraints.
Planning out complete user flows from sign-up to account linking. Weeding out excessive features that don't add value for the user.
Visual Design Phase
Wireframing and ensuring all designed pages are cohesive throughout the platform. Created a singular design system (symbol library) encasing typography, color palette, and button states.
SoloGG is TSM's attempt at unifying its entire gaming site network. It allows for gamers to quickly create a 'Solo' account, link their gaming profiles for various top games, configure their profiles, and explore the rest of the network.
Users that sign up for Solo accounts could link up to 8 different gaming accounts - Probuilds.net, Champion.GG, FortniteMaster.com, PUBG.net, OverwatchElite.net, StatsRealmRoyale.com, LolCounter.com, Solomid.net. These accounts would be used for a universal gaming site platform that every gamer would visit for performance statistics, game guides, forums and community content. This will be the one-stop-shop for all gaming needs.
Since TSM controls a multitude of gaming tools, these could all be unified with a distinguishable, scalable navbar. This could hone the CTA for users to sign up for a Solo account.
Currently, there is no obvious way to know about the entire gaming network (8 sites). With Solo, gamers can now easily jump from one site to another if they so choose.
The sign-up process doesn't need to be more than 3 steps. Solo can take on a new 'meta' for users to sign up for a brand new network.
With the official TSM brand being disassociated with Solo at the time, we had to find a way to still incentivize users to join our new network. Very few people knew about the links between our various sites.
Only about 2 weeks were allotted for me to push these designs out. We would have to bypass the research phase and user testing; a risk to reach deadline.
Our starting point was the universal navigation. Since we already had that established, we knew that this would be the entry point for all of our users to get to SoloGG. From there, the user flow would cover the sign-up process from the user clicking 'Create an Account' to redirecting back to the original TSM tool they were using.
At first, I started with some simple sketches to simply figure out the layout of the sign-up page. Since this was from scratch and detatched from our other sites, it would set the tone for the new network.
I created a user flow to help focus on a path from leaving a site to successfully creating an account. User flows help to validate that my entire solution is complete and makes my solution easy to understand for my team.
To more easily communicate this to my lead, I streamlined the user flow so that it's more straightforward on how a new user goes about creating an account. I presented one as a New User (no account) and as a Log In (registered user).
After showing these screens to my leads, I received a lot of feedback on the user flow on everything from layout critiques to UX improvements. This step was crucial for evolving the designs to be even simpler and easier for the user to follow.
Inform users about other tools in our network. Provides an insanely easy sign-up process to attract more users. Lays the foundation for a future gaming conglomerate.
After we finalized the flow, we started iterating on the visual designs and the design system for SoloGG. It is important to establish a visual design system with symbol libraries so that everything is cohesive (and it also saves time).
Last but not least, I completed all the responsive designs for dev. Luckily we designed for responsive and it was easy to adapt.
Since this was more of a solo project, it was a good opportunity for me to explore what my strengths and weaknesses were in my project management skills. For this project, my lead served more as a critique on the visual / layout design so that I could take on the project fully.
Establish a design system
This not only makes scalable design easier, but also helps to communicate guidelines to dev/other designers if the project needs to be handed off.
Symbols are your friend
I organize my design files not only out of necessity but also out of enjoyment. Since I was the only one to work on the core designs, I realized symbolizing every element, especially in forms, helps a ton.
Be thorough from the get-go
Establishing the full user flow from the beginning made my design process a million times more efficient. For other projects, we would often crank out designs as soon as possible without planning every possibility. Since this was much more streamlined, it was a lot easier to do so. I aim to work like this for all of my future projects.
I'm open to chat about any opportunities, or even just to chat!