top of page

UI Design, Visual Guideline, User Flows 

This is a match three puzzle game with very charming art style and original characters.
I was the only UX/UI Designer for this project.
I deliver wireframes, user flows, visual mockups and final UI assets.

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

Visual treatment and UI style exploring

Juice Jam is a game has been released over 3 years. Executives wanted to revamp the look and layout design for it so it's more updated with the other games on the market. Here are the visual treatment I worked on for the pre-level popup because it's the scene you see the most from the game.

style_6.png
Play_screen_3_1.png
style_2_6.png
style_3_4.png
style_4.png
style_8-2.png
style_8.png

3.

There are three screens I redo the layouts for a better user flow because they are so important that monazite the most for this game.

  • Pre-game popup

  • Out of moves popup

  • Event 

​

Here are some thinking that I'd like to share with you when I was redesigning.

Pre-game popup

After discussed with our product, there are three elements we'd like to prioritize the hierarchy in this screen. 

  • Pre-game Boosters

  • Play Button

  • Leaderboard

 
Untitled 2.001.jpeg

before

after

1.

2.

3.

3.

1.

​

​

2.

Out of moves popup

After discussed with our product, there are three elements we'd like to prioritize the hierarchy in this screen. 

  • Remained Objects

  • How Much Coins You Owned

  • Play On For #Coins

 

after

1.

​

2.

3.

Untitled 2.002.jpeg

1.

​

​

2.

3.

before

Event​

After discussed with our product, there are three elements we'd like to prioritize the hierarchy in this screen. 

  • Remained Timer

  • Collected Objects 

  • Play Button

 

after

2.

​

​

​

​

​

​

3.

Untitled 2.003.jpeg

1.

1.

2.

3.

before

UI Assets Guideline

I redesigned the render style for the assets and the color code for each purpose.

button_green.png

Play 

button_grey.png

Unavailable/Locked

button_orange.png

Support page

button_fb_connect.png

Connect to Facebook

button_square_booster_inactivated.png

Available

button_square_booster_locked.png

Unavailable/Locked

button_help.png

Help

button_circle_exit.png

Exit

button_circle_numbers.png

Numbers

Final UI Screen Mockup

JJ_screens_1.jpg
JJ_screens_2.jpg

NEW FEATURES

Below are the live event I worked on

wireframes and User Flows - Ernesto's exchange store"

ernasto_flow_1.png

Layout Options

ernasto_flow_2.png

Screen Mockups

Enersto's_mockups.jpg

A big feature called "Town Square" is designed for End of Content players

Screen Mockups for Daily Quest

Accept_Quest.png
TS_quest_skinning.png

Screen Mockups for Placing the Decor

Place_Decor.png
Edit_Decor.png

Character Card Design

TS_cards_2.png

Spinning Wheel Animation

test.gif
bottom of page