SoloGG

TSM's universal gaming network, under one app.

browser mockup signup
Overview

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.

Role & Duration

Product Designer | TSM
Sole Designer
2-3 weeks

Wireframing, Product Thinking, Visual Design, Prototyping, Interaction

The Problem

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: 

  • The most popular games, like League of Legends, have a multitude of 3rd-party sites that all perform a slightly different function. Gamers may spend hours going through these different sites, and never end up on a single one.
  • The biggest outlets for gamers aren't catered to gamers specifically. Reddit is the sole option for gamers to find their peers and community content, Youtube for VODs, and hundreds of indy websites for statistics and guides.
  • Many gamers want to team with others, but many LFG (Looking for Group)-catered sites struggle to gain traction because of the lack of a strong user base.

The Need

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.

My Responsibilities

After being handed the project brief from my lead, I took on the project solo. I carried out the project from research to prototyping phase, while I maintained constant communication with my lead for progress updates and design critiques.

 

Research Phase
Testing and analyzing strengths and weaknesses of various user sign-up flows of popular websites. Taking note of feature reach constraints.

Ideation Phase
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.

Design Challenge

How do we create a sign-up process that users won't dodge?
How do we incentive newcomers to join our network? 

Solution

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.

settings mockup

Identifying Opportunities

Utilize a universal navigation bar

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.

Promote the rest of the network

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.

Craft an easy sign-up process

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. 

Identifying Constraints

Lack of Establishment

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.

Time Constraint

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.

Planning

Since this is a much more streamlined product, we instead focused on the user flow to cover every step along the user sign-up process.

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.

Conceptualization

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.

Considerations:

  • Do we want to advertise the network during the whole sign-up process?
  • Do we want to showcase incentives while the user signs up? 
  • Should this focus on security or simplicity? 
sketch mockup
lofi mockup

User Flow

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. 

Walkthrough

Streamlined Walkthrough
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).

Streamlined Walkthrough (Centered)

Feedback
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.

solofeedback

The Solution

SoloGG provides a way for TSM's network's users to create a universal account that links all of their gaming profiles under one name. 

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.

Final Designs

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). 

Design system
Step 1: Sign-up Screen
Signup
Step 2: Awaiting Confirmation
Awaiting confirmation – signup + login
Step 3: Verification Email
Confirmation Email – signup
Step 4: Verifying
Verifying – signup + login
Final Step: Account Settings
Settings Page Copy

All Screens

Last but not least, I completed all the responsive designs for dev. Luckily we designed for responsive and it was easy to adapt. 

all screens

Key Learnings

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.

More Potentially Cool Stuff

FortniteMasterProduct Design

AthleticOutlookProduct Design

StatsRealmRoyaleProduct Design

Let's Connect

I'm open to chat about any opportunities, or even just to chat!

svg-image
svg-image
svg-image