top of page

Wireframes, User Flows, Prototypes, UI Mockups

This is a match three puzzle game that I worked at Jam City as a senior UX & UI Designer. 

My job is mainly participating meetings with game designers, are director, product designers and producers to decide the future features. Then I'll provide user flows and intractable prototypes for the programmers to implement in the engine.

I love this IP so much because it barely has limit to the style and the content, which allowed us to be creative.

​

 
 
 
appstore-icon-mobile.png
googlestore-icon-mobile.png

Main hud layout improvement

When I took over the project, I wanted to improve the current hud design because it has so many informations displayed on the map, and it looked really messy.

Important features are very east to be lost by the current design, and the overall user experience isn't well.

Here are my ideas of different layout structure

A.

B.

UX planning.png
Mockup_1.png
Mockup_3.png

C.

Mockup_2.png

Here is the comparison to show you the improvement

after

current

adjustments.jpg
map_hud_1.png

I have two ideas to modify the menu navigation tool bar

A. Move the menu to the bottom but keep the X button to exit.

 
Clickthrough_6.gif

pros +

  • It's not changing old player's action.

  • It saves a lot of engineer's time.

​

cons -

  • It's not the best way utilize the vertical space.

  • By putting the control menu at the bottom suppose to be easier navigated by the thumb, if we still keep the X button, it's decreasing the purpose.

B. Take out the X button for all the popups

Clickthrough_7.gif

pros +

  • It's easy and quick to control by the thumb.

  • It has so much space for each tab better utilize contents.

  • Visually it's very nice and cleaner.

​

cons -​

  • It's a new action for the current player to learn and get used to.

  • It requires more time to redesign the layout for each tab.

  • It requires more time for engineers to work on.

Below are some other screens I've done to improve the overall user experience

Pre-game Popup

before

IMG_4688.PNG

after

updated_pre-game_popup.png
updated_pre-game_popup2.png

Out of Moves

Popup

before

IMG_4837.PNG

after

OOM.png
OOM_ads_2.png

Coin Store

before

old_store.png

after

Coinstore_revamp_4.png

NEW FEATURES

VIP subscription bundle

​

The idea is to sell a bundle for our spender to subscript monthly, and they'll get exclusive VIP rewards such as

  • Golden truck for the player's profile on the map 

  • Daily VIP box with special rewards in the item store

  • Live cap up to 10 lives

  • Less waiting time to rewind the live

In Game Purchase Flows

VIP_bundle_3.png
popup.png

Team v.s Team Event

This is a round-based team v.s team leaderboard event.

It's a mini-map progressing event. As a player you have to continually winning each levels without losing a life.

Players collect trophies after beating a level, and the number of the trophy would add to the team this player belongs to.

Two teams are competing to each other by the subtotal of the trophies.

User Flows

End_of_event.png

UI Mockups

TvT_mobile.png
TeamvsTeam_event_Intro.png
TeamvsTeam_event_Info.png
TeamvsTeam_pickurteam_popup.png
TeamvsTeam_Team_joined.png
Waiting_for_joining_10.png
TeamvsTeam_leaderboard.png
TeamvsTeam_pregame_popup.png
TeamvsTeam_win_popup.png
TeamvsTeam_areusure_popup.png
TeamvsTeam_time'sup_popup.png
TeamvsTeam_endoflevel_popup.png

Versus Event

This is an event designed for players who run out of content to play.

We would love to keep them on the game until we released new maps and new events.

This event was very complicated to our casual players, so we done many round of user testing to adjust the content. We want to make sure players understand how it works and enjoy it.

User Flows - first time player experience

Basic flow.png

User Flows - Win/ Lose

Gameplay WinLose.png

Click Through Prototype V.1

Clickthrough_1.gif

Click Through Prototype V.2

Clickthrough_2.gif

FTUE Low-fi Breakdown

Screen Shot 2018-11-30 at 11.41.23 PM.pn
Screen Shot 2018-11-30 at 11.41.45 PM.pn
Screen Shot 2018-11-30 at 11.41.34 PM.pn
Screen Shot 2018-11-30 at 11.41.54 PM.pn
Screen Shot 2018-11-30 at 11.42.10 PM.pn
Screen Shot 2018-11-30 at 11.42.20 PM.pn
Screen Shot 2018-11-30 at 11.42.29 PM.pn

FTUE Prototype

Clickthrough_5.gif

UI Mockups

versus_on_phone.png
Event_intro.png
pick fighter.png
Event_info_1.png
Event_info_2.png
purchase_buff.png
character_re-up.png
ability_info.png
winning_progress.png

UI Animation Prototype

Clickthrough_3.gif
bottom of page