ESEA is Counter-Strike: Global Offensive company known for its anti-cheat game client that pairs players up with other paid users for what is known as an in-house league. Instead of playing on Valve's native matchmaking which has no guarantee of quality games, users are essentially playing private games with each other, made by ESEA.
I joined ESEA as a part-time contractor in 2016, with redesigning the client as one of my first projects. Since then, I am still in charge all UX related projects.Visit Marketing Site
ESEA is well-known in the Counter-Strike gaming community, as most players have either played or heard of it. Surprisingly, it has been able to stay prominent in the competitive scene with such an outdated client.
Despite its outdated client and website, ESEA's logo was surprisingly very nicely designed, so I built the new visual identity around that. The star is the most iconic part of ESEA's brand, so the new branding was based around the concept of space. Dark, subtle colors are primarily used with strong, vivid colors such as the primary green and white.
I opted for Roboto as the primary typeface for its versatility as both a display and paragraph text, and its readability at all sizes.
After researching numerous amounts of gaming UIs, I decided to go for a flat design style with a touch of traditional gaming accents, such as subtle gradients, transparency, and outer glows. This allows for the elements to both appear modern while keeping the familiarity that most players are used to seeing and interacting with.
Most elements are subtle and dark, with the primary color being used as accents and highlights.
The two primary types of imagery used throughout the new branding revolves around the concept of space, and metals to reflect the guns in Counter-Strike. Therefore, carbon fiber is often the pattern of choice for its sleek and elegant texture, and galaxies are used to depict the vastness of space on larger backgrounds.
I kept the core components of the home screen in the same place for familiarity, changing only the overall look of the UI into something more visually appealing and modern.
The game lobby is where users will be spending most of their time, so making it as intuitive as possible, while keeping the majority of the old expereince was crucial in the redesign.
Only lobby leaders can see the Settings menu, and depending on its context, each setting was presented in a different way.
An important peace of information in any game is a player's away status. It's useful to know if a player is idle or away from their keyboard, so that they are not invited to a party or lobby. The green, orange, and red colors are a convention used by almost every chat platform denoting Available, Away, and Busy. Because these colors have instrisic meaning, they cannot be overrided by a skin.
I experimented with a few fun aways to display and animate the options of getting the status.
Since player status was now available, each buddy now has a status bubble on their avatar (which is pulled from their site profile). On top of idle status, behavioral status is also a new bit of information that is available, as the client is able to track the player's game status, displaying whether or not they are playing actively Counter-Strike, presently inside of an ESEA lobby, or simply available at their computer.
I also experimented with two variations of the buddy list, one in which Online and Offline players are grouped seperately.
The concept of achievements is nothing new to video games—players getting rewarded for completing a task has been the foundation of every video game since the beginning of time. Although the client itself is not a video game, we brought this reward system to gamify the experience, allowing users to receive rewards such as skins for ranking up.
This is technically possible because the client's backend is connected to the website, allowing for users to receive items or awards through posting, ranking up, and participating in events.
One of the most exciting new features for users is skins. From a product perspective, it allows for users to have something to look forward to and provides motivation to level up. There are multiple types of skins—decorative, rank skins, karma skins, event skins, fan skins, and team skins.
The front-end of the client is built in Vue.js, and I was responsible for all the styling and CSS architecture.
Although the client was not built using a design system, the architecture was still designed with the concept of components and tokens in mind.
The BEM naming convention was used to organize the classes into more readable code.
Because each skin is different, it was important to separate foregrounds and backgrounds, in case a skin was light instead of dark.
Each skin had its own stylesheet that essentially fed the main stylesheet its own variables to allow for quick theming of new skins.
Whenever a user changes skins, the client essentially refreshes itself, loading the new stylesheet.