UX Case Study: Video Game
Video Game for iOS, Mobile, Tablet, Xbox, and PCitunes.apple.com/us/app/magic-duels/id881106329?mt=8
My responsibility was to think through the overall structure & flow of the app, wire frame each screen, and reimagine the “New Player Experience” to maximize player engagement, building a new generation of players.ForWizards of the Coast RoleSenior UX Designer and Game Designer Date2009-2017
DESCRIPTION: Overall menu for video game. PROBLEM STATEMENT: Learning “Magic: The Gathering” is a top hurdle to increasing the customer base. “Magic Duels” was created to be an introduction to the game using iOS, Android, Xbox One, and PC.
As UX Designer, I prompted the Brand/Marketing department to target specific market segments, to focus the design of the app. I wrote personas for the top three targets, based on business objectives, and player research. Stacey (Who wanted to learn the rules in a safe space) was my top priority.
CHALLENGE: Having taught hundreds of people how to play Magic, I knew the pitfalls of previous attempts to teach new players. I ran a Usability study, and found our best tool had a 20% success rate (in large part, due to players assuming incorrect rules and ending up perplexed when the game behaved differently than expected.)
CHALLENGE: I couldn’t change the rules of Magic… many of which are counter-intuitive. DESIGN CHANGE: Instead of passively telling players about the unintuitive rules, I would show the rule in action, and then present an optional puzzle (with a reward upon success). These changes allowed us to capture players before they got the wrong idea about the game, and became confused. These changes brought engagement / enjoyment from 20% to 90%.
DELIVERABLE: JOURNEY MAP: An important change to help new players engage was a streamlined app flow. I Audited previous apps, and found opportunities to get target customers to playing (and learning) faster than before… while expanding play features for longtime fans.
PROBLEM: Every screen needed to work with three different input methods: TOUCH (mobile & tablet, Android & iOS), KEYBOARD & MOUSE, and GAME CONSOLE (Xbox One). I created a unified input philosophy, and iterated on each screen to ensure they worked with each input method.
PROBLEM 1: Players (especially new players) were unclear on a major aspect of gameplay: Whose turn it was, and what part of the turn it was. PROBLEM 2: Previous apps would often allow cards to overlap each other, making it impossible for users to read some cards. My designs re-arranged the battlefield to solve both problems.
I designed Duels’s major new feature: the step-by-step tutorial system. By making each principle bite-sized, with illustrations, teaching effectiveness has dramatically improved.
Here is the final art as a part of one of the tutorials. These instructional puzzles were the lynchpin of the successful re-write of the New Player Experience.
PROBLEM: For our top-priority market, deck-building a daunting goal. So I invented an “assistant” that intelligently suggested cards based on preferences and previously-chosen cards. RESULT: Target players reported an increase in confidence in deck-building, and they quickly graduated to un-assisted deck building.
RESULT: Game Table design: A major challenge in pervious version of the game was communicating to the player whose turn it was, and what the step was. The red bar in the center brought understanding of the game state by 60%.
PROBLEM: Damage done in Magic is counter-intuitive. So I designed dozens of changes to the ways combat was presented, which increased understanding, but also sped up some games by 30%.
PROBLEM: Players could voluntarily buy expansions, allowing them to fight more CPU opponents and gain access to new cards. But this was a change to previous play patterns. I completely re-designed the in-app store to improve comprehension and sell-through. Revenue was 50% higher than initial targets.
PROBLEM: Analytics showed that previous apps had menus that were a challenge to navigate. I changed the design to allow users to see all choices at a glance. Here I needed to show the player what the story progression was, who their opponents would be, and what rewards they could expect if successful.
PROBLEM: Usability studies (and my own tutoring) showed that the parts of a turn of a game of Magic are some of the most challenging things to learn. I was not able to modify the rules, so I needed to change the way we showed how a turn progressed. This is a diagram shown during the tutorial process.
INSPIRATION: My previous work on “Magic Online” popularized the idea of vertically aligning attackers and blockers. Previously, combat was a mishmash of arrows, criss-crossing the battlefield. The less arrows flying around, the easier it is to understand a battlefield.
An example of previous work done on the PC-only game, “Magic Online.” This is for managing a collection, and deck-building. This is one of the most popular changes I designed for this application.
Mobile App Design Next