GG Leagues

Building community through esports league platform.

My Role

UI/UX Designer

Brand Designer

Tools

Figma

Usability Hub

Pen & Paper

Zoom

Team

3 UI Designers

Platform

Responsive Web

MacBook Pro@3x.png

Tutorial

Project context

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.

Problem statement

“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.”

Project goals

CONVERSION@2x.png

Increase sign-up conversion rates by creating a compelling landing page.

UI@2x.png

Strengthen the brand through UI (typography, palette, iconography).

giphy.gif

TLDR;

Or continue to see my process...

Ready player

Design principles

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.

Familiar@2x.png

Familiar

Designs should be consistent with modern gaming trends and gaming user interface patterns.

Inclusive@2x.png

Inclusive

Gamers are diverse, we want all to feel welcomed.

Unified@2x.png

Unified

Each element on a page should work together to deliver a clearly defined purpose to each page.

Visually Appealing@2x.png

Visually appealing

Dynamic use of colors, typography, and imagery to stand out in the visually driven market of esports.

The Grind

Brand expression

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.

1.0 Style tile (1).png

Preference Testing

1.0 Style tile (1).png

Mine

60%

3.0 Style tile.png

30%

2.0 Style tile.png

10%

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.

Wireframing

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.

Old Landing Page

2

1

Previous landing page

Landing page wireframe

1

2

New!

New landing page wireframe

Theory Crafting

First round of mockups

With our brand direction established, and wireframes completed, we began crafting our first round of mockups.

2.1 Dashboard-1.png
3.0 My Profile.png

Usability testing

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.

What worked?

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.

What didn't?

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.

Mockups

Landing page

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

1.0 Landing Page - Colored College Logos

Profile page

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.

3.0 My Profile.png
 

The final boss

Style guide

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.

1.0 Cover
1.0 Cover

Cover image shows GGL logo and style guide title.

press to zoom
2.0 Brand
2.0 Brand

Describes what the GGL brand is all about.

press to zoom
17.0 Final Page
17.0 Final Page

Final page, shows UI team names.

press to zoom
1.0 Cover
1.0 Cover

Cover image shows GGL logo and style guide title.

press to zoom
1/17

Measuring success

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).

Lessons learned

Be thorough

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.

Meet the dream team: Robert Mingoa and John Castle

Lets get in touch

  • linkedin-round-line copywhite
  • linkedin-round-line copy 2white
  • linkedin-round-linewhite
  • Behance Logo

©2020 by kendrajenel.