Issuu on Google+

Sport sixes | UX DESIGN

Draft Layout and Navigation Hierarchies for SPORT SIXES Application

Modified Date File Name Description Version History

25 February 2013 Sport Sixes Mobile Application Proposals Draft Sitemap and Wireframes 2.0


Sport Sixes application map

Sport sixes | UX DESIGN

Proposed Application Maps for Sport Sixes

1.0

2.0

Splash Screen

main screen

A

Gameplay (turn by turn)

1.1

2.1

2.2

2.3

2.4

A

walkthrough

tokens

active games

create a new game

settings

Players roll First dice

1.2

2.2.1

3.0

login screen

User’s turn games

choose an opponent

USER 1 wins

USER 2

B

C

1.2.1

2.2.2

3.1

3.2

3.3

3.4

B1

C1

login via facebook

opponent’s turn games

search opponent

list of fB friends

random opponent

Invite friends

rolls die 1

Waits for opponent

1.2.2

4.0

B2

email login

Select game

rolls die 2 / gets result

1.2.3

4.1

4.2

4.3

4.4

B3

create an account

Soccer

Cricket

NFL

GOLF

gets scores & submit

4.1.1

4.3.1

penalty

conversion screen

4.4.1

5.0

4.3.2

PICK A GOLF COURSE

Select game MOde

Hail Mary Screen

A

5.1

5.2

4.3.3

turn by turn

fast play

2PT CONVERSION SCREEN

SWITCH User roles & repeat until all turns are done


Sport sixes application proposal & wireframes

Sport sixes | UX DESIGN

Splash, Login, Main Board, Creating a new game

1.0

 

1.1





1.2



  

2.0



   



  



    



 



2





    

1

                                 

 

2



2



3







3



3.0

 

!!!

1

 

 





1

2.0



 !#&"

 

$!$!



1

$!$!



2

 

 

#!

#

 

  

  







 





 

 

##"



 

  





% 

  



3

 

4



4

2

Main Screen:

Main Screen:

Splash Screen

walKthrough

Login Screen

New game & Settings

With available games

Create a new game

The Splash screen is the initial screen seen by the user when they tap the app’s icon from the device’s home screen. It could be as simple as containing the app’s logo, a preloader and a loading status text underneath it.

Before logging in, users get access to a walktrhough of the game via a series of slides that can be flicked horizontally for navigation.

Right after Loading, the application will ask for the user’s Login information. He can either login via facebook which directs to FB’s API or login via the alternate manual email login. For New Users, they can sign up for a account via Create an Account button.

Users are directed to this screen when upon logging in. Shown above is an empty dashboard with no active games on, this applies to new users or regular ones who has not opened a recent game.

This page is a version of the previous screen filled with the user’s ongoing games (limited to 5.)

This is the initial screen when a user decides to create a new game from the dashboard, where opponents can be chosen either from their list of facebook friends who has the app installed or search from random group of players.

During this process, the application will gather all required information and assets required for running the application. Updates and bug fixes will also be checked at this point.

1

Flick through -to access slides within the walkthrough

2

Pagination Indicator -for user to know where he is from the walkthrough

1

Tokens -users are assigned 10 free tokens upon signing up for an account. To play a game they must spend a token, one tokens is added to the user’s account on regular 30 minute intervals, but players who use up the tokens quickly can buy the tokens. The label indicates the number of available tokens and the tag beside it directs to a page where they can buy tokens in exchange of real money.

2

New Game -upon tap, proceeds to 2.3 to create a new game

3

Settings -where users can configure the application’s game settings. Proceeds to Screen 2.4

1

2

3 4

(A) Your Turn Games -All games that are ready to be played by the user are always bumped on top of the list. These are the games that the user can now play to be able to take their assigned turns and sent back to opponent right after.

1

A) Search Bar -For users that know the username of their friends, they can use the search bar by keying in a part or the whole username which will then let the app generate a similar list (same format as this page) that are relevant to the user’s search (i.e. bob can churn out bob123, bobcat, etc.)

2

B) Play with a Facebook Friend -player gets to choose from the readily available list of facebook friends who’ve already downloaded the app

3

C) Play with a Random Opponent -the application randomly generates users who also signed up for the same configurations, that is to play with a random player

(B) Waiting for Opponent Games -these are active games but ones that are waiting for the opponent’s turn. These are activated again (labeled as Your Turn Games) when the opponent is done with their turns. Finished Games -Shows previous games that are currenlty over which users can swipe to delete. Navigation by Scrolling down the page -the list can turn into a long list of active games therefore navigation by scroll is enabled. New games and the settings button are a constant at the bottom.

4

D) Invite Friends -user gets to invite facebook friends who have not yet signed up for the game. This generates an invite to recipients to download the application


Sport sixes application proposal & wireframes

Sport sixes | UX DESIGN

Sport and Mode Select, Starting a game, and access to Game Score and Instructions tab and Settings Screen

4.0-5.0

4.1 A







  1



2



3

4 6





   





 

8

1

! 



 





 



























































 

3







5



















2

3

5



















2

"

3













4

!"

6







!!!#









2





#& !'#!$#'# *' )&') '$#&(((#&$#')&&'"(!()'!''

3



  

#&#&"

4





#& !'#!$#'# *' )&') '$#&(((#&$#')&&'"(!()'!'' )( "(##&#"%)'(#&(#&#& (!(&')'()'(# "''!#") #"#") ")$#&(((#&

  

*'$#"((#( #(&$ -&'#&

  

 



&")!&' #"(&)( (# # #&'

5





 -&!''' ",((+#()&"





 

 

" (-#&"

    



1

 -&!''' ",(()&"





1

 

  

!" 



"'(&)(#"'

 

!"









#& "'(&)(#"'

"

9

1

 

2.4













4

 !" 

7

3

  



---

2







 !

1

2

1



---

 

 





!





  



4.1 B1

7

5



"&('$#"( #&($ -&

 

*'$#"((#( #(&$ -&'#&

Create a new game:

create a New game:

game area (soccer):

game options:

game options:

Sport & mode select

roll the dice

game interface

Game score

game instructions

Settings

After a user has chosen an opponent to play with (Screen 2.3), the user (who created the new game) will get to choose the Sport to be played and the mode in which the game will be played.

To decide which of the player will go first, an initial rolling of the dice will be done. On both user’s end, the above screen will show up with the opponent’s die results and the second half dedicated to rolling one’s own die.

The above screen shows the main format of the game area applied to all sports, each differentiated by their game specifications on playing (e.g. for cricket, outs are included, etc.)

The first tab of the game options panel, The Score Tab, gives a more detailed illustration of the score for the current game being played.

For users that would want to refresh on the game guidelines and Legend, the Instructions tab is provided for each game. Each sport will have their own set of Instructions and Legend

This screen allows the user to edit configurations to maximize game play:

Sport Select -lists the available sports within the application. Currently there are four: Soccer, Cricket, NFL and Golf. More type of Sports will be developed for future versions. Game Mode Select -user gets to choose from 1) Turn by Turn (alternate turns), or 2) Fast Play (player 1 finishes all turns first and then switches with the opponent for them to complete their turns) Total turns will be appended on the scope doc. Play Now Button -When both sport and Mode have been chosen, the user can confirm with the Play button to proceed to the intial screen of the game proper (shown on the next Screen

1

Roll by the User -Roll button will generate the user’s die results to determine who goes first. When both are done, the player with a higher result will take their first turn.

1

Tokens -tokens can be used within a game for missed turns, etc.

2

Score Tab -indicates the active Score tab Instructions Tab -2nd tab of the game options panel detailed on the next screen

1

Back Button -takes user back to main Screen

2

Screen Title -states current game being played

3

Game Options -opens up a panel for the instructions and a more detailed view of scores

3

4

User’s Profile and Score -User photo and Score for the user, colored to indicate active turns

4

5

Opponent’s Profile and Score -Shows the opponent’s profile and score and grayed out to indicate that it’s inactive

6

First Roll -First die to determine column

7

Second Roll -Second die to determine row

8

Game Board Grid -6x6 board with symbols for gameplay. numbers are constant to each sport.

9

Roll Button -indicates 2 turns and when pressed rolls the First and Second Die, consecutively.

5 6

7

Exit Icon -Closes game options panel username header -labels that indicate score panels for the users Score per turn -table is divided by turns and the dice hit at each, underneath it are the squares hit during that game play. may also contain the missed status when players miss their turns which will contain access to retrieving those missed turns in exchange of their tokem. turns that have not been taken are left blank Current Final Score -indicates the general tally of score for the current game. Scoreboards are specific to each sports game which will be detailed on the scope.

1

Header and Scroll Bar -indicates the sections and scroll bar is provided for navigating longer panels for text.

2

Game Guidelines -narrates instructions adn guidelines on how selected sport is played.

3

Game Objectives-includes objective to determine the winner for each sport

4

Main Board Legend -legend provided for the main board which states meanings of symbols on the main board.

5

1

Board Legend for supplementary Boards -legends for boards that have supplementary grids (i.e. Penalty board for Soccer, Conversion and Hail Mary for NFL) are also included.

How to Play -details general instructions on how to play a game within the app. More detailed instructions can be found from the game options for each sport

2

About -page where details of the app creator can be found, may also lists various contact details i.e. facebook, twitter, email accounts

3

Facebook -states currently signed in facebook user. may also allow the user to switch users from this area

4

Tell a Friend -connects to an email API for the user to invite friends to download the app

5

Sounds -turns sound on or off with a toggle switch


Sport sixes application proposal & wireframes

Sport sixes | UX DESIGN

An explanation of 1 turn cycle

4.1 C1

4.1 B1









 1





   





   





1























 

























































1

2 3 4



 

























































1 

2



1

 



 

















 









































































2























































































 





























2

3

3

       



2



$.3030-

  



//.-)-2



 



















 

























      $.3'.0)(.&,

 "     $





3 













% #  !  



 

 1/&')









 



   



 

3

 

        



1

 



)11&*)

1



4.1 C1



&00+)0







---











1

 

4.1 B3











4.1 B2



     





1 2































































4





















 

0)230-

5

gameplay:

gameplay:

gameplay:

gameplay:

gameplay:

gameplay:

user’s turn

first die roll

second die roll

hitting a square

Compose message

waiting for opponent

This Screen and the next series of screens within this page illustrate the actual gameplay when taking one’s turn. The above shows a screen when a user has just opened up a game, ready to take his turn. It shows the most recent results from the opponent’s end. Status boxes are shown for a minute and then will automatically fade away to give way for the user to take his turn. Alternatively, the user can also tap on any part of the screen to make the status boxes disappear.

To hit a square within the grid, two dice rolls are required: one to determine the column and another for the row. This two rolls of dice are indicated by the number on the Roll button.

Upon tapping the roll button for the first roll, the first die animates in position and at the end of the animation, a ball will roll from behind and wait on top of the result’s column. This will then limit the user’s squares to that column as indicated by the highlighted squares. The 2nd die will then be ready for rolling to determine the final square result of the user for that turn.

As soon as the user taps on rolling (the second die), the die animates in position and rolls the ball into the 2nd die’s result.

Users can exchange messages tithin the game. Upon tapping the message button from the main game area, they are lead to this page which is a simple compose screen for text

As soon as the user hits a square, and gets done with his turn, the results are turned over to the network and passed on to the opponent for him to go through the same process (Screen 4.1 up to this screen). This is also the screen that will show on the user’s end while waiting for a turn. The cycle is repeated until both players are done with all of their turns and the score between the two players are finalized.

Your turn -calls the user’s attention on his turn Latest Game Update from the opponent’s turnstates the most recent results from the opponent’s latest turn. Last Square hit by the opponent -highlighted to show the user which among the squares were hit by the opponent Tap on any part of the screen to start the user’s turn -allows the user to start his turn

1 2

First Die -the first die that determines the square’s column. Roll Button -with each turn, users are given two rolls to determine the square. the first roll will trigger the first roll, it can be accompanied with dice roll sound effect or the user.

1

Legend for Soccer game: 0, 1, 2 =goal, numbers contribute to score, +1 to score for 1, and so on YC (Yellow Card) =miss next turn RC (Red Card) =miss next two turn P (Penalty) =opens up a new grid (Screen 4.1.1)

2 3

First Dice animates in position -will animate with the game’s sound effects and a ball will appear from behind and settle at any of the 6 columns. selected will then be highlighted and be ready for the second roll. Second Die -die determines final square for the user’s turn, as a result and which will contribute to the score. Roll Button -triggers the second die to be cast

1 2

3

Second Dice animates in position Hitting a Square -the intersecting square square of the first and second dice is highlighted by the ball and will determine the user’s score for the current turn. a status area that elaborates on the square hit by the player on that current turn would overlay the grid Message and Send Buttons -the roll button is replaced by two buttons to message the opponent or send the game straight away

1

Back

2

Message Body -where users can key in their messages to the opponent

3

Send Button -Sends the game back to the opponent

1

Opponent’s Profile and Score -Shows the opponent’s profile and Score. highlighted to show the active player at the moment

2

Dice indicators for the opponent -Dices are colored (related to the opponent’s) to indicate whose turn it is

3

Results Box for the turn -shows the user’s results form his last turn

4

Square Hit from the last turn -highlighted for the user to easily locate which among the squares were his last hit

4

Status Area -states current status, that is, waiting for the opponent


Sport sixes application proposal & wireframes

Sport sixes | UX DESIGN

Various games within the app and sub-boards

4.1.1

4.2

1

 



 



  



 









   





 















   

















  

4.3.3

 



  













  















































































































 



 

 

























































 



 



















































 



 



 

 











































 

 



 



 

















































 



 















































 

 



 





1







4.3.1









4.3.2









  

4.3



















soccer sub-board gameplay:

sport mode:

Sport mode:

sportmode, NFL sub-board:

sportmode, NFL sub-board:

sportmode, NFL sub-board:

user’s turn

Cricket

NFL

nfl hail mary

NFL conversion

NFL 2pt conversion

Two Sport Games within the application have supplementary boards that are triggered whenever users hit a particular square within the grid. For Soccer, the Penalty board is triggered when a user hits any of the Yellow Card or Red Squares. This will also further determine the score for that user as the gird is filled with new symbols.

The second sport within the application is the Cricket, which gives 6 bowls/turns to each player (12 turns total.) Scores are formatted as [number of runs / wickets number] .The winner is determined by the most number of runs, in the form of numbers contributing to the score (1,2,3,4,6.) If a user hits the W (wicket), they lose a turn which also contributes to their outs score. A total of 10 outs would terminate the game. If the end game results to a tie between the two players, the winner is determined by the player with the least number of outs.

The NFL is divided in 2 halves, allotting 6 turns to each player. The legend of the game is as follows:

Whan a player hits on an HM (Hail Mary) square from the main board, the corresponding Hail Mary Board opens up on screen. Legend is as follows:

The conversion screen opens up when a player hits on a TD (touchdown) square. Apart from the 6 points that a player gets from hitting touchdown, the player is given another turn to hit any of the squares from the conversion screen. Legend is as follows:

If on the last roll player 1 is on a certain score and then player 2 gets a touch down which lands them 2 points behind player 1, they end up at a 2 point conversion screen.

Soccer Penalty Header -indicates the name of the board.

Legend: G (Goal) M (Miss) S (Saved)

TD (Touch Down) =6 points opens the conversion screen (Screen 4.3.1) FG (Field Goal) =3 points HM (Hail Mary) opens the Hail Mary Screen (Screen 4.3.2) 5YD (5 Yard Penalty) =Miss a turn SAF (Safety) =2 points to the opponent INT (Interception) =0 (zero) Value

TD (Touch Down) =6 points also opens up the conversion Screen (Screen 4.3.1) INT (Interception) =0 (zero) value

1 =1 point M =Missed Goal

(Because the normal conversion screen could only get them 1 point which would not be good enough for this rare situation) This screen makes it possible for the player who is only 2 points behind to actually score the two points. If a game is tied after the 2PC (or tied at all) then a sudden death occurs: players roll dice to see who goes first, then the first to score WINS.


Sport sixes application proposal & wireframes

Sport sixes | UX DESIGN

Golf Game within the application

4.4.1

4.4



 

1









  



 2

  

 























































































  



 



  

 









 









  

---











 





 







 

 





 



   











   



     





GOLF SETUP:

sportmode:

GOLF GAME OPtions:

Picking a Golf Course

GOlf

GOLF SCORE

An addition configuration screen is added for when users choose to play the golf game within the app, They get to pick a course from a list on the way in which will have the matching pars to the real life courses.

From among the sports within the application, Golf gives the most turns with 18 turns each (similar to the 18 golf holes.) And just like the real golf game, players with the lowest number at the end of the game, wins. Legend for the grid goes:

Golf games will have a slightly different score cards from the rest of the games within the app in that, turns are termed as holes, with 18 total, and each hole assigned their corresponding par.

1

List of Available Golf Courses -calls the user’s attention on his turn

2

Tap to start golf game-states the most recent results from the opponent’s latest turn.

EAG (Eagle) =means -2. If the par is 3, then an Eagle is a Hole-In-One in which case the score board and feedback will know this and react appropriately. (But the scores continue to stack normally) PAR (Par) =0 points added BIR (Birdie) = -1 effect to points BOG (Bogey) = +1 effect to points DB (Double Bogey) = +2 effect to points TB (Triple Bogey) = +3 effect to points


Sports Sixes