top of page
JUL 2020 - OCT 2020
TIMEFRAME
UX DESIGNER & DEV
MY ROLE
VIDEO GAME
PRODUCT
INDIE PROJECT
CLIENT
OVERVIEW
Released in 2020, TUMBLE is an indie puzzle game. I was in charge of creating all the interfaces that can be found in the game. Ranging from Main Menu, Select Screens and the In-Game Menu. As well as implementing all the interfaces in engine and developing some of the main mechanics of the game too.
• Implement all the interfaces in engine and also script all the necessary animations required for the interfaces.
• Crafted wireframes, interactive prototypes, visuals and UI assets.
• Main UI/UX & Visual Designer.
• Implementing the interface in engine and ensuring all the animations are functioning properly.
• Ensuring that the UI is clean and minimalistic cause we want the visuals to speak for itself.
• Making sure that the interface has a relaxing and minimalistic vibe to it.
• Create a user interface that is intuitive, easy to use, and visually appealing.
PROBLEM STATEMENT
As a UI designer working on an indie mobile game, I need to create a user interface that is intuitive and visually appealing. Since it's a project with a limited set of art assets, I need to find ways to make the menus feel different from each other while maintaining an overarching similar theme and aesthetic. Also, I got to make sure that the interfaces are appealing to new players and something that existing players and fans of the genre can easily recognize.
DESIGN PROCESS
IDEATE
Take a look at a list of references and inspirations and lay out some ideas.
DESIGN
Create wireframes and mockups to visualize my ideas.
PLAYTEST
Get feedback from users to iterate on my designs and make sure they are meeting the needs of the users.
IDEATE
INSPIRATIONS
NOTES
ANIMATIONS
The UI animations need to be smooth and should have some kind of water like property to it.
LAYOUT
The user interface should be Non-Diegetic.
FONT & COLOR
Use thin and long fonts. Keep the text a neutral color while using the color schemes of the biomes for other elements of the UI.
MINIMALISM
Keep the interface as minimal as possible, let the visuals take the center stage
DESIGN
PAPER MOCKUPS
(MAIN MENU AND LEVEL SELECT MENUS)
(IN GAME INTERFACE AND RESULTS SCREEN)
LoFi Wireframes
FINAL DESIGNS
PLAYTEST AND REFLECTION
PLAYTEST
Once we had most of the levels, interfaces, music and art implemented, our team decided to conduct a playtest and see what features we can improve before the final release of the game. The playtesting sessions would be followed by an interview with the players with a set of questions like for example:
Do you know what button to click to increase the amount of lives?
Were the controls of the game easy to understand?
How can the puzzles be made clearer (If applicable)?
Is the interface providing you with enough information?
FINDINGS
• Some of the interface related issues were mostly about the timing of the UI animations. Players felt like there wasn't enough time for them to read a lot of the information being presented like the title of levels and the end results screen. So we ended up slowing some of the animations down.
• We initially just had the move counter (the number of turns the player gets) be represented by text which a lot of players didn't understand. Most of the players figured out its purpose a couple of levels into the game, so to make it easier we added a cube icon next to it. This made it easier and cleaner to represent instead of just text.
REFLECTION
I am quite proud of this project because it was one of the first independent games I published, and it was a pleasure to work with a group of talented designers and artists. It was quite gratifying to see the reviews of the game in the app store and to have the chance to reflect on the ideas we came up with to create a more enjoyable user experience and to also consider what may have been done better.
bottom of page