×

hi, contact me

Client – GLHF.gg

An esports platform for the competetive

My role – UX and game designer
Period – Dec 19 - Feb 20
What – Website

GLHF.gg started out as an esports hub that gathered esport streams and tried to elevate the experience beyond just watching a stream by adding games and trivia. We were brought on board when it was decided that to keep growing in a sustainable way, the focus needed to be shifted from watching streams and betting on esports towards an experience where esport fans and teams can engage with each other.

The original site was monetised by acting as an upper funnel for GLHF.gg to engage an audience and push them towards their esports betting plattform. The new site instead focuses on filling the need of the professional esport teams to monetise their fanbase, as well as giving the fans an experience where they can use their knowledge of esport to compete against other fans and cheer for their favourite team. I was working at LH+P when we got the mission to do the new site’s game design, UX, UI as well as experience and product design. The last part as part of a team consisting of product owners and team leaders from GLHF as well as designers and leads from LH+P. I was tasked with working on game design.

What even is this game?

Early ideas drawn on a whiteboard

It was pre-decided that we would create a trivia based game in which you compete against other players for rewards. The idea was to connect players with their favourite esports team, and pitting fans of opposing teams against each other. Some of the rewards system was in place as well; mainly that professional CS:GO teams would do shout outs for individual players and participate in the game on certain levels.
Market research was done by GLHF and expanded upon by a team at LH+P by doing competitive analysis of other esport plattforms. Interviews with former users, esport fans and esport professionals was also done, and eventually synthesised down to personas. From that we drew a couple of conclusions important to game design:

  • Gamers and esport fans like knowledge based games, but they need to be more than just answering questions.
  • The social aspect is important. Whether you’re playing friends or people you don’t know you want the bragging rights.
  • The fans have a closer connection to the individual professional players than the teams they play for

Working at the overall game design, we started by distilling our findings down to an effect statement. What is GLHF 2.0, and what does it offer the users in terms of engagement, activity and fulfilment?

“GLHF 2.0 Creates engagement, activity and fulfilment by connecting esports fans to their teams, letting them compete against each other and other teams in games for prizes, glory or just for fun.”

The arena

When creating game loops it can sometimes be beneficial to think in parables. In our case we were creating a competitive game in which you fight for your team against other teams, so the obvious metaphor for us was that of an arena, or a colosseum. An arena consists not only of the arena itself, but also the rooms and areas surrounding it. Locker rooms for preparation and team building, corridors leading to and from the field acting as both anticipation and “decompression”, and of course the bleachers where you can watch how others are doing. From that idea we constructed a simple game loop, the core parts of GLHF 2.0.

Using an Arena as a metaphor

1. Dashboard (Locker Room/Bleachers)

The primary goal is to get the user out of the locker room and into the arena, where the action happens. It is obvious and clear to the user what they need to do to advance themselves and their team on the leaderboards. The user feels excited and pumped to do both minor and major activities whether they are huge, monthly events or daily competitions and happenings. The connection to ones team is evident and clear. You are the sixth player (CS:GO Teams consist of five players).

2. Ready Up (Corridor)

We match the user in the upcoming activity while also creating a moment for them to hype, trash talk and interact with other users.

3. Arena

This is where the activities happen. The motor that drives GLHF. The users compete in knowledge based games that gives them and their teams points, badges, loot boxes and bragging rights. Focus is on fun - There’s an action element to the game that keep the users on their toes. It’s Team VS Team. You wear your colors boldly and fight for both your own advancement and that of your team.

4. Decompression (Corridor)

The decompression is where the user move out of the arena games, heading back to the locker room or another game. They get to see their scores, their achievements and open prizes and loot boxes. They also see if they climbed the ranks or contributed to their team.

I compiled the effect statement and the game loop into a basic product map that we ended up comming back to the entire project as a general guide for how to build the game.

Enhancing the experience

Action buttons

Action buttons

Action buttons were implemented with ideas of both offensive and defensive Power Ups that can give you the upper hand in a game. Without the Power Ups we have no sense of strategy or surprise, but when adding them it changes the dynamic of how you play, while also levelling the playing field somewhat. Knowing your trivia is still required, but a less knowledgable player can still give the real nerds a run for their money.

    Some power-up ideas were:

  • Defensive: Time slowdown (additinal time to answer)
  • Defensive: Remove 2 wrong answers
  • Offensive: Freeze (momentarily stop opponent from answering)
  • Offensive: Scramble opponents answers

Round score

To create urgency and connect your success, or lack there of, to a visceral experience I had the idea to visualise the game score with a tug-of-war type bar. The bar sits at the top of the game, and at the start you own half of that bar. Between each round you either keep your area of the bar, lose some of it or take some from the opponent. The goal is to move the center line of the bar towards your opponent, getting your colors to take up more of the bar than your opponents. The bar animates as the score is presented between each round, creating tension and excitement for the player and a clear overview of how they are doing.

Score bar

Progression

The final dashboard design

The sixth player

Gamers and esports fans connection to the teams the cheer for is important, but at the same our data showed that it’s the admiration for the individual players and their skill level that is the important factor to which team you follow and route for. We decided to create a space at the top of the dashboard where the players avatar and nickname are displayed next to images of the players on their chosen team. You become the sixth team member.

Daily objectives give players direction

Daily objectives

The daily objectives section is the central element of the dashboard. To goal is to quickly give the player a reason to get into the game and play. The first three objectives focus on easy tasks to get you going, and the last three that unlocks when you complete the first gives you something a bit more challenging. We also tried several different ways to connect your daily objectives to a larger goal where the dailies are small steps that slowly earn you a place in a larger tournament or just a bigger reward.
 Baked into the objectives are the three main game modes: Solo, PvP and Battle Royale. Or, play against yourself, against a single opponent, or in a large event consisting of hundreds of players.

Social activity

Several ideas where prototyped, tested and implemented to create a social aspect inside the game. Leaderboards that display top scoring players and teams are pretty standard, but we also implemented a highlight module that can show more specific type of stats. Longest winning streak, highest score in the past hour and top players in the last round being some stats. We also implemented an activity feed where you can see your and other team mates activities on the site. It was important to us that players should have some feeling of contribution and success at multiple stages and places on the site. .

A hightlight module features top players