Tsum Tsum
UI Challenge:
Redesign Tsum Tsum UI
— CHALLENGE
Redesign a UI gameplay screen for the Tsum Tsum mobile game
— ROLE
UI/UX Designer
— TOOLS
Figma, Illustrator,
Photoshop
— DURATION
5 Days
BACKGROUND
In this challenge, I wanted to redesign the Tsum Tsum gameplay screen with a Space theme.
OBJECTIVES
• Design a Space theme for the gameplay screen
• Update the User experience if possible
• Create prototypes
Disney Tsum Tsum, developed by Line Corporation and released in 2014 has been one of all time popular puzzle games on mobile. I will be looking into how I could redesign the UI and also implement some UX changes.
Original Tsum Tsum
Tsum Tsum redesigned Space Theme
Above is a comparison of the original game with the final redesigned Space Theme version. I will be breaking down how I develop the UI below.
IDEATION
SKETCH
I started coming up with several variations of the gameplay screen, moving some of the key buttons around. One of the areas I am focused on is the location of indicators and whether they take up real estate in the hot spot areas.
I was also picturing the game space as a cockpit of a spaceship. I started doodling control meters and levers that may work with the overall design. I did research on spaceships and toys with space theme to get some inspirations for the sketches.
FLATS
I start creating wireframes with flat colours. Here are 3 variations.
WIREFRAME 1
I have moved the mission objective to the bottom area as I felt it was blocking the Tsums Tsums as they fall in the game view. I envisioned the mission objective as a holographic display that pops up.
I also rearranged the shuffle button to the left and the power button to the right.
WIREFRAME 2
For this variation, I moved the mission objective back to the top and moved the coin meter to the bottom of the screen.
I kept the shuffle and power buttons at their original positions. I slightly bend the Fever meter to make it look more parallel to the ‘cockpit’ view. I am pretty happy with the layout.
WIREFRAME 3
I designed the timer to be more like a space instrument so that it looks less like a button and more aligned with the theme. I also play with colours so that it be more distinctive.
I also added details to the spaceship panels.
COLOUR VARIATIONS
I sampled colours from the original Tsum Tsum game and proceeded to come up with several colour palettes. I decided to go for the purple variation.
FINAL GAME SCREEN
SPACE THEME GAMEPLAY SCREEN
To render the gameplay screen, I exported the working file from Adobe Illustrator to Adobe Photoshop. I added a faded star-filled background to further simulate that the player is looking through a cockpit.
PROTOTYPE
GAME START
Here is a short video of the prototype. This is when you start the game. You can also test the prototype here.
MISSION COMPLETE
Here is a short video of the prototype. This is when you complete a game mission. You can also test the prototype here.
FEVER MODE
Here is a short video of the prototype. This is when you fill-up the Fever meter by either chaining Tsum Tsum, activating the skill or both. The effect I wanted to simulate is as if the player is going Hyperdrive in space. You can also test the prototype here.