Sushi Go! Game Application

SUSHIGO!

Sushi Go! Game DesignKonner Howell

Introduction

The purpose of this project is to take an existing card or board game and create a mobile version of it. I chose to make an iPad version of Sushi Go!, a four-player pick and pass card game with adorable artwork. All characters and cards used in these images do not belong to me, they belong to the creators and owners of the handheld game.

Contents:

2 Competitive Research3 Flowcharts6 Sketches8 Wireframes12 Final Design


Competitive Research Hearthstone

One of the most useful pieces of information I got from looking at this game was the relationship between the size of the cards and the size of the interface. The cards in your hand are extremely important to gameplay but they take up a very small part of the screen.

Subtle shadows add a slight touch of 3-D to make the game board a little bit more dynamic.


Flowcharts Turn Flow


Flowcharts Menu Flow


Flowcharts App Flow

Menu

LoginPlay How to Play Options

Online Solo Tutorial

Add Friends

Round 1 Begins

Player selectsa card.

Player con�rms ordeclines selectedcard.

Selected card is placedface-down. Player waitsfor other players to selecttheir card.

All face-down cardsare revealed. Immediatepoints are scored.

Played cards are addedto the respective players’collections.

Hands are automaticallypassed to each player’sleft.

Repeat steps until allcards are played.

End of round 1. All pointscollected so far are totalledand current places are shown.

Round 2 begins, plays the same as round

1. After round 3, the game is over and �nal places

are shown.

Play Again Rematch Menu


Sketches


Wireframes

SUSHIGO!

PLAY

HOW TO PLAY

OPTIONS

IMAGE

LOGIN

Menu

The user logs in through Facebook or Game center. If the user is already logged in, this would show their profile picture and name or username.


Wireframes Menu > Play

PLAY

ONLINE

SOLO

TUTORIAL

IMAGE

Back button, takes the user back to the previous page.


Wireframes Menu > Play > Online

Search bar allows the user to search through their friends list for specific people.

ADD FRIENDS

SUSHI GO!

IMAGE

SEARCH

PROFILEPICTURE

PROFILEPICTURE

Profile pictures of the users who have joined the party appear here.

Friends who have been invited appear above the dark line.

Friends who have not been invited yet appear in order of importance and then alphabetically.

Begins the game or starts the play queue.


Wireframes Menu > Play > Online > Sushi Go!

ADD FRIENDS

SUSHI GO!

IMAGE

SEARCH

PROFILEPICTURE

PROFILEPICTURE

Display from last screen is overlayed by a 75% opacity grey screen.

Shows a fun fact or gameplay tip that changes each time you search for a match.

This screen shows when a user starts a game but not does not have enough users in their party for a complete game.

ADD FRIENDS

SUSHI GO!

IMAGE

SEARCH

PROFILEPICTURE

PROFILEPICTURE

SEARCHING FORA MATCH...

TIP:


Final Design Menu

SUSHIGO!

PLAYPLAY

PLAYHOW TO PLAY

PLAYOPTIONS

LOGIN

Purple used to represent title text and words or buttons that are not interactive.

Titles and buttons in blue are interactive.


Final Design Menu > Play

PLAYTUTORIAL

PLAYSOLO

PLAYPLAY

PLAYONLINE

PLAYADD FRIENDS

PLAYSUSHI GO!

Jordan Howell

Taylor Howell

Randy Howell

Nancy Howell

Charlotte Monthye

Emily Riley

Users that have joined your party appear here.

Search bar searches the user’s entire friend list. Invited players are listed above the brown line.

Checkmarks indicate accepted invites. 3 dots indicates an invite is still pending. Blue squares with plus marks allow the user to invite other players.

Pressing Sushi Go! begins the match or the queue for a match.


Final Design Menu > Play > Online


Final Design Menu > Play > Online > Sushi Go!

PLAYADD FRIENDS

PLAYSUSHI GO!

Jordan Howell

Taylor Howell

Randy Howell

Nancy Howell

Charlotte Monthye

Emily Riley

SEARCHING FORA MATCH...

TIP: Keep track of how many puddings your opponents are collecting. You don’t wantto have the fewest at the end of the game!

This screen would only appear if the user did not have a complete party. Otherwise, the match would start immediately.

Different tips would appear each time the user enters the search queue.


Final Design Gameplay

ROUND

1/3

SUSHI GO!

SUSHI GO!

SUSHIGO!

SUSHIGO!

SUSHI

GO! SUSHI

GO! SUSHI

GO!SUSHI

GO!

SUSHIGO!

SUSHIG

O!

SUSH

IG

O!

SUSH

IG

O!

SUSH

I

GO

!SU

SHI

GO

!SUSHI

GO!

SUSHI

GO! SUSH

IGO

!

SUSH

IG

O!

SUSH

IG

O!

SUSH

IG

O!

SUSH

I

GO

!SU

SHI

GO

!SU

SHI

GO!

SUSH

I

GO!

SUSHIGO!

:150

00

0

Opponents’ hands are shown on the other sides of the board. The active user cannot interact with them.

This is the active user’s hand.

The user’s current score.

Time remaining for this turn.

In-game settings.



ROUND

1/3

SUSHI GO!

SUSHI GO!

SUSHIGO!

SUSHIGO!

SUSHI

GO! SUSHI

GO! SUSHI

GO!SUSHI

GO!

SUSHIGO!

SUSHIG

O!

SUSH

IG

O!

SUSH

IG

O!

SUSH

I

GO

!SU

SHI

GO

!SUSHI

GO!

SUSHI

GO! SUSH

IGO

!

SUSH

IG

O!

SUSH

IG

O!

SUSH

IG

O!

SUSH

I

GO

!SU

SHI

GO

!SU

SHI

GO!

SUSH

I

GO!

SUSHIGO!

:150

00

0

This menu would appear if this options button is tapped. It would also minimize by the tap of the same button. Tapping the green box would cause it to slight to the left to appear like the red box below and vice versa.



ROUND

1/3

SUSHI GO!

SUSHI GO!

SUSHIGO!

SUSHIGO!

SUSHI

GO! SUSHI

GO! SUSHI

GO!SUSHI

GO!

SUSHIGO!

SUSHIG

O!

SUSH

IG

O!

SUSH

I

GO

!SU

SHI

GO

!SUSHI

GO!

SUSHI

GO! SUSH

IGO

!

SUSH

IG

O!

SUSH

IG

O!

SUSH

IG

O!

SUSH

I

GO

!SU

SHI

GO

!SU

SHI

GO!

SUSH

I

GO!

SUSHIGO!

:090

00

0

SUSH

IG

O!

When a card from the user’s hand is tapped, it slides up and appears at large. Two buttons allow the user to either confirm the card and play it face down OR to cancel and select another card.

The active user can see when anotherplayer chooses a card. Cards are placedface down in the middle as shown bythe player on the left.



ROUND

1/3

SUSHI GO!

SUSHI GO!

SUSHIGO!

SUSHIGO! SUSHI

GO! SUSHI

GO!SUSHI

GO!

SUSHIGO!

SUSHIG

O!

SUSH

IG

O!

SUSH

I

GO

!SU

SHI

GO

!SUSHI

GO!

SUSHI

GO! SUSH

IGO

!

SUSH

IG

O!

SUSH

IG

O!

SUSH

I

GO

!SU

SHI

GO

!SU

SHI

GO!

SUSH

I

GO!

SUSHIGO!

:000

00

0

SUSHIGO!SUSHIGO!

SUSH

IG

O! SU

SHI

GO

!

In the image above, all cards are chosen and placed face down.



ROUND

1/3

SUSHI GO!

SUSHI GO!

SUSHIGO!

SUSHIGO! SUSHI

GO! SUSHI

GO!SUSHI

GO!

SUSHIGO!

SUSHIG

O!

SUSH

IG

O!

SUSH

I

GO

!SU

SHI

GO

!SUSHI

GO!

SUSHI

GO! SUSH

IGO

!

SUSH

IG

O!

SUSH

IG

O!

SUSH

I

GO

!SU

SHI

GO

!SU

SHI

GO!

SUSH

I

GO!

SUSHIGO!

:000

00

0

+3+3+3+3

+0+0+0+0 +0+0+0+0+3+3+3+3

All cards are flipped over and immediate points are scored above the respective card. Not all cards are worth immediate points so often times users will receive 0 points on a turn.



ROUND

1/3

SUSHIGO!

:150

33

0

SUSHI GO!

SUSHI GO!SUSHIGO!

SUSHIGO!

SUSHI

GO! SUSHI

GO! SUSHI

GO!

SUSHIGO!

SUSHI

GO

!SU

SHI

GO

!SU

SHI

GO

!SU

SHI

GO

!SU

SHI

GO

!SUSHI

GO! SUSH

IGO

!

SUSH

IG

O!

SUSH

IG

O!

SUSH

IG

O!

SUSH

I

GO

!SU

SHI

GO

!SU

SHI

GO!

Each player passes their previous hand to the left and receives the hand from the person to their right. The user then picks a card, plays it face down, revealls, and swaps hands until all of the cards have been played.

Icons appear on the board to represent the previous cards each user has played.



END OF ROUND 11

2

3

4

2

23 2

2

2 3

15

9 3

2 2 211

3

CONTINUE

Each match consists of 3 rounds. At the end of each round, points are scored and running totals as well as cards played in the previous round are shown.


Final Design Menu

FINAL SCORES1

2

3

54

32

38

Nancy Howell

Jordan Howell

Taylor Howell

4 27Konner Howell

PLAY AGAIN REMATCH Menu

Play again takes the user back to the “Play” screen. Rematch invites all users in the active user’s party to another match. Menu takes the active user back to the main menu.

Sushi Go! Game Application

Design

Transcript of Sushi Go! Game Application