High School Esports League
UX + UI design, responsive design
〰️
Restructuring the tournaments flow + branding for esports platform.
Overview
The Client
High School Esports League (HSEL) provides a platform for high school esports clubs to register in organized tournaments and compete against other schools in the nation.
My Role
Product Designer in a team of nine designers, with a focus on the “Tournaments” flow and branding.
Problem
Esports are on the rise, and HSEL is one of the first platforms in the market to introduce organized competitions to high schools. HSEL is still in its MVP stage, and current users have had a lot of trouble with site navigation and registering for tournaments.
My role was to help rebrand the website and streamline the process of finding and joining tournaments. In the span of eight weeks, I researched, ideated, prototyped and tested, and then iterated accordingly.
Outcome
In the end, I restructured the “Tournaments” page, helped improve the user flow to register for game tournaments, and collaborated with the team to rebrand the platform.
Final Tally
We were able to interview current users of HSEL before and after our redesign. Here is a summary of the results:
Preview of the “Tournaments” page before and after the redesign
“Everything has a place. It’s easier on the eyes.
[I] feel more in control and know where to look for information [now].”
—
The Process
01. Research
Diving into the world of esports
To get a sense of the look and feel in the eports space, our team looked into websites that featured esports, such as Twitch, LoL Esports, and Toornament.
After an analysis of the sites, we found that they all had an apparent characteristic in common: they were very visually dominant, typically featuring images and/or icons of popular esports games — a component HSEL evidently lacked. Gaming is predominantly visual, and we wanted to incorporate more imagery into the branding for HSEL.
Insights from current users
We interviewed seven high school teachers, who were current users, to identify their main pain points while navigating through the site. From these interviews, we were able to develop a good understanding of how users typically use the platform, and what they had the most trouble with. We synthesized our findings onto post-its, then mapped them on a 2x2 according to highest impact and easiest to solve to account for our timeframe. The biggest issues we found were:
The information architecture needed to be reorganized; important CTAs were unintentionally “hidden.” Users typically go through several pages before finding the one they needed.
Lists were long and unorganized, forcing users to scroll endlessly or use the keyboard shortcut to find what they’re looking for.
Being an MVP, the UI was not the most enjoyable or easiest to use.
Breaking down the task flow
As a team, we created a user task flow to visualize how a new high school teacher might go about navigating the site. While talking out the flow, we were able to pinpoint where exactly users were having problems, and how to separate these tasks.
We broke into sub-teams for each section, and though we would be collaborating and doing a lot of cross-team work, my focus was on the “Tournaments” flow.
02. Ideate
Design sprint
To begin the process of improving the flow and UI of HSEL, the team came together for a design sprint to brainstorm ideas. Because we were designing for a responsive web, we designed with the mobile-first approach in mind, which would force us to prioritize content and organize the information architecture to fit the smallest screen first — arguably the hardest screen to design for.
We started with a round of Crazy 8’s, which had us rapidly sketching 8 different iterations of a page in 8 minutes. We then shared them with our sub-teams, and iterated the sketches based on the input we received. Taking ownership of the Tournaments’ landing page, I rendered my final sketch into a low fidelity wireframe. I maximized the visual elements by differentiating each game with a card.
03. Prototype and test
The basic flow
Putting my team’s wireframes together, we prototyped the “Tournaments” flow and tested it with mixed results. We would be reorganizing the content to improve the IA, and with that, the efficiency of the whole task flow.
04. Iterate
Branding
Since HSEL is still in its MVP stage, there wasn’t a set style guide that the site abided by. Sticking to similar themes in the esports realm, I helped curate a darker color palette for the platform and finalized typography that is easy to read, with slight accents throwing back to old school video games.
Going hi-fi
Using the style guide, we turned our wireframes to high fidelity mockups, and converted the mobile screens to web. We again tested our screens with the same teachers to iron out the kinks before delivering them to our client, and they were extremely excited with the changes. Here are the before and after screens of the “Tournaments” flow:
Final Thoughts
With no prior experience designing for — or much knowledge, frankly — about esports, I was initially afraid I won’t be able to design well for them. But that fear quickly dissipated as I reminded myself to think more holistically and see HSEL simply as a platform for users, who happen to be high school teachers and students. By identifying similarities between other esports platforms, as well as interviewing current users and getting feedback from our clients, I was able to get a good handle of how to approach the design. In the end, it really is about understanding the users, and designing a good experience for them, albeit the platform.
Another fun challenge was turning an MVP into a more fleshed out user experience. Ideating ways to transform endless lists and hidden CTAs into what we ended up with: easily identifiable game cards, was one of my favorite parts of the project. The visual imagery completely revamped the pages, making them simpler and more enjoyable to navigate — and thus, improving the user experience.
