Staging Photo

Project

Game Progress Selection

Roles

Usability, UX, UI, Interaction, Motion

Company

Big Fish Games

Opportunity

Many Big Fish Games players enjoy games on multiple devices. When a player signs in to a game on a new device, they must be able to choose their proper game progress with confidence.

Objective

Design the best way to handle game progress conflicts when a user signs into their account on a new device.

Process

Determining the User Flow

I reviewed our direct competition as well as the most popular and top-performing games to determine some rules-of-thumb for handling a quick yet destructive scenario.  What I found was heavy emphasis on short and descriptive text and visually distinguishing between two states using color, data, and layout.  

I was eager to create and analyze the user flow myself to find holes that may confuse our users or, at worst, destroy their game and their confidence in our product.

The analysis was swift, and included some assumptions that were later confirmed by the developers on this project.

The user flow across two devices, with the layout options presented.

Designing Wireframes

I kept a few things in mind from the competitive analysis and stakeholder interviews when working through the wireframe design process:

  • To prevent post-login, pre-state selection game progress, the game UI must be blocked
  • The number of taps required to complete the action must remain as low as possible to get the user back to playing their game
  • Make clear differentiation between game states by showing the user the most useful information about their game state
  • Communicate the consequence of one's choice inside the button's label

Layout 1

Layout 2

Layout 3

Designing UI Variations

To keep the experience as native-feeling as possible, I designed a true color UI to be tested by our players.

Layout 1

Layout 2

Layout 3

Usability Testing

I partnered with our internal user research team to conduct usability tests, with the goal of finding which layout had the highest success rate for task completion. Participants performed most successfully (76%) in Layout 1. Layout 2 performed in second (56%), and Layout 3 in third (53%).

Unexpected Technical Requirement

During a tech-check, the project’s lead developer informed me of the small chance a user may need to choose from three game states, instead of two. This introduced an unexpected design challenge: create a layout that doesn’t rely on the where the game state is stored as a part of differentiating them.

It was time to modify the design to place less emphasis on game state origin. While retaining the layout that had the highest success rate in usability testing, I decided to simplify the design and assign a letter value to each choice each choice. I also added a Log Out button and incorporated a pop-up confirmation dialog. This helped communicate to the user the consequence of their choice, providing them an option to go back and make an other choice if necessary.

A Fresh Portrait and Landscape Design

Choices UI for portrait orientation

Confirmation UI for portrait orientation

Choices UI for landscape orientation

Confirmation UI for landscape orientation

Motion Demos

Documenting the Experience

The last step was to create a document outlining the layout and behavior of the experience for our internal game studios.

Sample page from Best Practices Documentation

Sample page from Best Practices Documentation

Upon completion, the following goals were achieved:

  • Users are shown immediate information about their game states
  • Safe guards were put in place to prevent unintended destructive actions
  • Taps required to complete the task was kept to a minimum
  • Documentation was created to help game producers create a unique version of the experience in their own games

Harry McCorkle, UX Designer

All content is the property of its respective owners.