Mobile optimization Coming Soon
Best Viewed on larger screens
From Animation to Product Management to UX Design - I’ve been helping people navigate the world through research, analysis and delight.
Let’s get right into it
Core Team
UX Designer
Ui Designer
Data Analyst
Frontend Developer
Project Duration
3 Months
Company
My Role
Product Manager with a UX Mindset
Responsibilities
Project Ownership
User Research
Competitive Audit
Information Architecture
User Flow
Initial Wireframes and prototypes
Final design and functionality approval
Tools
Miro
Figma
Photoshop
After Effects
The Setup
What is Missions?
Missions is a series of mini-games that asks players to complete certain type of activities in a slot machine, like spin 100 times or win 1,000 coins, for various in-game rewards.
It was a brand new feature that was already developed on the backend before I joined the organization, and it fell to me and my team of designers and frontend engineers to find a way to introduce this feature to our player base.
The Problem?
How can our team find a home for Missions in an already very busy screen space while keeping engineering complexity to a minimum given that:
We don’t want to disrupt existing user flow - Our slot machine game has a strong core user base that’s used to a very specific navigational flow and gaming experience.
No option for a major UX/UI redesign - Our frontend code in charge of ui is older than the tenure of all of our engineers combined and any talk of serious ux redesign was shutdown by our lead engineer.
Users & Competitors
Users
Since the product was more than nine years old, the ux research team was very familiar with our players, and from their previous research already knew that our audience would enjoy this game feature, but they still offered 2 key insights:
One caution was around the average age of our players 50+ which we explored during ideation phase.
This audience expects a similar aesthetic to slot machines.
We also agreed to do a usability study once Version 1 was ready to go. (See A/B test below).
Competive analysis
I’ve worked with the Competitive Insights Team to find gaps and opportunities in both direct and indirect competitors.
Almost immediately, we saw a glaring issue around our ui design - most newer games had mostly horizontal orientation (or allowed for both) while our old game was locked to vertical only orientation which made adding extra content difficult without redesigning the entire ui.
Looking through large number of titles we came across what I thought it was a good solution to our problem that can create a top line entry into the feature with minimal impact on gaming space - a pullout tray. And this was my ideation starting point.
Ideation & Rush to V1
Thinking about our players’ needs and our engineering restrictions, I created a Design Document for the development team. Which highlighted important information, including:
Information Architecture.
User Flows, Happy Paths and variety of edge cases.
Specific instructions for the UX Designer to take into considerations like the accessibility surrounding the age of our player base.
My initial Designs
I really liked the Tray concept we found during a Competitive Audit because it allowed us to shrink all that was Missions into one small button. Location for the button was a challenge, but UX Designer and I decided on the space next to the burger menu simply because it seemed unobtrusive.
I also wanted to make sure that the players understood their progress without having to open the pop-up menu, so I both branded the Mission event icon and included a radial progress tracker with 3 different states - no progress, some progress, and completed.
I explored how the player could navigate the Missions experience:
Access to the main Missions Pop-up Window.
Additional event information like progress, event timer and ability to claim rewards.
And general player journey.
Three V1 Candidates
Candidate 1 - The Tray
The simplified tray would be placed next to the “burger menu” and on tap or drag, would slide out to reveal all the missions currently available, and tapping on one icon would open a corresponding mission’s pop-up that would display further information and calls to action.
Pros
Doesn’t block the main game screen.
Ticks 2 boxes at once. A. Simple design that brands each mission distinctly and B. acts as a progress tracker.
Allows the team to run more than 1 mission event a time.
Cons
Med-Large engineering and design scope.
Tray location is inconsistent between the lobby and the slot machine (not shown).
Limited space to add more missions if we wanted to.
Potential button interaction interference between the “tray”, the “burger menu”, and “invite” buttons.
Pros
Less engineering and design time.
Mission Progress is immediately visible.
One less step to collecting a reward for completing a mission event.
Cons
Interferes with “invite” and “burger” menu buttons.
No clarity on what the progress bar actually tracks.
Limits access to only one mission at a time.
Candidate 2 - Burger Menu
We would add an access point to the missions in the existing burger menu, at which point the flow would remain the same: open the main Missions pop-up and collect rewards as usual.
Moving Forward
Pros
Addition to the “burger menu” would feel more native to the overall experience.
Cons
No immediate Missions progress or even Missions availability visible
Limits access to only one mission at a time
Buries the Missions - a brand new, fun feature - into a “dead” and “unexciting” space. Players would already be familiar with this navigational flow and would potentially dismiss this feature.
After reviewing the 3 options with both the team and upper management, we decided to release V1 of the Missions with candidate 3 - “The Bar” because it was the options with least amount of work compared to “the tray” and had more visibility than the “burger menu”
The version would also be bare bones and would only include:
A single Missions event with a few activities to complete.
Upon completion the player would be able to collect their reward, and at which point the event would disappear.
Candidate 3 - The Bar
The progress bar would display progress toward a specific mission that’s tied to a specific machine and mission, and tapping on the bar would again, open a corresponding mission with more information like in the example above.
Rush to V1
Even though the team felt good using my designs as a starting point, we needed to release this feature sooner rather than later.
And so, after some back and forth between myself and the team we came up with 3 design candidates.
A/B Testing the MVP
We knew that the feature wouldn’t be received very well given the design of “The Bar,” so to maximize feedback while lessening the negative reception, I designed a quantitative and qualitative data set to gauge the release of the feature.
I Created an A/B test that would analyze engagement, progression funnel, and monetization of players that received our Mission and those that didn’t.
I Worked together with UX research team to create a usability study to gain insights on how well players understood our feature.
I Reviewed customer support tickets and user reviews to ensure I was hearing feedback directly from the players.
A/B Test
The a/b test was simple - pick a random set of 10% of our total player base and turn on the Missions event for a 1 week. Then pick another 10% random set of players to compare against that did not receive the event, and the rest of the player base were a holdout group. The KPIs I wanted to look into were:
Percentage of players that completed at least 1 activity in the Missions event.
Percentage of players that claimed the last reward for the last activity in the event.
Comparison of ARPUs (Average revenue per user) between the 3 groups.
Comparison of spins between the 3 groups.
Usability Survey
I spoke with our ux research team and provided an outline of questions and concerns that our team had regarding this feature, and the type of feedback we were looking for. The survey went out to all players that received Missions from the a/b test.
CS Tickets and Player reviews
I’ve asked our CS folks to forward all the tickets around Missions to our team and I personally reviewed all player reviews on Google Play and Apple’s App stores.
Results
The feedback that we received was not positive.
The results of the A/B test showed that only ~15% of the people engaged with the feature, but the the players who did play Missions did end up spinning ~10% more than those people that didn’t engage with the feature or didn’t receive the feature in the first place.
Ultimately, after reviewing both hard and soft data, we landed on 2 general insights which we used to iterate on our design.
Insight 1 - Confusion around the bar
Many didn’t know what the bar was tracking
Players didn’t know that the bar was a button as well.
Small number of player’s were confused about whether or not they collected their rewards.
And most negative feedback was around “mistaps” - players wanted to tap either the “burger menu” or on the “invite button” but ended up tapping on the bar.
Insight 2 - Visual disruption to the game
While the first insight was begging for more information, the second insight showed that players wanted to really focus on slot play and not stare at a progress bar or be distracted by high level of animation.
Ideating on the 2nd version
Landing on the Tray
We chose to focus on the “tray” over the “burger menu” because:
“The tray” was more visible and player’s didn’t have to look for the feature.
“The burger menu” contained 6 other buttons, we didn’t want our players to “mistap” the way they did during the a/b test.
We also liked the “the tray” because it allowed us to consolidate a lot of information into a small location - the way a typical “burger menu works” - and limit the disruption to the core gameplay.
However, the original tray concept shared a couple of issues with the “bar”, and so we decided to:
Move the tray to the left side of the screen. This completely eliminate any potential “mistaps” between our existing buttons - addressing one of the more critical player feedback.
Moving the tray allowed us to make the tray taller, wider and gave it the ability to scroll. The team now could add more missions. And importantly for the players, we made the mission buttons bigger and easier to interact with - helping people with poor eyesight gain a little more visibility into the feature.
Original Tray Version
Focusing on our 2 insights from the a/b test, we decided to go back and look at 2 remaining concepts once more - they tray and the burger menu.
Missions’ Icons
1. With the bar option, there was only one mission available to players, with many missions, players needed to know which Mission they were playing. And so it was important to brand each mission to make them visually distinct. During Mission re-runs players would already know what to expect.
2. Each mission progress had to be tracked and displayed separately with different states depending on player progress.
Notifications
Lastly, we focused on player in-game notification.
We created a “flyout” that would appear anytime a player made significant progress toward their reward.
We popped notification badges for both individual Mission icons and for “the tray.”
Current Version*
Placing the tray on the left side of the screen did mean that there would be some visual disruption to the main game screen; however, it was a reasonable sacrifice since:
“the tray” will always be closed unless actively opened by the player,
and since the slot machines play from left to right, the anticipation of a successful spin builds from the left reel to the right reel, making the very left reel much less important if it’s slightly obscured.
I also went through every single slot machine in our game to make sure that the position was optimal.
The Mission Pop-Up
The mission pop-up performed fairly well during the a/b test, so we just made a few tweaks:
We made the activity language a little more clear - specifying which activity can be completed where.
We added an information pop-up with a link to a wiki with more explanation.
Creating a celebratory animation confirmation with it’s own pop-up for when player’s collected their reward to minimize confusion further.
Prototype
If you’re curious, you can play around with the prototype here.
A/B Test Version
Results, Next Steps & Summary
The tray performed extremely well.
Engagement went up to nearly 85% from ~15% and all other metrics like number of spins and arpu went up as well. All in all, the feature and all the UX and Ui changes that the team implemented worked great.
But there is always room for improvement.
Users continued to complain about visual disruption, and the we still haven’t quite worked out how to properly display player progress toward both the entire Mission or a specific activity. One tweak we did shortly after release, was to lessen the number of “flyouts” we displayed by 30% to keep player focus on the core gameplay.
Before I left the company, upper management was more willing to allocate more time and resources to potentially redesign a lot of in-game UX given Mission’s success.
Appendix
Results
Results of the study outlined here are as close as I remember them and are +/- 10% approximations.
Recreated Images
I recreated most of the images and all prototypes as I remember them when my team and I were working on this project.
Unfortunately, since I left the company to transition into a new role, and before I decided to commit myself to UX Design, I didn’t save and no longer have access to that work. But in order to explain and present a complete case study, I rebuild some of the assets simply as a way to ensure clarity and consistency of message.