Game UI/UX Design
Critter Cafe Game
Introducing: The Critter Cafe!
After making some mock screenshots of a cute cafe mobile game - I received a TON of positive feedback to make it real!
While I’m not a game developer (yet!), I did want to see how far I could take the game with the very small scope of a simple demo/tutorial that theoretically I could make in Figma.
Using my Illustration, UI Art, and Prototyping skills - I created a playable prototype of the demo of the game to test out before figuring out how to make it in Unity (eventually).
Cooking Up Cuteness in Figma
Tools Used
Adobe Illustrator
Figma
User Research
User Testing
UX Design
Wireframing
User Flows
Prototyping
Visual Design
Creative Direction
Illustration
Style Guide
An Over-Ambitious User Flow Plan
Once I decided to build out everything I’d need for a demo, I got to planning! First I made an ideal user flow for all the different actions and screens I’d need to account for. I also wanted to make sure that my project didn’t get too out of scope for the purposes of this project.
Spoiler alert: it did!
I ended up focusing on the core gameplay in the demo - from Intro Dialogue to Day Complete in order to get something people could play as quickly as possible.
Super Sweet UI Design
For this project, I created all of the game assets and UI elements on my own using Adobe Illustrator. I went for a welcoming, cute but not sickeningly sweet vibe (think Animal Crossing, not Candy Crush).
The idea behind the game is that it’s a cafe in the woods meant for woodland critters, so while I’ve included pastel colors - the color palette is largely brown, including the strokes on both the UI and game elements.
The First Critter Cafe Demo Prototype!
To get started, I made an extremely simple prototype in Figma of how a demo of the game could work.
After doing some informal testing, I added a few things like arrow indicators for where to tap/drag after the dialogue instructions are gone and changed the action to serve the customer coffee from tapping on the customer to tapping on the order bubble, after realizing how very tap-able it looks.
The First Reviews Are In!
After user testing on my demo prototype and a mostly favorable response, there was one piece of feedback that I wanted to address:
“Admittedly, I got a little confused and didn’t realize I needed to click the arrow button by the text before interacting with the game. BUT ... that’s because I haven’t played anything other than board games in well over a decade. ”
— Playtest Participant
While this playtester admitted to not being familiar with games, that’s exactly the kind of person that I imagine might play Critter Cafe. Not necessarily “gamers” but more casual mobile users - so this feedback is really important!
Next Recipe In Progress
For the final prototype, I will be addressing the user feedback from the initial prototype and adding more scenes from my initial user flow!
