Embed Size (px)
Citation preview
Wireframes Mobile App.in Game flows
LSTK Ltd. – November 2014
User Journeysclick on “play”
Game preferences Players Games Status
(waiting)
Games Status(idel)
select Player
rate Challenge
play Challenge
assessChallenge
when Player is “playing”
when Player is “assessing”
OverviewUser Journey – initiate a Game
User Journey – play a Game
User Journey – initiate a Game
Wireframe – Game Preferences
game title
some preferencevaluelorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet iaculis orci.
some preferencevaluelorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet iaculis orci.
1. preferencesa) same logic as App preferences, but
only showing preferences specific to this Game
2. invite buddiesa) “invite buddies” goes the invited
Players screen
< game preferences
invite buddies
value 1 value 2value 2
icon
2
1
Wireframe – Invited Players
game title
player nickname
player nickname
player nickname
add more buddies
1. player’s highlighta) avatarb) nickname
2. remove Player3. add Player
a) goes to the Players Selection screen
4. selection completeda) “start game” goes to the Game
Status screen (state will be “waiting”)
b) button is greyed out until the required number of Players have been added to the game
< buddies playingicon
2
start game 4
playeravatar
playeravatar
playeravatar
1
3
Wireframe – Players Selection
player nickname, ## ## games played together
player nickname, ## ## games played together
player nickname, ## ## games played together
1. players filtersa) my buddies (depending on App
capabilities, also other sections)
2. player’s highlighta) avatarb) medalc) nicknamed) agee) number of games played together
3. invitation selector4. selection completed
a) “done” goes back to the Invited Players screen
< buddiesicon
my buddies have a look all1
playeravatar
playeravatar
playeravatar
2 3
done 4
Wireframe – Game Status
player nickname
player nickname
player nickname
We’re now waiting for your buddies to join…The Game will start right after the first buddy
has joined, get ready!
1. Players overviewa) avatarb) nicknamec) role (assessor, playing, idle…)
2. info message3. advertizing area
< game statusicon
game title
idle
waiting…
waiting…
1cplayeravatar
1
advertizing area4
2playeravatar
playeravatar
OverviewUser Journey – 1st time
User Journey – buy & start a game
User Journey – messages, preferences & profile
User Journey – scores, buddies & chat
REST Mappings
User Journey – in-Game
Wireframe – Game Status
player nickname
player nickname
challenge title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pretium…
player nickname
1. Players overviewa) avatarb) nicknamec) role (assessor, playing, idle…)d) time left
2. Challenge overviewa) avatar enhanced with Challenge
imageb) titlec) short description
3. go to Challenge details4. advertizing area
< game statusicon
game title
assessor
playing1h 30min left
idle
1c
challenge image
playeravatar
playeravatar
playeravatar
1
advertizing area4
32
2a
Wireframe – Challenge Details
challenge title
1h 30min left
for completion
descriptionLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet iaculis orci. Fusce vulputate vehicula ultricies.
challenge proofsyour privacy is essential, proofs are only shown to the assessor and nothing is stored on our server
attach a photo
video attachedMonday 24th,
November at 14:52
challengeimage
< your challenge
1
photo icon
thumbnail
2
4b
icon
3
4
1. Challenge image2. Challenge overview
a) titleb) time left to complete the challenge
3. Descriptiona) long description for this challenge
4. Challenge required proofsa) privacy noticeb) proofs not attached
i. add icon (photo, video, audio, location)ii. action description
c) proofs attachedi. thumbnail with icon to view/playii. date proof attachediii. checkmark
4c4c
Wireframe – Challenge Details (cont’d)
challenge proofsyour privacy is essential, proofs are only shown to the assessor; nothing is stored on our server
attach a photo
video attachedMonday 24th,
November at 14:52
attach an audio file
record your location
comment for the assessor
4. proofs5. comment6. fail (“Can’t do it”)
a) shows Challenge Rating screen
7. completeda) shows Challenge Rating screen
< your challenge
photo icon
thumbnail
4
icon
audio icon
location icon
completedcan’t do it…6 7
anything to say to the assessor?
Wireframe – Challenge Rating
challenge proofsyour privacy is essential, proofs are only shown to the assessor; nothing is stored on our server
attach a photo
video attachedMonday 24th,
November at 14:52
attach an audio file
record your location
comment for the assessor
< your challenge
photo icon
thumbnail
icon
audio icon
location icon
completedcan’t do it…
anything to say to the assessor?
How much fun was this challenge
report this challenge as offending
complete crap
not my cup of tea
ok
cool
totally awesome
1
2
1. Challenge ratinga) 5 options possibleb) goes back to Game Status screen
2. abuse / offending flag
Wireframe – Challenge Assessment
challenge title
played by nickname
on 24/11 at 14:52
30min left
for assessment
descriptionLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet iaculis orci. Fusce vulputate vehicula ultricies.
proofs of completion
comment from playerLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
< your challenge
photo thumbnai
l
2
icon
3
4
1. Challenge image2. Challenge overview
a) titleb) player nicknamec) date & time of completiond) time left to assess the challenge
3. Descriptiona) long description for this challenge
4. Challenge proofsa) proofs attached
i. thumbnail ii. date proof attachediii. checkmark
5. comment from player6. reject
a) goes back to Game Status screen
7. accepta) goes back to Game Status screen
video thumbnai
l
audio icon
location icon
game image
acceptreject6 7
challengeimage
1
5
REST Mapping
OverviewUser Journey – 1st time
User Journey – buy & start a game
User Journey – messages, preferences & profile
User Journey – scores, buddies & chat
REST Mappings
