Pet Rescue Puzzle Saga
|
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. |
A small snippet of some tests I tried
|
Wood planks and parchment?
|
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 :) |
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.
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. |
Overall theme of UI
|
Breakdown of art elements on Fern's journal
|
Prototyping room selection |
Final screens
Game screenshots of some of the final UI screens I made
Huge thanks to my UI Bros Caitlin and Kalle for making this project such a success!