Wednesday, March 6, 2013

Mockups on Balsamiq

This week I turned my paper prototypes into a digital prototype using the toolkit provided by the ingenious folks at Balsamiq. Although there were a few processes I did not grasp intuitively, the learning curve was quite shallow, and I recommend it if you have a similar project.

I made the following changes in the transition from paper to digital:

  • I removed the option to select which game is going to be played. For now, my MVP will only consist of scoring for a game of spades.
  • Rather than calling individuals "player 1," I initialized each player with a name already entered in the buttons. This should minimize confusion as to which player number is associated with which partner.
  • I added an "exit" button in the top right corner, allowing the user to quit the game in-progress and return to the main menu for a new game.

Also, for the sake of brevity, I only added edit pages for the player entitled "John," though the other pages would work the same way. Additionally, the "Next Round" button on my "Score" page links to my "Winner" page, which in turn links back to the landing page. I built the prototype in this way, although the real "Winner" page will only display if the game has reached a final score.

And here is the prototype for you to peruse. Feel free to leave comments!!


  1. Great idea, just like how I mentioned earlier tonight that me and my friends used an app similar to this when we played darts. One thing to keep in mind, maybe have a button where it explains the rules or a HOW TO. Im a little rusty when playing card games, a little info to refresh my memory would help

  2. Fantastic idea, Avery! Thanks for the tip :)

  3. Great mockup, here's my notes on the Heuristic Evaluation I just did:

    * Visibility of system status
    -- highlighting who is winning? bold, or colours or increased font size? severity 1

    * Match between system and the real world
    -- be able to move the player names to reflect where people are sitting for the game -- severity 1
    -- would like players to all be using their own phones? severity 1

    * Consistency and standards
    -- what does the X button mean? Is this settings? Exit? - it appears to take us home - write home on it? put on left with arrow pointing left? (iOS) -- severity 3
    -- shouldn't winner badge come up when we click finish? rather than next round? severity 1

    * Flexibility and efficiency of use
    -- default to previous players names if used before -- severity 2
    -- automatically move on once we have entered the last name? -- severity 0.5

    And video of me generating these

  4. *Visibility of system status:
    --Good idea - always nice to know who's in the lead

    *Match between system and real world:
    --Moving players names according to seating sounds reasonable to me...will adjust
    --This is not an actual game, just a score-keeping app...therefore there is no need for multiple players to login and use their own phones

    *Consistency and standards:
    --I agree - the X should be changed to a home button
    --It seems I didn't explain clearly enough in my blog (last paragraph before the prototype)...I couldn't write the "if-then" statement into my Balsamiq prototype to demo that the "winner" page would ONLY display upon finishing the game. I designed the prototype to show this "winner" page upon clicking "next round" solely for the purpose of showing that it is in there. The functionality will be smoother in the real app.

    *Flexibility and efficiency of use
    --Yes, the intention is to autopopulate the player names from the last game...again, not something that can be shown through Balsamiq
    --I don't want to automatically move for several reasons. First, if an error is made, the user would then be forced to return to the page. Second, a user may not enter four names every time. If they are playing a second game with the same four people, they would not enter any names, therefore the "trigger" to send the app forward would not be initiated.

    Lastly, the video of the evaluation did not get uploaded, but here is the link if anyone wants to view it:

  5. Hey Allison I redid my evaluation between you and I. here is the link to my blog: