ESEA

Game Client

Overview

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

My Roles

UX Designer:

  • I worked with the product team to redesign the client, setting up user interviews, research, prototyping, and designing the new UI and visual language that has since then been embraced by other parts of the brand.

UI Developer:

  • While ESEA has a large team of talented engineers, I was asked to take upon the task of styling the front-end to ensure that it was as close to the designs as possible.

Before & After

Initial Thoughts

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.

  • In order to properly redesign this app, it was crucial to understand the product goals as well as the users themselves. Unlike a website, this was a client that users would be interacting with daily.
  • The UX of video games is different from the web, therefore it's important to research UI patterns that pre-exist in Counter-Strike and similar games.
  • Ultimately the client is still a web app, so it should still behave and function the way a web application does.

Objectives

  1. Improve the overall user experience of the client through a redesign, taking advantage of newer technology.
  2. Redesign the visual language and branding of the product.
  3. Design the new UI around the concept of themeable skins that are awarded out to players and/or sponsored products.
  4. Find a way to gracefully tie together both the client and the website.
  5. Improve upon the social aspects of being in an in-house league platform.

Challenges

  1. Since I was not a Counter-Strike player, it was really difficult for me to understand a lot of features in the app. I spent a lot of time researching and consulting with the product team to fully grasp the usage of the app.
  2. Counter-Strike's design language leans towards skeumorphism, which is difficult to replicate on the web. Likewise, it could look outdated if not done properly.
  3. I didn't fully understand what was technically possible and what was not, since I was not familiar with the backend capabilities of the client.
  4. Because ESEA is a unique product, there was nothing to base the new design off of, such as competitors or standard conventions.
  5. The client has been used for so many years that straying too far away from its original functionality will cause a lot of confusion to old players.

Visual Design

Branding

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.

Components

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.

Backgrounds and Imagery

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.

The New Home Screen

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.

  • Following normal design conventions, the logo is prominent in the top left at all times, reinforcing the branding of ESEA.
  • The top level navigation replaces the old tabs, allowing for easy access between the different functions of the client.
  • The new sidebar is more intuititve and informational, displaying all of the user's personal data, including the new buddy list.
  • The main function of the client remains the most prominent element. Additionally, the two features of creating a lobby and playing solo are combined into one functionality.
  • A news and announcements component has been added to allow a more seamless integration with the website.
  • Friend lobbies are displayed at the bottom to make it easier for users to see what their friends are up to, or to join their friends' lobbies without much effort.

The New Lobby Screen

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.

  • The users in the lobby are the most prominent elements to shift the focus onto players. This not only allows the overall experience to be based around the users, but makes it easier to know when to start the game.
  • Decorative elements are added to each player's avatar to denote their VIP status.
  • Players' idle status are clear and visible to allow the lobby leader to know when to start the game.
  • The new chat function in the lobby allows for users to communicate while gathering players in the lobby, as well as finding a match.

Settings

Only lobby leaders can see the Settings menu, and depending on its context, each setting was presented in a different way.

New Features

Away Status

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.

New Buddy List

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.

Achievements

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.

Skins

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.

Development

The front-end of the client is built in Vue.js, and I was responsible for all the styling and CSS architecture.

Nested Tokens

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.

Theming and Skins

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.