GG LEAGUES
Overview
Platform: Responsive Website
Project Deliverables: Desktop & Mobile Mockups, Style Guide, Logo Redesign, Prototype
My Role: Visual Designer, Prototyper
Tools: Figma, Sketch, Adobe After Effects, Usability Hub, Pen & Paper
PRESS START: Project Background
Who is GG Leagues?
GG Leagues is an Esports organization that hosts collegiate and intramural gaming leagues. It focuses on removing the toxicity from online gaming and bringing gamers together in a friendly and safe community.
Who are the Users?
GG Leagues users are online gamers of all backgrounds who are looking to join a team of like-minded gamers, bond over their favorite video games, and participate in friendly competition. GG Leagues’ target audience is high school and college gamers who are either engaged in school-backed, intramural, or casual teams.
Project Goals
Revitalize GG League’s brand to generate more interest within its current user base and attract the attention of prospective users.
Create a responsive web design from GG Leagues’ current desktop site.
LEVEL 1: Research
Exploring the Map
At the start of this project, GG Leagues already had a brand and a live website. Our design team analyzed their site to help us conceptualize their brand and style.
GG Leagues’ Original Homepage
About a year before my team was tasked with this project, GG Leagues had worked with a user experience team to restructure their screen layouts and user flows. The UX team had designed a new set of wireframes for the main screens of the site. GGL gave us the wireframes to help lay a foundation for our user interface design.
Based on our analysis of GGL’s current site and UX wireframes, our design team developed core design principles for GGL’s brand that would serve as guidelines for our user interface design:
Inclusive
Unified
Familiar
Visually Appealing
Choose Your Player: Mood Board Inspirations
Now that my design team had a better idea of GG League’s current brand, we began to conceptualize our new interpretation of GGL brand and how it would reshape their site’s style.
We agreed to adopt a divergent design strategy, beginning with each of us finding our own distinct style inspirations via mood boards. My colleagues focused on a style similar to GGL’s current theme and a style focused on the concept of connectivity and inclusivity. I focused on diverging far from GGL’s current dark theme and creating a minimalist and modern aesthetic.
My Mood Board Design
With 3 distinct concepts in mind, my team narrowed our scope and created style tiles based on our mood boards. The style tiles allowed us to build more defined and cohesive themes consisting of exact colors, typography sizing and weight, form fields, and iconography.
My Style Tile Design
To ensure that our team was designing with our gaming audience in mind, we conducted a preference test of the 3 style tiles on Usability Hub. The “dark mode” style tile was the most popular, with 63% of the 27 participants preferring it over the other 2 options.
Insights
Gamers prefer a dark theme over light theme, but not by a large majority
Simple grid layouts are preferred as they keep screen elements clean and easy to digest
Bright colored buttons and links contrast the dark theme well and succeed at drawing users’ attention
LEVEL 2: Screen Design
The Mini Boss
The preference test results provided direction for my team’s mockup design process: focusing on a dark theme color palette and using negative space and card layouts to keep screens clear and easy to read. It was time to get to work on our UI design, starting with the wireframes provided by GGL.
We quickly realized that the previous UX team had provided us with all the key screen wireframes except for GGL’s landing page. Using the current landing page as a guide, our team created a new landing page wireframe.
Original Landing Page
New Landing Page Wireframe
Key Updates:
Moved the online leagues sign up section next to the intramural league registration section as they share equal importance in the eyes of prospective users
Moved the “Grow as a player…” card up so it is seen in the viewport without scrolling down
This section holds GG Leagues’ value statement and should be immediately accessible to users
Desktop Focused…Or So We Thought
In our first meeting with GG Leagues, it was clear that their users are mostly PC gamers so our team focused on designing desktop mockups at first. We assumed that most of GGL’s users would be accessing the site on a desktop as most of GGL’s sponsored games are played on PC. (You know what they say about assuming…)
Our initial mockup designs focused on:
Utilizing cards to keep screens clean and concise
A “Dark Mode” theme that is easy on the eyes
Text/image contrast with grade AA accessibility standards
But Do These Screens PLAY WELL With Gamers?
GG Leagues supplied us with several of their players to serve as usability test participants. We worked with 8 of GGL’s players for the first round of usability testing. I created a quick prototype in Figma with 3 simple tasks for the usability test:
sign up with GGL
check your player stats
check the opposing team’s stats
Here are the findings from the test:
PLAYERS LIKED
Clear and Intuitive Screen Layouts
Participants scored a 87.5% success rate in all user tasks
Dark Mode and Color Accents
83% of participants preferred the dark color theme and bright yellow buttons/links
PLAYERS DIDN’T LIKE
Inconsistent Card Labeling and Stats
Player profile page uses labels like “Player Profile” and “Team Stats”, players were unsure if they were looking at their profile or their team stats.
Blue Card Headers
Players found the solid blue card headers distracting
Armed with the knowledge gained from our first round of usability testing, my design team met with GG Leagues to go over our first round of mock ups. In the meeting, we met with GGL’s software development team for the first time and confirmed that our designs fit within the team’s engineering skill set. The meeting ran smoothly, however, GGL noted that we didn’t have any mobile screens included in our mockups.
Remember what I said about assumptions…
Well, it turned out that mobile mockups were part of GGL’s goals for this project. We now had the daunting task of scaling our desktop mockups down to mobile screens.
The Final Boss
In the week-long sprint following our meeting with GG Leagues, our design team was able to create mobile mockups for each of our existing desktop mockup screens. We were also able to iterate on our original designs and solve the user frustrations discovered during our first round of usability testing.
Key Desktop Updates
1. Removed the purple background and used collegiate color logos for better visibility on the landing page
2. Made labels more descriptive
I.e. Changed “Player Stats” to “My Stats”, labeled teams “My Team” and “Opponent” in the “Next Match” cards
3. Removed the distracting blue background from the card headers.
Mobile Mockups
ENDGAME: Client Delivery
With our updated desktop screens, our team created a revised high fidelity prototype in Figma and conducted a final usability test with 6 participants.
Here are the key findings:
83% of Participants preferred the new mockups over the original site screens
The new site is easy to read and navigate
The average difficulty rating of the mockups was 1.25 of 5 (1 being very easy and 5 being very difficult)
BONUS ROUND
Light Mode!
With our main mission of designing new and effective mockup screens for GGL’s site, my design team wanted to circle back to the style tile test results. While dark mode was favored by 63% of participants, 30% favored the lighter color palette. My team was very efficient in our work and had some extra time on our hands, so we designed a light mode version of GGL’s dashboard.
We handed this screen off to GGL’s software developers in the hopes that it might serve as a foundation for a light mode of the site in the future.
Logo Redesign
While working on GG Leagues’ mockups, I was distracted by their current logo. I liked the overall typography and shape, however it appeared that the “Leagues” typography used a bevel and inconsistent typography style that made the logo feel jarring.
GG Leagues Original Logo
Even though my UI design team was not commissioned to redesign GG Leagues’ logo, I decided to work on a new logo concept in my spare time. I felt the original design was already aesthetically pleasing and conveyed GG Leagues’ futuristic aesthetic, so I focused on removing the bevel and cleaning up the inconsistencies in the “Leagues” typography. I used the vector pen tool in Figma to retrace the logo and rework the letters, removing the bevel and creating a more consistent style from letter to letter.
My Redesigned Logo
Before showing the new design to our client, I tested my new logo against the old logo on usability hub to ensure it was user-preferred. My new logo was preferred by 80% of the 41 test participants.
My Logo Redesign Preference Test Results
Once I had strong quantitive data backing my new design, I showed my new logo along with my test results to our client at our last sprint meeting. They were very excited about my redesign and asked for SVG and PNG copies so they could update the logo. I couldn’t have been happier with the results!
The Handoff
Along with our final screens and Figma project file, our team also delivered a high fidelity prototype and comprehensive style guide to GG Leagues. Our style guide carefully and meticulously maps out every element of GGL’s new site designs, from the rules and proper use for our redesigned logo to the exact padding measurements for our card layouts.
Upon our product delivery, GG Leagues voiced their excitement and satisfaction with our mockups and prototype. They also noted that some of our test participants were already bugging them about our new screens and couldn’t wait to see them up on GGL’s site. My team and I couldn’t have been more proud!
Style Guide
Lessons Learned
Be as Specific as Possible
Labels and descriptions should be self explanatory and leave no doubt in the users' mind as to what they are reading and interacting with.
Trust in Yourself and Your Team
Collaboration in design is key and no one designer can tackle a project alone. Your design team is there for support, feedback, and validation.
Be Thorough and Plan Ahead!
Make sure you go through all goals and expectations with your client before beginning a project. Make sure every detail is covered so you encounter no surprises late in the game.