Embed Size (px)
Citation preview
By Xiaoye Lin
To find the correct ergonomic solution to create an appealing user experience.
To identify problems and propose solutions that make a complicated task accessible and easy to perform.To identify the core navigation elements in order to create an easy to follow menu flowIs able to convey the game mood with a simple and understandable visual language.
Test One
This analysis is based on one of the Gameloft released game: Blitz Brigade ( shop menu )
UX/UI problem:Shop should be prominent and placed in a position that convenient the player. Based on user’s preferences, place the shop button in right or left bottom corner.
UX/UI problem:Visual representation for one/multiple player mode could be efficient.
UX/UI problem:Unequipped, equipped and un-bought items are not clearly marked.
UX/UI problem:Information hierarchy is confused. Have no idea about which is menu and which is sub-menu.
Possible solution for the problems above (Sketch)
Emphasis play button Make current play mode accessible
Make shop more accessible
Make arrow bigger and easy to be tapped make the items and its nav more clear
visually distinguishing purchased, currently equipped, available items in store
New Navigation Flow from Main Menu to game action:
LoginCoin# Gem# Shield#
Player Mode Shop
Loading
LoginCoin# Gem# Shield#
Player Mode Shop
Current/saved playerPlay
When load is done, the current or saved player(s) preview appears and fully covers the screen with a play button on it
User/LoginCoin# Gem# Shield#
Player Mode Shop
Current/saved player
Add Coins/ Purchase Coins
Add Gems/Purchase Gems
Purchase Shield
Account info/login screen
Play
change player mode Shop Screen
Game play Screen
Redesigned shop screen Mockup (psd)psd file URL: https://www.dropbox.com/s/sverlgzx4n2cy3h/Shop.psd?dl=0
Test Two
To distill elaborate game functions into ergonomic and accessible menus and flow.
To showcase the ability to structure and organize an elaborate menu flow.
Flow 1
Leader Board
Time-Limited
Tournament
Racing
Game
Loft User Name
Options
quick start
GAME FEATURES (in order of importance)
Time-Limited Tournament
Friend Leaderboard
Multiplayer Matchmaking Races
Single Player Career Series
Multiplayer Local WIFI
Single Player Quick Race
Profile
Options
Leader Board
Time-Limited
Tournament
logoUser Name
Options
quick start
Back
Multiplayer
Matchmaking Races
Single Player
Career SeriesMultiplayer
Local-WIFI
Main Menu
Mode
Tap Racing button
An overlay sliding in with options on it
Leader Board
Time-Limited
Tournament
logoUser Name
Options
quick start
Back
Single Player Career Series
SERIES 1 SERIES 3
36/999 0/999
SERIES 2
0/999
Leader Board
Time-Limited
Tournament
logoUser Name
Options
quick start
Back
Single Player Career Series: Choose an event
TYPE 1
0/3
TYPE 2 TYPE 3
0/3 0/3Any Class SPECIFIC
Series
Event
Tap unlocked series
Type options slide in
Leader Board
Time-Limited
Tournament
logoUser Name
Options
quick start
Back
Single Player Career Series: Choose a car
Class 2Speed: 200 km/
Acceleration: 30
Handling: 5
Select and start
100
Game play
Car
Counting Down
Tap an unlocked type
To choose a car, each car is slowing rotating in different perspectives.
when Select and Start button is tapped, all the elements on the screen quickly slides away and the overlay fades out, the game play screen reveals.
Flow 2
Leader Board
Time-Limited
Tournament
Racing
Game
Loft User Name
Options
quick start
Leader Board
Time-Limited
Tournament
logoUser Name
Options
quick start
Back
Multiplayer
Matchmaking Races
Single Player
Career SeriesMultiplayer
Local-WIFI
Leader Board
Time-Limited
Tournament
logoUser Name
Options
quick start
Back
Single Player Career Series
SERIES 1 SERIES 3
36/999 0/999
SERIES 2
0/999
Leader Board
Time-Limited
Tournament
logoUser Name
Options
quick start
Back
SERIES 2
0.99
1x 2x
1.99
3x
2.99
4x
3.99
This series is locked. To unluck it by winning 40 trophies in series 1
4You need trophies
Leader Board
Time-Limited
Tournament
logoUser Name
Options
quick start
Back
Single Player Career Series: Choose an event
TYPE 1
0/3
TYPE 2 TYPE 3
0/3 0/3Any Class SPECIFIC
Leader Board
Time-Limited
Tournament
logoUser Name
Options
quick start
Back
Single Player Career Series: Choose a car
Class 2Speed: 200 km/
Acceleration: 30
Handling: 5
Select and start
100
Leader Board
Time-Limited
Tournament
logoUser Name
Options
quick start
Back
TYPE 3
999
Purchase a car to unlock SPECIFIC
Car NameCar Parameter
Owned
Leader Board
Time-Limited
Tournament
logoUser Name
Options
quick start
Back
TYPE 3
999
Purchase a car to unlock SPECIFIC
Car NameCar Parameter
0.99
Time-Limited
Tournament
logoUser Name
Options
quick start
Back
Car NameCar Parameter
Select and start
Leader Board
Time-Limited
Tournament
logoUser Name
Options
quick start
Back
Single Player Career Series: Choose a car
Class 2Speed: 200 km/
Acceleration: 30
Handling: 5
Buy800
100
win it
Leader Board
Time-Limited
Tournament
logoUser Name
Options
quick start
Back
SERIES 2
0.99
1x 2x
1.99
3x
2.99
4x
3.99
This series is locked. To unluck it by winning 40 trophies in series 1
4You need trophies
Art Mockup (psd)psd file URL: https://www.dropbox.com/s/j7bv0toucp99m74/trophies.psd?dl=0
Due to limited time, I was not able to make the interactive mockup by html/css/js
Thank you for reading
If you have any question, please email me [email protected]
For my previous project http://www.handshadow.info/projects
