Website powered by

Mocha Magic UI Work

UI layout and assets for my student capstone game, Mocha Magic.

Mocha Magic is a cafe-sim bartending novel in which you seek to create the "perfect drink" and in doing so make connections to the customers that come into your shop. It can be played here: https://catpawgames.itch.io/mocha-magic

I designed the layout, and created most assets for, several of the menu screens in game, as well as the game's logo.
Each menu went through a few phases of feedback and iteration before they were finalized in the game engine.

Assets that I did not make were made by:
Background screens (crafting, recipe book): Isaiah Cisneros
Ingredient and drink sprites: Taylor Fagundes
Flavor icons, dialogue box: Mai Trang Nguyen

Final game logo

Final game logo

Original logo concepts

Original logo concepts

Crafting screen mockup/layout sketches, and Recipe screen mockup/layout.  Recipe button color variants.

Crafting screen mockup/layout sketches, and Recipe screen mockup/layout. Recipe button color variants.

Final recipe screen in-game

Final recipe screen in-game

Crafting screen mockup/layout notes

Crafting screen mockup/layout notes

Crafting screen layout with implementation instructions and created assets (minus background)

Crafting screen layout with implementation instructions and created assets (minus background)

Final crafting screen in-game

Final crafting screen in-game

Save/load menu, which thematically reused the flavor icons from the recipe screen

Save/load menu, which thematically reused the flavor icons from the recipe screen

Pause screen with notes; some buttons were later changed to have colors for easier visibility

Pause screen with notes; some buttons were later changed to have colors for easier visibility