Pen & Paper
3 UI Designers
Who is GGL?
Good Games Leagues is an esports company aiming to end toxicity in competitive gaming. Their platform allows players to create intramural teams based more on social and regional ties rather than skill-based teams.
Who are the players?
GGL players are college aged recreational players who focus on their personal growth as players and enjoy connecting with similar players.
“Enthusiastic eSports players need a digital way to stay connected with gaming and league information and content in order to enjoy being a part of an active and cohesive community of gamers, beyond just being competitors.”
Increase sign-up conversion rates by creating a compelling landing page.
Strengthen the brand through UI (typography, palette, iconography).
As a team, we came up with 4 design principles to guide us and ensure we created a cohesive design that communicated GGL's core values.
Designs should be consistent with modern gaming trends and gaming user interface patterns.
Gamers are diverse, we want all to feel welcomed.
Each element on a page should work together to deliver a clearly defined purpose to each page.
Dynamic use of colors, typography, and imagery to stand out in the visually driven market of esports.
Looking over the previous GGL website, the color scheme lacked balance, the colors competed with each other and lacked contrast.
It was difficult to view page contents because the eye was drawn to too many areas.
To strengthen the GGL brand, we needed to create a cohesive and consistent style to help users navigate the page.
With this in mind, we wanted to explore some different ways of expressing the GGL brand to find a style that most appealed to their target audience.
For this undertaking, we each specialized in a theme. I was tasked with revamping the brand while staying within the constraints of their previous color scheme.
I based my theme off of Discord and Twitch, two brands gamers are familiar with. I modified the palette to create higher contrast; insuring greater visual accessibility and focusing attention on CTAs. I created a style tile for testing as it gives a good understanding of how elements can work together on a page.
Based on this data, we decided to pursue the dark-mode theme, as it was the favorite, and had felt comfortable and familiar to users.
As our visual design tests were running, we turned our focus to our number 1 project goal: increase sign-up conversion rate from the landing page.
To draw the user in, I moved the personal growth section to the top so it is the first feature the user sees.
I adapted the “How it works” to a vertical flow to fit better in parallel, and emphasize the steps to register including moving the CTA from the top of the page, to sit directly below the steps, to create a seamless flow from discovery to registration.
Previous landing page
New landing page wireframe
First round of mockups
With our brand direction established, and wireframes completed, we began crafting our first round of mockups.
I like to think of this first draft as a kind of visual hypothesis that we test through usability testing to see what works in the design, and what needs to be improved. Through usability testing with 8 users, we were able to identify what changes needed to be made.
Layout was intuitive and clear:
100% of users said the information was clear and easy to read.
Users had a 87.5% success rate for testing tasks.
Users found our design appealing:
83% of users preferred the new color scheme, confirming our decision to pursue the dark theme.
Users were confused by the wording for certain sections:
Certain labels such as "player stats" were unclear for users.
Certain areas lacked clarifying labels such as in the next match section.
Users found the blue headers for some cards distracting.
Cohesive palette keeps attention on valuable information
Features community photo on landing page to strengthen the brand
Moved up player growth section to draw target audience in and increase conversion rates
Contrasting CTA to draw attention to interactive UI elements.
Simplified leagues section to create seamless sign up flow
Updated labels for clarity: changed to "my stats," etc.
Clarified users team and opponents for next match.
Removed distracting blue labels on cards.
Improved consistency with clickable elements by utilizing a singular color: yellow.
The final boss
We worked with the development team throughout the project to make sure nothing was out of scope, and near the end of the project we collaborated to create a complete list of deliverables they needed to implement our designs.
Arguably the most important asset we created was a meticulously crafted style guide. I created pages for responsive grids, iconography, padding, cards, and tables. The style guide explains rules about when and where to use UI elements, sizing, padding, and specific hex codes. We included everything GGL needed to expand on their website as they grew.
Cover image shows GGL logo and style guide title.
Describes what the GGL brand is all about.
Final page, shows UI team names.
Cover image shows GGL logo and style guide title.
Strengthened the landing page
Careful monitoring over the next few months will tell if these changes show an actual increase in conversion rates.
Strengthened brand expression throughout
A majority (83%) of users prefer the new and improved look of GGL. Users have already expressed their excitement to see the changes implemented. It is our hope that by strengthening the brand, users will feel a stronger sense of belonging in the GGL community.
Doubled site traffic
By creating a site truly accessible through mobile web, we give users the ability to access their stats on their mobile device, effectively doubling site traffic (according to competitors receiving 50% of their traffic through mobile).
Dealing with the frustration of not knowing more about the wireframes, made me hyper-aware of creating a thorough and complete style guide so the developers would not have to deal with uncertainty. Additionally, I kept the Figma file layers organized and labeled appropriately, so any new designers could easily work with our design file
Trust in your team
I really got along with my team, we were able to collaborate effortlessly, while having fun along the way. By trusting each other and working hard, we were able to accomplish so much! Each of us had an off day (or two) but we were able to bring each other’s spirits up and have another rewarding day.