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 at FleetWit was Lead Designer; I led end-to-end design for all products, including the FleetWit app.
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.
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.
FleetWit's users were male and female casual mobile gamers between the ages of 21 and 34.
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.
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.
I used my research to create a persona and journey map that would represent the user group for whom I'd be designing.
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.
"As a casual mobile gamer, I want to play a game on my phone so that I have fast entertainment during my down time."
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.
I analyzed the app for usability issues, areas where user needs are not met, and deviations from UX best practices.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.)
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.
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.
After listing hypotheses, I thought of lightweight features and updates that we could implement in our MVP to validate my hypotheses.
· Feature: Light redsign of app's interface
· Design Effort: Low, 1-3 days
· Tech Effort: medium, 1-2 weeks
· Feature: A quick race button leading to a "coming soon page"
· Design Effort: Low, 1 hour
· Tech Effort: Low, 1-3 days
· 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.
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.
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.
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.
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.
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: