☰
☰
ROLE
OVERVIEW
I wanted to steer away from website and mobile UI design for a bit, so decided to take on a challenge and design a game along with a group of amazing game artists, animators, developers and musicians. Having not been a huge gamer growing up myself, it was a truly challenging yet rewarding experience for me.
In A Thief's Tale, you play as a young thief named Crow who can jump into fairy tales and steal their treasures. Sneak around, loot the treasures, and unlock new stories.
A Thief's Tale is a 3D stealth heavy side scrolling platformer with unique puzzles and gut-wrenching humor. You play as Crow, a young thief who jumps into the fairy tale world of: The Emperor’s New Clothes, to steal from the gullible king and the sly trickster. Throughout the game, you collect various trinkets and quirky items. Each item unlocks new abilities allowing Crow to progress further into the fairy tale and gain access to new treasure.
I joined the team right around midway through the game’s development stage, so there were already existing placeholder UIs to start with. However, a lot of page interactions were not fully thought out yet, so I made a player flow chart first, laying out all the possible routes and screens there could be and labeling the interactions between each screen. This helped me visualize what elements were crucial to the core concept of the game, and what were missing in the pre-existing designs.
I then made wireframes of all blue labeled screens, which were the ones that required at least some sort of UI element. This helped me plan out what assets could be reusable and what needed to be redesigned, as well as what was still yet to be created for a better player experience.
I spent a lot of my time researching for visual and contextual references so I could have a better idea of what direction to take. I looked at various JRPG games to try to study their UI designs. I wanted to strike for that balance between Western fairytale-like designs and Eastern paper scrolls aesthetics.
At this stage of development, my team was also in the process of finalizing the name for the game. There were a few options we were deciding on, so I made quick logotypes for my teammates to quickly visualize how each name would look like if it was made into an actual logo.
Once we decided that "A Thief's Tale" would be our chosen one, I then further refined the logotype and embedded a knife blade into the design to give it a little more stealth vibe.
Logotype with embedded knife blade
Proposal 1 (chosen logo)
Proposal 2
I had an idea of making the splash screen into a fairytale book cover, and making the main menu into a design as if the player opened that same book and all the characters floated out from the book. I pitched this idea to my teammates at fist and they really liked it. However, my execution of the book cover was too realistic to start with, so I researched more book textures using a more painterly look and ended up with my final design.
Final Splash Screen Design
The main menu design is a continuation of the splash screen, where players are first introduced to the story and the characters. I wanted to make this into a darker themed background to accentuate the light and colors. From the splash screen to the main menu, it is as if a fairytale book has been opened. There will be an animation of book opening as the transition.
Main Menu Design
I wanted to keep a clear distinction between the pre-game screens and in-game screens to let players know where they are exactly. Therefore, all the gameplay screens will have a subtle book overlay around the screen to emphasize the book look and feel.
The gameplay screen would have a plage flip hint on the top right corner, and when players pause, the page will flip to the next page, where the inventory is. Players then are given the choice to either continue playing the game, or quit to return to the main menu.
The main menu design is a continuation of the splash screen, where players are first introduced to the story and the characters. I wanted to make this into a darker themed background to accentuate the light and colors. From the splash screen to the main menu, it is as if a fairytale book has been opened. There will be an animation of book opening as the transition.
From not knowing much about game designto being able to design and help develop a full-scaled game project, I felt very proud and accomplished both for myself and for my team. The coworking environment that was continuously provided through the duration of my participation really prepared me for what to expect in the industry as a collaborative designer. I am excited for the future of A Thief's Tale, and I hope to use the skills I learned from this project in my upcoming design endeavors.
