GGLEAGUES

Helping build a friendlier Esports gaming community for everyone.
GGL Header Image

Client

GGLeagues is a platform built for esports players looking to build communities. They are focused on connecting people inclusively through gaming. The esports world can be a toxic place with immature and insensitive gamers, but it does not have to be. GGLeagues eliminates that toxicity to empower gamers everywhere by encouraging a more welcoming atmosphere.

Community Gaming for Everyone

Team: 3 UI Designers
My Role(s): Project Manager and UI Designer

My UI design team and I partnered with GGLeagues to redesign their responsive Esports site. How will we improve their online brand and increase user sign-ups?

Running a System Diagnostic and Checking In

We used this time to get familiar with the existing website so that we had a better understanding of the direction we needed to divert from.

We noticed that we can look into exploring a more consistent and subdued color story, reworking their grid system and padding, and improving many UI elements.

Original Pages
Original Desktop Site Pages

In addition, the UX team had submitted Mid-Fidelity Wireframes for us to work with. We examined these carefully to understand the content that needed to be on the pages.

A constraint that we had to deal with was that GGLeagues partnered with the aforementioned team a few months back. Our current UI team no longer had direct communication with wireframe creators.

UX Wireframes
UX Wireframes

Moodboards
So Many Options, So Little Time

With an already established brand, the next thing to do was to explore different design directions to provide options for coming up with the final designs. Having options that we would later test with users was optimal for data-supported results.

Considering that there were three of us on the team we decided that creating three distinct moodboards would suffice. One of these mood boards were inspired by a dark mode interface while the other was inspired by a lighter and cleaner interface.

It was important to present 3 distinct designs, so for the one I worked on, I tried to think outside the box and took inspiration from circuit boards and video game pause screens.

Moodboard
"Pause Screen" Moodboard

Visual Preference Testing
How Do They Fare Against Each Other?

A visual preference test was conducted to help gather initial reactions for the three designs. The light mode design received the most votes while my original moodboard received the least.

This showed that our target audience (eSports gamers), preferred a more legible and clean design, without many distractions.

Visual Test 1
Usability Hub Results for Preference Test (Moodboards)

Style Tiles
A More Comprehensive Look

Now that we had a better understanding of what our audience preferred through the moodboard designs, we created style tiles to further explore each design direction with greater detail.

Style Tiles are useful because they include aspects of the interface which will help the overall design stay consistent such as typography names and sizes, color hex codes, and iconography.

Knowing how people responded to the moodboard I created, I stuck with my original concept so that we still had our distinct design directions but tried to make it look cleaner and less cluttered.

This moodboard was inspired by video game inventory screens. It utilizes cards for organization. Fugaz One (Google Font) was chosen for headers on account of its bold and fun appearance. Raleway (Google Font) was used for the body text due to its clean elegance.

Style Tile
"Video Game Inventory" Style Tile

Visual Preference Testing
Which Is More Appealing? Round 2!

At this point, we wanted to finalize the direction we were going to take so that we can start creating the first round of mockup designs. We conducted another round of preference testing to aid us with this.

The more defined dark mode style tile ended up being preferred by the participants as it was viewed as more innovative, mature, and clear.

While there were a few positive mentions regarding my design such as it felt sci-fi and cool, and that it was the most interesting layout and made them want to look at the details, the big takeaway here is that most people prefer a cleaner organization for taking in information.

Visual Test 2
Usability Hub Results for Preference Test (Style Tiles)

Logo Redesigns
New and Improved?

While working on the design direction our team noticed that the original GGLeagues logo could be improved upon in terms of legibility. We approached this in the same way we did for moodboards and style tiles- applying three different design directions.

I decided to go take the more conceptual route again and turned the “GG” in GGLeagues into a controller shape. This is followed by “Leagues” clearly written underneath with a futuristic looking font.

In order to test the visual appeal of each logo, the Microsoft Desirability Toolkit was used. Users picked 3-5 words out of a total of 12 words that best described each design.

The logo I created was voted to be the most innovative but unfortunately, it also received votes on being distracting.

The winning logo was the updated original logo which received the most positive responses, especially for clarity.

Logo Redesign with Test
Usability Hub Results for Desirability Toolkit (Logo)

Mockups: Round 1
Let’s Team Up!

The team has now established a design direction based on the winning style tile (Dark Mode).

Using this direction, we created mockups based on the UX designers’ wireframes.

The end goal is to hand off the final mockups to the client’s developers, who would then code an updated site based on our designs.

Features:
  • Card usage for optimal content organization.
  • Contrast= Grade AA accessibility standards.
  • Dark mode theme which appealed to most participants during visual design testing.
Dashboard Round 1
Round 1 Dashboard Mockup
Mockups Round 1
Other screens from Round 1 of Mockups

Usability Test: Round 1
The Soft Launch

Using a prototype, we conducted round 1 of usability tests applying a user list provided by the client consisting of esports gamers they are currently working with. All users successfully completed the tasks they were given. Here are key insights from the results:

  • Some users found some wordings of titles confusing, such as “Player Stats.”
  • Otherwise all users thought the designs were “intuitive”, “clear” , and “cool.”
  • One user brought up that they liked the simplicity - that it didn’t have too many distractions.

Mockups: Round 2
The Final Countdown

Our client made it very clear that he understood that what mattered the most was the users’ opinions and experiences. Because of this, we wanted to provide the client with more data-backed results from Usability Testing.

Thus, we created 2 rounds of mock ups, prototypes, and usability tests with the second batch of materials showing clear iterations and improvements from the initial group.

Goals for Round 2 (based on Usability Testing Round 1 Results):
  • Use clear and descriptive labeling.
  • Make CTAs more consistent.
  • Simplifying card designs to remove unnecessary distractions.
Landing Page Round 2
Round 2 Landing Page Mockup
Mockups Round 2
Other screens from Round 2 of Mockups

Mobile Screen Examples

Mobile Mockups
Sample of Mobile Dashboard Screen

Desktop Prototype

Note: Please view prototype in full screen/in a new tab for its intended size and to ensure links work.

Usability Test: Round 2
Last Round! This Is It!

This time we were able to test 6 users from an updated user list provided by the client. Here are key insights from the results:

  • Layout and hierarchy of information on the site was easy to read, scan and understand.
  • Users appreciated the amount of information displayed including user and team stats.
  • 83% preferred the new colors and theme.
  • Users were asked to rate the Difficulty of Use on a scale of 1-5 (1 being easy, 5 being hard to use).  Out of the 6 Participants, Mean rating = 1.25.

The Style Guide

We were able to communicate with the developers directly regarding the mockups we created and what they were and weren’t able to work with. To assist with a smooth transition with handing-off final deliverables, we included a style guide so that they would have an easier time coding our designs.

Sample Pages from the Style Guide

Client Hand-Off Meeting

During our final meeting with the client, the founder mentioned that one of their current users already started asking about when the new designs will go live!

This was very exciting for me and the team as it showed that we’ve already made some sort of positive impact.

The client subsequently appeared and sounded very pleased with our results. This ended our partnership for now and we look forward to seeing our designs go into effect.

Like a Well-Oiled Machine

As the project manager: working seamlessly with all members made the process easier. Each team member had an equal understanding on what needed to be accomplished and how to get there:

  • We had very clear communication with each other
  • I made sure to give people the space they needed to work.
  • We all made sure to keep the overall team spirit high throughout the process by offering feedback and recognition where it’s due.
In other words: I had a BLAST working with this team!

Proposed Light Mode Idea

Underpromise and Overdeliver

Taking on this approach was successful for this project because we did not want to promise too much in initial meetings while failing to deliver at the end. I realize that it also depended on the client, but as we got to know more about the client in those initial meetings, it made the most sense and we turned out to be successful.

For example we had this idea of creating a light mode version of the site so that the user would be able to switch between light mode and dark mode upon landing. However, we decided it would be best if we perfected the current dark mode direction first before even mentioning this idea to the client.

We included light mode and logo suggestion in the final meeting as future recommendations and the client was impressed!


Visual designs also by the rest of Team Keyboard Heroes:

John Castle

Kendra Good

“WE GOT THIS!” 💥💥💥


Official GGLeagues Site