top of page
  • Twitter
  • LinkedIn
  • Instagram

Building a game event system

Role:

Lead UX/UI Designer

Timeline:​

2 weeks (initial design)

6 months (refinement and iteration)

Team:

UX/UI Designer (1)

Front End Developer (1)

Back End Developer (2)

CTO / CEO

Product Manager (1)

🧑‍🎨 Project Overview

I joined Smerf at an exciting time, right as we began transitioning to a core product market fit with an innovative game-integrated event system, which allows players to complete light-hearted and fun challenges in-game to unlock various rewards, all while tracking their progress in the app.

Before me

As we were transitioning to Smerf’s product-market fit of creating a game-integrated event system, Smerf’s legacy event-system design was outdated and needed a new makeover. Being brought onto the team, this was my first task.

Challenge

How might we...

...create a holistic event-based experience that encapsulates all the different types of challenges, with general restrictions to prevent loop holes for our userbase?

Opportunity

Product Research + User-Feedback

Due to the team’s limited resources and funding, I adopted simple strategies to create a foundational outline. With the help of the Heuristic Evaluation, 30 beta testers and Mobbin, I was provided invaluable feedback and identified areas for interface improvement.

Redefining Events

(Old Design)

My first mockup began with the event details screen. The older design (right) that was utilized before I was introduced to the team lacked a level of visual communication (after conducting a Heuristic Evaluation). We've had many valuable feedback from beta testers that revolved around this screen.

Old Event.png

Smerf (Beta)

(Old Design)

"So, what is a gaming event?"

Identifying Design Requirements

I began cracking this challenge by asking the simple question of: "What is a gaming event?"

Revisiting this feature with consideration of its users helped myself navigate the core features of this gaming event.

 

The initial feedback provided from users was that the legacy design lacked information on entry requirements, the rewards that were given and the user's progress within that event. They had also said that the overall UI structure did not convey the excitement of a "fun gaming event".  

After user-feedbacks, the next of this process continued with in-depth product research, on a broad spectrum of potential competitors. One big question I asked that helped guide my competitive analysis was: "How can I design an all-inclusive gaming event that appeals to various types of gamers?".

Fast forward to the brainstorming phase and synthesis, it became clear that the event framework needed to incorporate robust event "templates" including entry requirements, to cater to a wide range of audiences. Some of these examples are eSports teams, collegiate teams and major communities led by content creators.

Diagram Event Types.png

Event Details

Things are getting spicy!

Here is my first redesign of the existing "Event Details" screen. Most of these updated changes were key findings from the research phase.

One major feedback that influenced this fresh new design was that the legacy design lacked information and failed to convey the excitement of a "fun gaming event", which in response I added more visual context with a progress bar, rewards as well as a dedicated tab for the participant's progress within the event.

Frame 9059.png

Developing this segment of the event system heavily relied on my knowledge of various genres of games. (I guess video games were useful after all!). For instance, what challenges can be crafted for a sports title like PGA 2K23, a competitive first-person shooter (FPS) like Valorant or Counter-Strike 2, or even a multiple online battle arena (MOBA) like League of Legends and Dota? Understanding the fundamentals of each game and their player base, I was able to outline the essential stats, challenges, and rewards that would motivate and engage players of all kinds. This deep insight allowed me to create the challenges themselves, but also the UI for the events that are enjoyable and rewarding for players of all kind.

Event Details Banner.png

EVENT DETAILS

ENTRY REQ. | TEAM MANAGEMENT | REWARD CLAIM

While designing "events", I not only enhanced existing concepts but also introduced new ones. The 'event join requirements' system already required basic steps to participate in events. However, with the introduction of new event types, I added an innovative layer to this system.

Frame 9060.png

We also made sure to prioritize players who like winning, but also players who like having the company of friends - staying true to Smerf's commitment to making gaming enjoyable for everyone.

To enhance this experience for teams and communities alike, I included key elements like the invitation system, team creation and management system, all into a cohesive system in itself, from the 'entry requirements' flow.

For community-based events, users can choose from a selection of communities to represent during the event - which can also be found through the 'entry requirements' flow.

Event Tab

A new addition

You may be asking yourself where will all of these events live?

New users navigating Smerf's events for the first time may be quite a daunting experience.

To ease this transition, I designed a dedicated space for all events, which will help users find their way to join events effortlessly.

This new screen showcases all ongoing and upcoming events and provides a personal space for users to track their participations. This design decision lifts the heavy burden of navigation, all while ensuring users that they can easily find and engage with events as they please.

Frame 9058.png

Integrated Game Adaptations

Adding the sprinkles

Frame 9065.png

Creating UI that fits well with these integrated games allowed player base of all kinds to easily familiarize themselves with what challenges and tasks were expected of them.

354010033_2482823278555268_6230355725719265253_n.jpg

Year in review (2023)

Smerf PGA2K START.png

Conclusion

Working with Smerf was such a treat. Everyone was absolutely talented and contributed heavily into the final MVP of what Smerf has become.

Embarking on my first major project as a solo UX/UI designer has also been an incredible learning experience. I had the opportunity to apply a wide range of ideations and concepts to a system that resonated within me, given my background as a former eSports Event Manager working for Microsoft Gaming, and my passion for gaming in general. 

As I look ahead, if I were allowed to further develop this core feature, I would propose introducing a sub-section for competitive gaming, which involves a bracket system and events that are tailored to pro-league tournaments in various competitive games.

Thanks for making it this far!

Please feel free to email me to learn more about my thought process of this case study. Thank you.

bottom of page