INDUSTRY:
MOBILE GAMING
CLIENT:
KNOCK KNOCK GAMES
YEAR:
2020-2021
EXPERIENCE:
UI/UX, ADS, INTERACTION DESIGN, ANIMATION
Design Master
about.
Design Master is a Facebook/Mobile free-to-play game that mixes social casino and home decorating game mechanics. I joined this project after a rough Alpha version had been created and provided UI/UX support for the game using the style guide and icon art created by the Principle UI Artist. I used analysis of play tests and competitor games as well as user metrics to ground my decision making.
I also created animated user acquisition advertisements for the game which were used on online platforms like Facebook.
challenge.
When I first joined the project, the game was struggling with poor performance metrics including a low tutorial completion rate and very few daily active users (DAU). Working within the style guide created by our Principle Designer, as well as getting illustration support from her, I designed new and refined existing UI and UX within the game.
game mechanics
Social Casino
Decorating
Free-To-Play
animation and interaction designs
User Acquisition Advertising
User Acquisition Advertising
User Acquisition Advertising
For this project, I was responsible for short, animated advertisements for the game on online platforms such as Facebook and Google. This is an example of one of the ads, but I created many more than this. I was involved in strategizing content based on how the ads performed using data analytics. I used in game footage and custom animations using After Effects.
Interaction Design
Interaction Design
Interaction Design
The game needed an animation to connect the two different game mechanics and show the movement between the social casino space, slots, and the decorating space below.
We collaborated to create a sky metaphor, where the player is moving from the slots up high and then going lower to the room on the ground. The bouncing effect of the UI is fun and the icon on the control changes to communicate to the player which mechanic they can switch to.
I designed the animated transition between different game screens using Principle, a prototyping software that allows for great animation control when creating prototypes. I then worked closely with engineers to help implement it.
The game needed an animation to connect the two different game mechanics and show the movement between the social casino space, slots, and the decorating space below.
We collaborated to create a sky metaphor, where the player is moving from the slots up high and then going lower to the room on the ground. The bouncing effect of the UI is fun and the icon on the control changes to communicate to the player which mechanic they can switch to.
I designed the animated transition between different game screens using Principle, a prototyping software that allows for great animation control when creating prototypes. I then worked closely with engineers to help implement it.
Bet Function - UX/UI Case
Why isn't this mechanic being used?
Why isn't this mechanic being used?
Why isn't this mechanic being used?
Our Bet mechanic allowed players to bet double or triple the amount of energy when spinning the wheel. In this game, they had a limited amount of energy to use to spin the wheel. Once they ran out, they had to buy more to keep playing. The feature allowed players to move through the game more quickly. I noticed in play tests that players were not using this feature, and so I saw an opportunity to refine the design.
Our Bet mechanic allowed players to bet double or triple the amount of energy when spinning the wheel. In this game, they had a limited amount of energy to use to spin the wheel. Once they ran out, they had to buy more to keep playing. The feature allowed players to move through the game more quickly. I noticed in play tests that players were not using this feature, and so I saw an opportunity to refine the design.
Help the players find it.
Help the players find it.
Help the players find it.
After researching competitors and watching play tests, I changed the location and colour of the Bet button to be more prominent on the UI. I did this because, based on play tests, I suspected that players were not noticing the button. Secondly, I added more feedback to the button to communicate its function but to also create “delight”. The feedback was an animated pop out banner that explained that all rewards from the wheel would increase by x amount. The design iterations were inspired by what I saw during my competitor research and designed to match our existing design style.
After researching competitors and watching play tests, I changed the location and colour of the Bet button to be more prominent on the UI. I did this because, based on play tests, I suspected that players were not noticing the button. Secondly, I added more feedback to the button to communicate its function but to also create “delight”. The feedback was an animated pop out banner that explained that all rewards from the wheel would increase by x amount. The design iterations were inspired by what I saw during my competitor research and designed to match our existing design style.
Help the players understand it.
Help the players understand it.
Help the players understand it.
I also noticed some confusion in play tests where players didn’t understand how the Bet feature affected the social mini games. So, after competitor research, I added some UI and animations to communicate this. A banner similar to the wheel screen is shown here explaining the reward multiplier and the reward amount on the card animates a quick count up, communicating that the rewards are being increased to the player.
The results of this work was incredibly positive! Now players were consistently using the Bet mechanic and they were very happy and excited while doing so (“Woo! Big Money!” - A delighted player).
I also noticed some confusion in play tests where players didn’t understand how the Bet feature affected the social mini games. So, after competitor research, I added some UI and animations to communicate this. A banner similar to the wheel screen is shown here explaining the reward multiplier and the reward amount on the card animates a quick count up, communicating that the rewards are being increased to the player.
The results of this work was incredibly positive! Now players were consistently using the Bet mechanic and they were very happy and excited while doing so (“Woo! Big Money!” - A delighted player).
Design/Research Problem: Wheel vs. Slot Machine
When I joined the project, the game centred around a mechanic where players would spin a wheel to win rewards that they could use to decorate a virtual home. This main mechanic had been fully built out and was in the live version of the game. One of the questions the team was grappling with was whether a slot machine would be a better social casino mechanic to use.
When I joined the project, the game centred around a mechanic where players would spin a wheel to win rewards that they could use to decorate a virtual home. This main mechanic had been fully built out and was in the live version of the game. One of the questions the team was grappling with was whether a slot machine would be a better social casino mechanic to use.
Roulette Wheel Based Game
Slot Machine Based Game
Why is this a problem?
Why is this a problem?
Why is this a problem?
As part of our development process, we conducted regular play tests using the online tool PlaytestCloud. The game was really struggling to find and retain players and had a high churn rate. One of the prominent issues myself and the team noticed when watching these play tests, was that a large portion of the players hated spinning the wheel. This was a problem, as it was the main mechanic of the game! There was frustration and confusion on the team as the decision to use this mechanic had been based on player surveys. Isn’t this what they wanted?
Collaborated with a UX Researcher and Content Producer Leads
Recruited 100 dedicated "super users" to partner with throughout the process
Prioritized the story workflow as the first area of focus to introduce research practice with minimal disruption
Approach
Guided interviews with participants from News and EFS, selected to represent diverse producer needs
Contextual inquiries: on-site shadowing to observe producers in real time
Interview Goals
When and why producers use the story workflow
Current pain points and workaroundsHow they expect the workflow to evolve with new organizational goals
Collaborated with a UX Researcher and Content Producer Leads
Recruited 100 dedicated "super users" to partner with throughout the process
Prioritized the story workflow as the first area of focus to introduce research practice with minimal disruption
Approach
Guided interviews with participants from News and EFS, selected to represent diverse producer needs
Contextual inquiries: on-site shadowing to observe producers in real time
Interview Goals
When and why producers use the story workflow
Current pain points and workaroundsHow they expect the workflow to evolve with new organizational goals
An Execution Issue?
An Execution Issue?
An Execution Issue?
perhaps we weren’t executing the wheel mechanic well enough?
play tests showed the players weren’t just saying they hated spinning the wheel, many of the complaints were related to how long it took (“Hurry up! This is taking forever!”, etc.).
Based on this, I recorded and timed the time from spin to reward in our game and one of our biggest competitors. I found that the speed of their game was twice as fast as ours, a significant difference in my mind.
We sped our game up to more closely match our competitors, and our metrics improved! Playtesters were happier.
However, the improvement in metrics was still not enough to meet our goals.
perhaps we weren’t executing the wheel mechanic well enough?
play tests showed the players weren’t just saying they hated spinning the wheel, many of the complaints were related to how long it took (“Hurry up! This is taking forever!”, etc.).
Based on this, I recorded and timed the time from spin to reward in our game and one of our biggest competitors. I found that the speed of their game was twice as fast as ours, a significant difference in my mind.
We sped our game up to more closely match our competitors, and our metrics improved! Playtesters were happier.
However, the improvement in metrics was still not enough to meet our goals.
Earlier Decisions
Earlier Decisions
Earlier Decisions
A roulette wheel and slot machine were common before I joined the project, the team had made the decision to go with a wheel based mechanic by conducting a user test that involved showing visual concepts of a wheel based game and a slot machine based game. The wheel based concept had more positive feedback and so that was chosen. I saw two problems with this method:
An image of a wheel and a slot machine does not accurately convey the difference in experience. An image conveys what it looks like, and players can imagine what it could be like, but it doesn’t give them an actual experience to reflect on.
Players often don’t know what they want. Asking them outright what they want is not always the best way to get information.
Collaborated with a UX Researcher and Content Producer Leads
Recruited 100 dedicated "super users" to partner with throughout the process
Prioritized the story workflow as the first area of focus to introduce research practice with minimal disruption
Approach
Guided interviews with participants from News and EFS, selected to represent diverse producer needs
Contextual inquiries: on-site shadowing to observe producers in real time
Interview Goals
When and why producers use the story workflow
Current pain points and workaroundsHow they expect the workflow to evolve with new organizational goals
Collaborated with a UX Researcher and Content Producer Leads
Recruited 100 dedicated "super users" to partner with throughout the process
Prioritized the story workflow as the first area of focus to introduce research practice with minimal disruption
Approach
Guided interviews with participants from News and EFS, selected to represent diverse producer needs
Contextual inquiries: on-site shadowing to observe producers in real time
Interview Goals
When and why producers use the story workflow
Current pain points and workaroundsHow they expect the workflow to evolve with new organizational goals
Testing Out Both
Testing Out Both
Testing Out Both
More and more as I looked into the choice between the wheel and slot mechanics, I became convinced that they had some key differences. Slots really offered 3 mini rewards and a fast pace, more sense of chance, more room for excitement. Our competitors were also starting to switch over. To test this theory, we designed and built two different versions of our game: one with a wheel and one with slots. We then A/B tested these versions with players. The results were surprisingly mixed, with slots only slightly preferred by users. Despite this, (and our limited data pool, testing is expensive!) we felt that, as a team, we had a strong enough gut feeling and evidence to move forward with the slot machine and say goodbye to our wheel game.
All of our time designing and building the wheel wasn’t lost though! We found a way to reuse that work for a smaller game mechanic.
More and more as I looked into the choice between the wheel and slot mechanics, I became convinced that they had some key differences. Slots really offered 3 mini rewards and a fast pace, more sense of chance, more room for excitement. Our competitors were also starting to switch over. To test this theory, we designed and built two different versions of our game: one with a wheel and one with slots. We then A/B tested these versions with players. The results were surprisingly mixed, with slots only slightly preferred by users. Despite this, (and our limited data pool, testing is expensive!) we felt that, as a team, we had a strong enough gut feeling and evidence to move forward with the slot machine and say goodbye to our wheel game.
All of our time designing and building the wheel wasn’t lost though! We found a way to reuse that work for a smaller game mechanic.
result.
The results of all of this work was extremely positive! Our metrics improved and the game started to consistently bring in revenue.
