Mobile Gaming Case Study | FleetWit

How my work led to a 15% jump in user engagement for a trivia app.

Casual Mobile Gaming

FleetWit

Product/UX Case Study

Project Summary

About FleetWit

FleetWit was a trivia app developer with a self-titled trivia app. This app had games called Trivia Races where users test their knowledge of trivia topics, in a timed environment, to win cash.

My Role

My role at FleetWit was Lead Designer; I led end-to-end design for all products, including the FleetWit app.

Project Overview

I was asked to redesign FleetWit's look and feel. To do this, I conducted user research, market research, and usability testing to guide my redesign.

Part One

Research

Stakeholder Interviews

What are the business' needs?

FleetWit's most important business needs were user retention and user acquisition. FleetWit intended to eventually sell its apps, which included the users, so having a large user base was integral to a successful exit for FleetWit and its investors.

Who are your users?

FleetWit's users were male and female casual mobile gamers between the ages of 21 and 34.

Customer Research

Learning more about the customer

To learn more about casual mobile gamers demographic, I read up on mobile gaming research conducted by Google and AdColony which provided the following insights:

· 52% play to kill time at work or while commuting.

· 67% are genre agnostic & prioritize entertainment.

· 56% choose gaming apps based on ease of use.

Voice of the customer

To supplement these insights, I read FleetWit's reviews in the Apple store with a focus on critical reviews. For these reviews:

· 43% mentioned the UI's layout being confusing.

· 49% mentioned wanting faster gameplay.

Persona and Journey Map

I used my research to create a persona and journey map that would represent the user group for whom I'd be designing.

Finalizing Project Scope

What customer needs should we tackle and why?

After taking time to understand the customer, I thought a great way to meet the business goal of improving customer retention and acquisition would be to improve FleetWit's gameplay in the following ways:

· Improve the FleetWit app's ease of use.

· Shorten time required to start a game in the FleetWit app.

· Increase FleetWit's entertainment value.

FleetWit User Story:

"As a casual mobile gamer, I want to play a game on my phone so that I have fast entertainment during my down time."

Product Review

Methods used

Once I established the business goals and customer problem to tackle, I conducted a review of the product, which included a UX audit, usability testing, user interviews, and a competitor analysis.

UX Audit

I analyzed the app for usability issues, areas where user needs are not met, and deviations from UX best practices.

Example Usability Issue:

One would imagine that a new user would have to press "+ New Race", to start a new trivia race. However, users need to tap "Accept", to start playing a game.

This is counter intuitive. The primary action new users need to take should be clearly identifiable, rather than mixed into a sea of calls to action.

Example Issue with Meeting User Needs:

In order to play a trivia race, users must select a set of options including a trivia category, a subcategory, a wager, and who they will play with. The time users spend setting up their trivia game subtracts from the time users can spend playing.

In short, this process takes too long for our users who want quick gameplay.

Example Deviation from Best Practices - Apple's HIG

On the FleetWit race page,  the width of answer options deviate from Apple's Human Interface Guidelines on button width, which state that buttons should have space on the left and right and should not touch the edges of the phone screen.

Usability Testing and Interviews

Participants

I recruited seven people from my network to participate in my guerilla usability test. To ensure alignment with my persona, I chose casual mobile gamers who loved trivia between the ages of 21 and 34.

Procedure

For the test, I asked each participant to sign up for an account on FleetWit, play a trivia race, and think out loud while using the app. After having an opportunity to use FleetWit, I asked participants about their use errors, parts of the app that they had trouble with, and parts of the app that they enjoyed.

Below are some examples of my findings.

Home Screen Findings

On the home screen, 6 of 7 participants tried to tap “+ New Race”  to start a game, instead of tapping “Accept”. When asked why, participants reported seeing it first and thought it made the most sense.

When asked about their thoughts on the UI, 5 of 7 participants thought the UI had too many items to click on, making the experience confusing.

Gameplay Findings

Time Penalty Issue

When a trivia question is answered incorrectly during a trivia race, the user's screen is locked for one second, as a penalty. However, the answer options remain visible.

During testing, 3 of 7 participants tried to tap the screen during a one-second penalty after answering a question incorrectly.

When asked why, users reported thinking that they could immediately try a new answer because the options were still visible.

Gameplay Findings

Locating Question Hints

2 of 7 participants had difficulty finding a hint while playing a trivia race.

Instead of being located on screen in the whitespace below the answer options, hints were buried in the HELP menu.

Competitor Analysis

To finish off my research, I conducted a competitor analysis, which included Trivia Crack, a rival trivia mobile app and market share dominator with over 300M downloads and about .5M reviews in the iOS store.

During my review, I noted design ideas that would help to address the needs of FleetWit's users, while also looking for areas where FleetWit could differentiate itself from its competition.

Trivia Crack Insights

Example 1: Speedy Gameplay

With only one or two taps, users are able to quickly and conveniently start a game. This differs from FleetWit's UI, where starting a race requires at least four taps.

Trivia Crack Insights

Example 2: Excessive CTAs

On the home screen, there are 18 elements that a user can tap on, two of which are ads. FleetWit could capitalize on this by providing a simpler interface.

Trivia Crack Insights

Example 3: Consistent Graphic Design

Another area where Trivia Crack excels is its consistent graphic design style. All elements, from screen to screen, utilize the same aesthetic (style, shadowing, line thickness, etc.)

Part Two

Planning

Establishing an MVP

To kick off the planning process, I began thinking of an MVP that we can implement that would allow us to quickly gather data on our design direction. I first listed my hypotheses, then thought of features that we could implement to test each hypothesis.

Hypotheses

For my redesign of the FleetWit app, my hypotheses were as follows:

· Hypothesis 1: FleetWit users want a simpler UI.

· Hypothesis 2: FleetWit users want faster gameplay.

· Hypothesis 3: FleetWit users want more entertainment.

I hypothesized that addressing each of the above would lead to an increase in user retention and user acquisition. Also, note that hypotheses listed above come directly from the three user needs identified during the research phase.

Feature Brainstorming

After listing hypotheses, I thought of lightweight features and updates that we could implement in our MVP to validate my hypotheses.

Testing Hypothesis 1

· Feature: Light redsign of app's interface

· Design Effort: Low, 1-3 days

· Tech Effort: medium, 1-2 weeks

Testing Hypothesis 2

· Feature: A quick race button leading to a "coming soon page"

· Design Effort: Low, 1 hour

· Tech Effort: Low, 1-3 days

Testing Hypothesis 3

· Feature: UI Animations

· Design Effort: medium, 3-7 days

· Tech Effort: Medium/high, 1-3 weeks

Based on the low tech and design effort, I thought Hypothesis 2 would be the best hypothesis to test. We could quickly gather data by measuring taps on the "Race Button" before investing weeks of time developing that feature.

Wireframes

I created low-fidelity wireframes and a wireflow to plan out the new screens and ensure that all paths through the new FleetWit app were accounted for.

Part Three

Designs

FleetWit's North Star

To satisfy the stakeholder request for a new look and feel, I created a redesigned FleetWit app, which included new icons, and UI animations for the race portion of the app, which I created using Adobe After Effects.

The FleetWit MVP

To test whether users were interested in a quick race (Hypothesis 2), I proposed the following MVP, which would require minimum design and development effort. To gauge whether users were interested in a Quick Race feature, I thought a great KPI would be track the number of times that this button is tapped.

B2B Portal Design Process

Results

The team was eager to completely revamp the FleetWit UI. As such, we decided to complete the full redesign. After launching the redesign, we saw a 15% increase in user engagement, measured by number of games played in the FleetWit app.

Revisiting FleetWit

This was a fun project, however we had a tight timeline and many design constraints. Looking back, with more time, and more control over the colors used for the design, I would design something more like the following: