IMG_3083.png

GamingFrog

Fine-tuning the Onboarding of an Esports App


PROJECT OVERVIEW

Client

GamingFrog lets players bet against each other in head-to-head esports competition, with a current focus on the football game FIFA. GamingFrog is dissatisfied with the churn rate of their app, and wants to redesign their experience to get people playing quickly, and keep playing. I was tasked with examining the onboarding portion of the app, specifically.

Tools

  • Figma

  • Miro

  • Otter.ai

  • Useberry

Duration

2 weeks

Problems

  • Our players are cautious because they will be gambling their money using our product.

  • Players are frustrated by over-long sign up processes.

  • A lack of interest, caused by long waits, or even the perception of long waits, is turning users away from our app.

Solution

The final prototype’s main features are storyboarded animations designed to excite users, and a minimal number of screens, meant to speed users to the part of the app they are meant to enjoy, and that generates value for GamingFrog.


Research

Secondary Research & Competitive Feature Analysis

GamingFrog is similarly featured in comparison to other betting apps, but currently supports only one game, where their two main competitors are generalists.

Market Positioning Chart

I believe that if GamingFrog improves the appeal and user base of their app, they could create the definitive meeting place for players of FIFA, and that narrow focus could become an advantage, allowing them to make the best experience for those specific players.

User Survey

GamingFrog assisted me, distributing a survey to its users via newsletter, so that I could learn what users currently feel about the app, and FIFA. For example, this survey made me realize that any player who would bet money on FIFA is likely to be a hardcore (frequent) player.

User Interviews

I interviewed players and staff to pick their brains as to what needs to be addressed in regards to the app’s onboarding process. I got the feeling that the churn rate was annoying the most loyal players. It seems that they prefer GamingFrog’s customer service to other apps, but are having trouble quickly finding matches.

User Journey Map

Screen Shot 2021-06-06 at 9.44.45 PM.png

This user journey map presents the scenario of how a user would move through onboarding. This details both what they need to do, and how they feel while they do it. This helped me identify potential areas of improvement.


Design

Ideation

The problems identified both by my research and the brief are relevant to the whole app. I limited the focus of my brainstorming to solutions that could be implemented in the onboarding phase, the portion of the app that I was tasked with improving.

Feature Prioritization

I arranged my brainstormed ideas into this matrix, a MoSCoW method chart, which splits up the ideas into “must-haves”, “should-haves”, “could-haves”, and “won’t-haves”, based on their feasibility and potential value.

Minimum Viable Product

Having winnowed down the ideas to just the ones I’m most confident in, I can start to describe the product:

In a limited amount of screens, users will be quickly acquainted with the functions of the app, and signed up (with options to sign up via, Facebook, Twitter, etc). After being excited by the animation, copy, and user testimony, players will be dropped into the matchmaking portion of the app, ready to have their first game.

Job To Be Done

When making a bet, a player wants to have trust in the app, so that they can can expect quick games and payouts, which makes them feel excited.

User Flow

Before prototyping, I created a flow describing what I want and expect users to do. This way, I know what screens I intend to prototype and what kind. For example, I let the first introductory screen be both expansive, or, optionally, brief by using slides.


User Interface

Lo-Fi Prototype

IMG_3083.png

I started working on paper, drawing out the screens and buttons. Most of the testing for this and the subsequent prototype was brief. I know the appeal and value of the design would have to lie in the visual and copy, but it was important to confirm that potential users knew how to interact with the design.

Mid-Fi Prototype

Screen Shot 2021-06-06 at 9.47.01 PM.png

For the next prototype, I brought it into digital and conducted tests over the web. These tests exposed that I had not included a way to navigate backwards from the signup and log in screens, which was corrected in the next version.

Brand Attributes

Between my own research, and a conversation with a GamingFrog co-founder, I chose the following attributes as my goal for how my design ought to feel:

-Exciting

-Animated

-Informal

-Trustworthy

GamingFrog Design System

Screen Shot 2021-06-06 at 9.49.11 PM.png

In addition to brand attributes, the other guide for my visual design process was the existing GamingFrog design documentation. I used these pattern libraries to execute the design that was consistent with their brand.

Hi-Fi Prototype

Screen Shot 2021-06-06 at 9.48.25 PM.png

The final prototype’s main features are storyboarded animations designed to excite users, and a minimal number of screens, meant to speed users to the part of the app they are meant to enjoy, and that generates value for GamingFrog.


Success Metrics

  • Increase Daily Active Users

  • Decrease Churn

  • Decrease time on Task

  • Increase the amount of bets/matches

Next Steps

  • Finish Animations

  • A/B Testing Animations, copywriting

  • Desirability testing for adherence to brand attributes