Roberta Tam - Art & Design

  • illustrations
  • sketches & fun
  • game development
  • resume/cv
  • shop

       

  • illustrations
  • sketches & fun
  • game development
  • resume/cv
  • shop
Roberta Tam - Art & Design

Pet Rescue Puzzle Saga

Download on Android / iOS
Picture
On King's Pet Rescue Puzzle Saga, I worked with a small and agile UI/UX team to redesign the user interface and usability now the game.

I redesigned the UI style into what it is today with the help of Caitlin Goodale and Karl Odegrim.  When I joined the project, the UI visuals were the weakest part of the game.  It offered no personality and did not do anything to help immerse the player in the world of the game.  My task was to give it facelift and create a new look that was unique to the gameplay and story of Pet Rescue Puzzle Saga.

Finding a new UI Style

The game is about a fox, Fern, who travels through the world in a hot air balloon to rescue small pets.  So I began thinking - how could we make the game UI convey a feeling of adventure to correspond with Fern's journey?

I found inspiration in various games and tried a huge variety of styles ranging from blueprints, notebook paper, detective files and more.  Eventually, I began narrowing it down to two kinds of styles- one that used wood boards paired and parchment and another that used scrapbooking and paper.

Picture
A small snippet of some tests I tried
Picture
Wood planks and parchment?
Picture
Or scrapbook journaling?
After lots of discussions with the art and design team, we eventually decided to go with the journaling style.  It felt more unique and new, something that could be easily recognizable as something from Pet Rescue Puzzle Saga.

So I took a closer look at the decorative style of bullet journaling and layering techniques in scrapbooking to see how I could  translate it into our game.  I even tried bullet journaling to do a more immersive dive into it... and also because it looked like fun :)
Picture
Nailing down that UI style
The final proposal I made included a journal with layered papers.  I wanted the UI to feel real, like something that we could physically make, and it should be immersive and exist in the world of the game.
Picture
Before and after the rework

Creating the UI/UX for production


Throughout the project, I created style guides for the team with breakdowns of how to create UI elements.  My UI/UX team and I also  established guidelines, templates and pipelines to streamline the creation process.  I used Photoshop and Illustrator to create the UI assets and Draw.io and Proto.io for prototyping, wireframes and flows when creating new features for the game.



Picture
Overall theme of UI
Picture
Breakdown of art elements on Fern's journal

Prototyping room selection

Final screens

Picture
Game screenshots of some of the final UI screens I made

Picture
Huge thanks to my UI Bros Caitlin and Kalle for making this project such a success!

© Copyright 2011-2020 Roberta W. Tam. All rights reserved.