GGLEAGUES
Helping build a friendlier Esports gaming community for everyone.
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.
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?
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 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
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.
.png)
"Pause Screen" Moodboard
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.
Usability Hub Results for Preference Test (Moodboards)
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.
.png)
"Video Game Inventory" Style Tile
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.
Usability Hub Results for Preference Test (Style Tiles)
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.
Usability Hub Results for Desirability Toolkit (Logo)
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.
Round 1 Dashboard Mockup
Other screens from Round 1 of Mockups
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.
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.
Round 2 Landing Page Mockup
Other screens from Round 2 of Mockups
Sample of Mobile Dashboard Screen
Note: Please view prototype in full screen/in a new tab for its intended size and to ensure links work.
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.
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
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.
