Join Pumpkin, the alley cat on a mystery detective adventure!

Core Functionalities: Inventory Item Closeup, Dark Mode

What role did I play?

UI Designer

FAQ’s

How much time was spent?

5 weeks

What tools were used?

  • Figma

  • Procreate

The Concept

We held a vote on various concepts for our next game in the video game development lab I work in, and the winner was Cat Tective. Our goal was to make a 2D game where the player takes on the role of a cat and must solve puzzles in various locations. An animal friend will give you an item to customize your cat or a key to unlock a new area each time you solve a puzzle.

For my Prototyping II class, I wanted to incorporate a small inventory user interface prototype for this game along with a small interaction prototype that allows you to switch to a "dark mode" in this concept using advanced prototyping in Figma.

Design Process

I focused mostly on functionality because I find it difficult to achieve it when prototyping in Figma, so I kept the design of each screen fairly straightforward while still maintaining a fun concept.

I used a pop-up inventory screen, a landing screen, and a "in-game" screen.

Landing Screen, Figma

“In game” screen, Figma

Inventory Item Pop Up, Figma

Visual Aid

Components

Inventory Hover Button, Procreate

Graphics

Cat Walking gif, Figma

Home Screen Buttons, Figma

Item Slot, Figma

Cardboard Inventory Background, Procreate

Functionality

For my prototype, I incorporated Boolean properties, variable modes, and conditional logic.

I wanted to be able to include a "dark mode" background with a button click for my prototype's primary functionality. It was difficult for me because I also packed a lot of features into my inventory slot.

All things considered, I am happy with how both features turned out.

Dark Mode Variable, Figma

Inventory Item Close up, Variables, Boolean Properties, & Conditional Logic, Figma

Reflection

All in all, this was a fun project, but I do wish I had had more time to work on it and learn different strategies for handling variables in Figma.

During this project, I gained a lot of knowledge about Figma's advantaged prototyping, and I definitely want to expand my horizons and push myself even harder the next time I work with variables.