Juanito el Nahualito
Juanito el Nahualito is a 3D puzzle-adventure game about a teenage boy who is in search of his grandfather, and on the way learns about his ancestral roots.
You play as Juanito, a Nahual capable of having a spiritual connection with nature and animals alike. Juanito discovers his abilities as he remembers the stories that his grandfather would tell him about their Mesoamerican culture.
Working on this project was the first time that I took on the role of UI/UX Designer for a game. I’ve previously focused on the visual design aspect and wanted to explore the user experience side of design. During my undergrad, I would facilitate usability testing and interviews for several class projects and hoped to put those skills to the test with this game. Since I would be performing this hybrid role, I wanted to make sure that I had a clear division in my work and practiced prioritizing each task appropriately.
For the UI design of the game, I worked on developing the title menu, pause menu, and our credits sequence. Our title menu was inspired by an ancient piece of Mesoamerican artwork where figures are nested within one another and create an awesome effect when displayed with all of the pieces spread out.
This was the inspiration for our menu screen, the Mayan Mask of Death and Rebirth circa 900 AD
One of our great artists created the artwork of the figures for this concept while I experimented with the font and button layout. I thought that using a hummingbird as the cursor to select the different buttons would work well. Each of the buttons would have a flower that would blossom as the hummingbird cursor flew over them. Since our game was broken up into three different acts, I thought it would also be a good idea to create a chapter select menu. Knowing that each of the different acts had a different setting/theme led me to create icons for each of them.
For the pause menu, I worked on creating a sprite that would serve as the background for when the menu popped up. We wanted to stay true to the nature theme, so I decided to go with a wooden frame. I then 9-sliced the sprite in Unity so that the background could also scale and be used for the different sections of the pause menu (options, controls, etc).
This was the global container for our UI that would hold our in-game menu options.
My final UI task was to create a simple credit reel for our team. I was provided some music tracks that our musicians put together and asked to try and sync the credits to one of the songs. After some tinkering with Unity’s animation and sound options, I feel that I was able to sync them up pretty well.
This credits reel was made in Unity.
As for the UX side of the equation, it was a bit more difficult to figure out exactly what part I would be playing within my team. While I had ideas that I wanted to share, I also wanted to be wary about not stepping on the toes of my fellow game designers. I decided that I would try to focus my efforts on the bigger picture, instead of trying to push for certain features/mechanics.
The first task that I took on was drafting up a survey that we would ask users to fill out after playtesting different versions of our game. I found a great resource called "The Definitive Playtesting Checklist" by the Schell Games Design Team that provided me with a framework to work off of for our own playtesting sessions.
One of the main points of feedback that we received had to do with the cutscenes and their subtitles. In the first draft, all of our subtitles were white with a dark outline, as you might come to expect. However, the feedback that we received was that since the subtitles were in both English and Spanish simultaneously, it was difficult to process the information that was being displayed. We felt that the best strategy to address this would be to color code the bilingual subtitles to help distinguish between the two languages.
Here’s a screenshot showing how we tried to color-code our bilingual subtitles in the game. These cutscenes were also narrated in hopes of facilitating the retention of information.
Overall, I feel that this project taught me a lot about the key differences between being a UI designer and a UX designer. While I started off feeling a bit overwhelmed, I really enjoyed the fact that I was able to facilitate the process of receiving player feedback and then incorporating part of that feedback into the game myself. I hope to continue developing my skills and become a more capable designer on both fronts.
Role UI/UX Designer
Date March 2018 – June 2018
Type UI/UX Design