Design Challenge

Duration: 1 Week

Design Prompt

Unboxing a Tic-Tac-Toe mobile game application

Using motion design, tell the app’s story from launch, to loader, to introduction, to basic one-on-one online gameplay on either iOS or Android mobile platforms.

Provide hints that help orient the user during their first play experience. Imagine that this is the user’s first time launching the app, and it’s your job to ensure that their initial experience is both informative and enjoyable.

01 User Research

Target Demographic

Tic Tac Toe (aka TTT) is a classic, well-known game - fun for all ages. This makes the target demographic pretty broad... The game should be designed to please every user, from beginner to expert.

To make it easier on myself, I've chosen three main demographics to keep in mind: kids, millennials, and retired folk.

Survey

I surveyed my friends and family on the types of games they play on their phones.

The goal of this survey was to get a better understanding of why people play the games that they play and to find any common patterns of things to avoid in a mobile app game.

Top Survey Results

01

38% had 1-3 games on their phone, and another 38% had 4-6 games on their phone.

02

81% of people said they "sometimes" watch the onboarding tutorial for a new game, while 14.3% said they "never" watch it.

03

When asked to comment what they find most annoying in games, 57% mentioned pop-up ads.

04

47.6% of people prefer playing with or against other people.

What kind of games are my friends and family playing?

When asked what their favorite game was, a majority of those surveyed replied with a game that fell under the puzzle or board category.

Games like....

One More Brick 4.5

Candy Crush 4.6

Genies and Gems 4.7

Monument Valley 4.6

Panda Pop 4.6

Toon Blast 4.7

Words with Friends 4.0

2048 4.2

Why do they like the game?

When asked about what they liked about their favorite game, some common answers were: it's simple/easy to play, has good design, exciting rewards, challenging puzzles, and overall nice visuals.

Key Takeaways From the Survey

Everyone plays games
Socializing and interacting with other users is preferred
Rewards improve motivation to continue playing
Easy enough to win, but hard enough to make you think (they want a challenge)

Additional Research

Before jumping into designs, I began researching more about the game industry as a whole and how to best design for games.

Types of learning curves:

Flat Curve

The game’s difficulty does not change and traditional game levels are replaced with a series of ‘activities’ or tasks with an equal difficulty level (typical for a narrow target group with specific ability/expectations).

Linear Progression

The challenge increases steadily throughout the game. While easy to implement, this model is dangerous because it may not give the player the necessary amount of time to learn the game before progressing to a harder level and, as a result, the player may never be able to complete the game.

S-Curve*

Starts slowly and lets the player learn how to play the game, sometimes through a tutorial, at other times through training levels. Most successful, and typically lets the user figure out how to survive to finish the game.

* I chose to go with the S-Curve

Source:

Designing for Learning or Designing for Fun? Setting Usability Guidelines for Mobile Educational Games

Competitive Analysis

Using the App Store's ratings and reviews, I gathered information on the positives and negatives of current Tic Tac Toe mobile apps.

Tic Tac Toe

Optime Software LLC

Rating 3.8

Positive Reviews

Great to play with grandkids
Works without wifi
Fun to play with family; keeps score and keeps them entertained

Negative Reviews

Missing critical management of who plays first
No option to have starting player be the last game loser
All the levels are the same. Hard is still easy
Don’t like the ads

My Notes

Hard to tell who goes first/when the game has started
Too repetitive
Nice pop-up to let you know you won
Navigation hard to understand right away

Tic Tac Toe Glow

Mobivention GmbH

Rating 3.3

Positive Reviews

Attractive interface
A simple design easy on the eyes with a glowing screen
I like the different holiday themes

Negative Reviews

Two easy to predict; awful
Never play on easy, it’s like playing tic tac toe with a newborn
Accidentally clicked the banner ad and couldn’t get it to go away and was in the middle of a game

My Notes

More options on the homepage
Some customization of the background
Next to no reward or animation to signify the end of a game or a win... kinda sad

Tic Tac Toe Glow by TMSOFT

TMSOFT

Rating 4.4

Positive Reviews

Cool visuals
Forces your brain to strategize
Although you can play the 3x3 grid, the fun and challenge is in the 5x5 and 7x7 grid
Add the lights, sounds and explosions and this game becomes sort of a ‘resto-mode’ of the old game and one you’ll play again and again
Exciting if you win 3 times all the colors go off, it’s so cool

Negative Reviews

Crashes sometimes, but entertaining
Wish you could play against people online
Pop ads are annoying, but you can pay to remove them

My Notes

More than just the 3x3; adds another level of difficulty to keep things interesting
Effects and animations are just as important as the game

Take-Aways from Additional Research & Competitive Analysis

People expect it to get harder as you go along (S-Curve)
Too much repetitiveness kills the game and user's motivation
People responded better to different types of Tic Tac Toe (ex: 7x7 grid)
Visuals should be exciting

02 User Personas & Flows

Personas

01 Sally, the competitive kid

Sally will challenge you any day to some good old-fashioned hula-hooping, or other forms of competition - such as portable mobile games, like Tic Tac Toe. Look out, she may be cute, but she's vicious.

02 Carl, the college student

Carl likes killing time with short games that keeps his mind sharp. He enjoys the challenge of solving puzzles and riddles. He finds it motivating to overcome different game obstacles and improving.

03 Mary Lou, aka Granny

Retired and with a lot of time on her hands, Mary Lou finds herself playing more games on her phone and tablet. She enjoys competing with family and friends, and the social aspect of interacting with others.

User Flow

Following the S-Curve learning curve model, the game will start the same for every user and increase in difficulty as you progress throughout the game - giving each user time to learn and improve.

03 Sketches

Sketching Out the User FLow

Taking the basic steps in the user flow from above, I started working out what screen might be needed and how to start breaking down the onboarding process.

Thinking Outside the Box...

or, in this case, on the box

Making Tic Tac Toe more challenging.

Based off of my survey results and reading App Store reviews, people want a challenge. Additional columns and rows to the standard 3x3 reported positive feedback, but what if you could take it a step farther...

Goal: Win mini-games of tic tac toe on a 3D cube.

The player with the most mini-wins earns the cube and points. Collecting these cubes will offer a sense of reward and therefore motivation to continue winning more and growing your collection of riches.

04 Wireframes

Lo-Fi

Quick, low-fidelity wireframes to start mocking up sizes and figure out placement of features. This also allowed me to play with grids systems as well.

05 Comps & Motion

Loading...

I wanted to keep the loading screen clean and simple. Adding some simple animation with the word "loading" helps give it some bouncy character. The X's and O's popping in and out represent the common Tic Tac Toe pieces to get you even more excited.

Home/Main Menu

There are two options: Single player and two players. Based off of my research, it appeared o be more common to play against an online user/computer. So, I selected that state as a default and made the play button more prominent as the main action.

Gameplay Screen

Once the user hits play, the user's profile and their opponent's profile will pop up - giving it the personal/social feel. Having them pop in as so allows me to move them into place and further orient the user with his/her information.

Onboarding

Since onboarding is typically only done the first time, I did not give players the option to opt out. They can quickly flip through the informational cards, which also play off of the tangible game aspect of the app.

Thoughts and Reflection

Due to the nature of this challenge, there was little time for iterations and testing that I would typically like to explore. If this were a longer project, I would usually include a round or two of high-fidelity wireframes, rounds of comps, animation animatics, and include rounds of feedback and critique along the way. This was a really cool project and I had a lot of fun exploring the potentials of a Tic Tac Toe mobile app!

Tic Tac Toe with a Twist.

But wait, there's more...

Bonus Round!

Demonstrate how this experience might be branded, communicating how the brand experience can also be reinforced or enhanced through the use of motion.

McDonald's

Ba da da da da da... Tic Tac Toe'n It

What if you could scan Happy Meal Boxes to redeem virtual points in Tic Tac Toe or vice versa... what if winning cubes in the mobile app could actually add up to real life food and prizes!

For the motion, I tried to give it a smooth, yet playful feeling. This is a happy brand that wants you to be happy. The X's are even made of french fries and the O's are burgers!

Minecraft

Tic Tac Toe Edition

This has the potential to be an amazing continuation of the actual game, where you can win and collect cubes of different material and value. There could even be another sub-game where you build things with the cubes you have won.

For the motion, I wanted it to feel clean and smooth, like the game. I tried to make some of the movements a little clunkier, for lack of a better word.