Paper+Digital Prototyping for Mobile Games
Recently, I had the privilege of taking part in a usability workshop at General Assembly in downtown LA. GA covered the importance and process of building out a paper prototype and then had us break out into groups and produce a testable prototype within two hours. I learned that working on paper when building prototypes (as opposed to using digital mediums to build out wireframes or mockups) is just incredibly efficient and low-risk.
After completing the workshop, I rushed home to put my new skills to the test. I’ve been conceptualizing a new mobile video game for my animated series, Type Zero, and thought it’d be the perfect guinea pig to test it out on.
The game is a combination of strategy, puzzle & fighting. My challenge was to build an easy to understand interface that would seamlessly tie the three game modes into one another without the need of tutorial messaging.
First step, I defined the user flow that I would be mocking up.
The user goes from:
The Matchup Screen, to the Battle Arena, to selecting their rock/paper/scissors moves. Then it breaks into one of two flows (offense or defense) which consists of executing or countering a round attacks depending on the previous round’s results. Once the fighting round is over, health damage is dealt and the user is taken back to the rock/paper/scissors round where they repeat the flow above until one of the fighters health reaches zero.
Taking inspiration from popular games, I defined the interaction design. To help the user feel familiar with the interface, we decided to use the same perspective Pokemon does in its battles. And to help the user understand their next steps through context, we decided to go with an overlay menu system that doesn’t remove the user from their vital battle information. I sketched these screens out on loose leaf paper.
Here’s the cool part. Instead of drawing each of the screens on a new piece of paper, I drew the different elements on their own cut-out piece of paper to be later placed on a paper device for testing. I drew all the different states for the health gauges, offensive menus, defensive menus and overlays.
The advantages gained from this step are:
1. It’s really easy to iterate on the design.
2. The prototype you produce will be interactive and offer almost all of the same value as a digital interactive flow.
3. You use less paper and ink compared to printing and that’s just awesome.
Finally, I was so excited to show my colleagues the progress I’d made that I found myself doing a rough usability test within thirty minutes of completing the paper prototype. Basically, while moderating the test (and without leading the subject), I would move and switch out paper elements as the user interacted. Since we’re manually manipulating the prototype (a role cleverly named “the computer”), this part takes a little bit more time but delivers nearly the same value as digital. The only thing I can think of that isn’t realistic is the transition time between screens.
A few things that were confirmed at this phase:
1. The user understood the matchup screen and how to start the game.
2. The user understood the relationship between their menu and the character on the screen.
3. The user understood the in-battle gauges
4. The user understood the different fighting mode’s requirements
After a couple “quick and dirty” usability tests on the paper prototype, I learned very quickly that the mobile game prototype was strong enough to give a try in the next phase. I took no time to mock the sketches up in my favorite design program of the moment, Sketch 3. Got a little carried away in the digital design phase (as usual) and added some layout/color and some fighter animations. Then I stringed together the mockups in a linear user flow using my favorite digital prototyping tool, Principal. Once completed, this prototype that would be comprehensive enough to describe the game to a potential player, developer or investor.
As a result, I was able to recruit new developers, and move our team into the next phase which is asset creation and usermap rest of the secondary app functions. I friggin’ love what paper prototyping offers. You should give it a try on your next project!