Neo Cab is a narrative game about staying human in a world disrupted by automation. It was nominated for a BAFTA Games Award for Game Beyond Entertainment, and has received positive reviews from critics and players alike.
I first joined the team in the early stages of the project as a part-time UX Designer, but I quickly transitioned into a full-time role where I took on additional responsibilities like leading UI/UX, 2D art and animation, and rigging the characters.
Lina's Phone Screens
Most of the game takes place in our main character's car where she picks up passengers throughout the city. Lina uses her phone between rides to check on her funds, record things in her journal, choose her next passenger on the map, and even check in with her emotions.
I wanted the phone experience to feel extremely focused and simple— where Lina is completing tasks quickly and then moving on with her day.
I tried to avoid large areas of text, too many buttons on each screen, and distracting decorative elements.
Challenges
The map was a valuable lesson of the disparity between what I could mock up and what was technically feasible with our tools, team size, & scope. There are certain things that we originally mocked up that did not make it into the map, but we used the original vision as a guide and added as much as we could realistically build.
Conversation UI
Since this is a narrative game, a clear set of text styles is absolutely crucial. The game required visual differences between the various types of text like dialogue, narration, and actions so the player knew exactly what they were looking at.
Positioning the UI in all of the different shots was quite challenging. I needed to account for the longest possible text and ensure that the containers weren't overlapping faces. I designed a speech line, inspired by comics, that points from a character's mouth to their corresponding dialogue box.
The Feelgrid
Neo Cab is an emotional survival game, and Lina’s emotional experience has always been a key part of gameplay.
She wears a bracelet called a Feelgrid which displays her emotional state and sometimes affects the player’s choices throughout the game. The bracelet color changes to visualize Lina's mood, but this alone wasn't a clear enough indicator to the player that a shift had occurred.
The Objective
I was tasked with designing the 2D representation of this system based on The Affect Circumplex: the same conceptual tool used by people who study this for a living. This is basically just a graph with Arousal as the Y axis & Valence as the X axis.
Valence is how positive or negative a feeling is. Arousal is the feeling’s intensity. If you plot Lina’s arousal and valence, that’s her affect.
My goals were to:
Turn this somewhat complex scientific system into a simple & useful visual that players could reference during the game.
Complement the existing sign of an emotional shift, which is the color on Lina's bracelet.
Explain the colors, quadrants, and axes to the player without getting bogged down by confusing terms, like arousal & valence.
Make it clear that there are different intensities of emotions. Outer edges are more intense, where lighter shades in the center are more mellow. You usually want to stay as centered as possible during the game.
One thing we determined in the exploration phase was that we preferred stepped cells to a continuous gradient of colors. This was a serious exercise in visual design as I mocked up diagram after diagram...
...and here’s our final circumplex!
These cell shapes, based on a voronoi diagram, are visually pleasing and worked really well for the various intensity levels we needed to display.
We use rings to reinforce which quadrant you’re currently in.
I designed four icons to label the axes when the circumplex is too small for text labels. The inactive icons are faded, and the active ones are fully opaque.
Below is the final design of the Feelgrid app:
What I Learned
Neo Cab needed a HUD! After fighting it for a long time, we finally determined that the emotional shifts were so much easier to notice & understand with a circumplex HUD.
I was hesitant to add something like this to the rides because we spent so much time trying to make everything diegetic. In the end, I'm so glad that we broke our own rule, tested this out, and learned that this was a huge help for players.
The HUD updates in real time during the game. We show a temporary white line from your last state to your new one. I think this makes the shift easier to see and reinforces the little journey Lina took from her last affect to her new one.
You can see the HUD in the actual game below!
The End
This role was like a game dev bootcamp for me. I had the opportunity to learn from experienced artists, engineers, producers, and writers. I took on a significant amount of responsibilities, worked closely with a team of brilliant devs, dove into unfamiliar technologies, and solved different problems every day. I’m so lucky to have worked on this project, and I’m really proud of what we made!
The video below is my full (17 min) talk from LudoNarraCon, Fellow Traveller's online conference.
Contact
Please fill out the form below if you'd like to get in touch.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
