Off the Rails is a mobile pet simulation game where players assume the role of a subway conductor that takes care of an anthropomorphic subway system. Players are tasked with maintaining the train’s hygiene, happiness, and mechanical wear-and-tear through various mini games and decision-making.
October 2023 - November 2023, 3 weeks
UI/UX Designer, Illustrator
Figma, Illustrator
Sharon Lin, Rowan Wu
1. Receive HCI assignment for INFO6410 class
2. Discuss game design
3. Create moodboard of analogous UI designs
4. Create vector images in Illustrator
5. Apply texture and effects to vector images in Figma
6. Prototype in Figma
We drew inspiration from games that had bright, popping colors and “kawaii” aesthetics. Because I like to play around with textures when I have free reign, I studied how games utilized patterns and materials.
To ensure consistency (and to save time), I heavily utilized the components feature in Figma. Many assets had multiple variants to showcase damage, passage of time, or differences in color. A majority of assets were created and vectorized in Illustrator, then brought into Figma to apply texture and color.
We prototyped two main tasks for this game in the form of a tutorial.
Menu navigation: After the homepage, players are met with a conductor who appears as a pop-up to instruct players on how to start the game. The user clicks through tutorial screens to learn about the different game features. We also prototyped ‘Pause’, ‘Level Fail’, ‘Level Clear’, and ‘Settings’ screens to demonstrate additional UI components, such as buttons and switches.
Gameplay Mechanics: This prototype includes screens for various mini-games, such as ‘Traffic Control’ and ‘Maintenance Request’. ‘Traffic Control’ is the core gameplay loop, where players must direct the train tracks to prevent crashes. In ‘Maintenance Request’, players match similar sets of capsules to lessen the amount of wear-and-tear on their pet train.
Check out our prototype here:
This project helped me master an efficient workflow between Illustrator and Figma. I developed a system where I created complex vectors in Illustrator, then directly copy-pasted those vectors into Figma. From there, I would edit colors, add paper textures, and add effects directly in Figma. Doing so allowed me to perfect the aesthetic style with a more powerful vector tool, while also guaranteeing consistency using design systems.
Due to time constraints, I wasn’t able to include all the minigames I wanted. In addition to the two minigames featured in the prototype, there should also be a ‘Hygiene’ minigame where you clean the interior of your train and drive out rats. We also thought it would be funny to make this a gacha game, where you spend in-game currency to buy additional pet trains. To increase customization even further, there should be a dress-up feature for your train(s). So, if I were to continue with this project, I would add all those features and test this silly pet train game with potential users.