Stage Two

Our design group has continued developing our User Interface Design is much the same way as we did in stage 1.

In stage 2, my primary role has been to create the Structural design and the wireframe prototype which demonstrates it.

Structural Design

The structural design has been largely dictated by the broader app design.  Since the overall design calls for a sequence of 5 games, each of which reinforces one of the 5 tips, the structural design has simply been to connect these tips using a story line, which is presented through animated sequences.

We decided upon a simple sequential path through the game as a way of controlling the story, and to simplify the collection of meaningful statistics on how players are progressing through the game.  For example, a statistically significant increase in players completing tip 2 but not tip 3 will show that tip 3 may have a problem.

Our use of personas did highlight some probable discontent among players (particularly from our secondary target) when forced through the fixed sequence.  For this reason, we have added a “Challenge Mode” which allows access to any random game, but only after the player has “unlocked” that game in story mode.

For the same reason, challenge mode will enable the animated story sequences to be skipped.

Wireframe Prototype

When it came time to create the prototype, I decided that a cloud based service should be chosen so that the whole team could view and edit/comment throughout the design process.  It was also important that the tool was quick and easy to use, since we only required a low fidelity prototype at this stage, to allow us to better visualise the structural design.

After looking at several tools which didn’t meet these criteria, I came across Moqups.com.  This tool has a simple “stencil” system which allows pre-made wireframe style design elements to be drag-and-dropped onto a canvas.  It also allows the creation of buttons which can link screen, providing an effective visual representation of the structural design.

While this tool has been excellent for its simplicity and its ability to easily share the design with anyone via a weblink, its collaborative design feature is only available after upgrading to a paid account.  Regardless, the tool has proven valuable, and I have even created a Visual Design prototype using the same tool.

Structural Design Wireframe Prototype:

https://moqups.com/david4221/v0rttDH5

Visual Design Prototype:

https://moqups.com/david4221/KNRckexD