top of page

A visually charming match-three puzzle game with original characters. As the only UX/UI designer on the team, I handled everything from early wireframes and user flows to high-fidelity mockups and production-ready 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

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

 

before

after

3.

Untitled 2.001.jpeg

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

 

1.

2.

3.

before

after

Untitled 2.002.jpeg

1.

2.

3.

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

 

before

after

2.

3.

Untitled 2.003.jpeg

1.

1.

2.

3.

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