Fable Fantasy:

A Choose-Your-Own Adventure Game

Project Summary

With a team of five designers, I designed and built an interactive (choose-your-own-adventure) story-telling game in Figma within 4 weeks. I was involved with the entire project, but led efforts for storyboarding, game and character design, and creating most of the interactions, vector illustrations, and settings.

This involved crafting storyboards, designing interactions for the users, and developing characters, ensuring that each element was not only visually appealing but also enriched the narrative experience. I spearheaded the creation of vector illustrations and settings, focusing on diversity and detail to bring our fictional worlds to life. My role was pivotal in unifying the visual and narrative aspects of the game, establishing a cohesive design language that included color schemes, typography, and visual style. Despite the challenge of merging distinct artistic visions and complex storylines, my contributions helped in maintaining a consistent and immersive user experience throughout the game, making the adventure both captivating and memorable for players.

Design System | Interaction Design | Graphic Design | Visual Identity | Storytelling

Project Details

Role: Designer

Duration: January - February 2023

Figma: View here

Tools: Figma, Vectornator

Challenge

Our project aims to design a user interface and user experience (UI/UX) that facilitates the seamless insertion of payment and selection of "dreams" or intangible goods such as time, happiness, and other inspired intangibles. The core of this project is to conceptualize how these intangible goods can be represented and "delivered" to the user in a way that is both fantastic and innovative.

The project had to be contained within Figma, no game engines or coding could be applied. My design team was unfamiliar with Figma, design systems, and vector drawings alike.

Action

Ideation

We brainstormed different dynamic environments and stories that we could portray. We thought of beautiful natural worlds with fantasy elements, such as floating islands with castles, mermaids, and different paths to choose (first picture). Other ideas were more whimsical, with a cute cat cafe that allowed the user to immerse in a playful working environment (second picture). We also thought of more existential scenarios for our users to experience, such as ones featuring emotional poetry through a visual experience (third picture).

We settled on a choose-your-own adventure story that featured special elements from all our brainstorming, such as fantasy, importance of choice, character interaction, and an overarching, sentimental theme.

The world we wanted to create for our user was in fact four different fantasy environments: a cloud village with fairies, a volcano kingdom with dragons, a flowering meadow with bunnies, and a deep ocean trench with a sea turtle and fish. To execute this, 4 of the designers, including me, were divided amongst the 4 regions: I was the lead for the volcano region.

Character Design

Through Figma and vector art, I was able to bring characters to life in the volcano and cloud worlds. I utilized color palettes that the designers had chosen for each region, to remain consistent with the theme. As the characters were vector art, we could create small interactive animations with their hands, arms, etc. When creating the characters, I thought carefully about how they would interact with their world, their movement, and the user experience.

Storyboarding & Storytelling

In designing the Volcano World for our interactive story-telling game, I aimed to weave childhood lessons into the fabric of a dream-like adventure, making each choice a step in the journey of growth and discovery. The storyboard for this world was crafted with a focus on immersion, ensuring that players would feel the weight of their decisions through meticulously designed interactions and vector illustrations.

The storytelling aspect was pivotal, with each choice designed to enrich the player's experience and impart subtle lessons about the value of honesty amidst the thrill of exploration. My design philosophy centered on creating a seamless blend of narrative depth and interactive simplicity, allowing players to dive into the Volcano World and emerge with insights reflective of their own choices.

Prototyping

In the early stages of our game's development, I created a low-fidelity prototype in Figma to outline the fundamental choices and interactions within a simplified yet functional framework. This prototype featured temporary setting backgrounds and basic character designs, focusing on the clarity of user choices and the flow of interactions.

My goal was to lay a solid foundation for the volcano world's interactive narrative, allowing us to test and refine the storytelling mechanics effectively. This approach enabled us to prioritize user experience from the outset, ensuring that each decision within the game felt intuitive and impactful.

Story Revision

At the heart of our concept was the idea of transforming selections into tokens of childhood wisdom—purchases of nostalgia and the invaluable memories that shape us. Each of the four realms embodies a distinct lesson from our early years, with the mentors of these lessons being the cherished stuffed animals of our childhood. I personally took charge of enhancing the visual storytelling by designing the settings of the bedrooms and the plushies.

Revealing this twist was challenging; we initially hoped to keep the stuffed animal reveal a secret, yet found it complicated to convey the intended message without their early introduction. Striking the right balance between visual hints and narrative exposition proved to be one of our project's most intricate challenges.

Ultimately, we anchored our narrative around the protagonist's dilemma, poised on the brink of college life, pondering over whether to bring along their childhood companions. This narrative choice wove together the thematic elements seamlessly and created a resonance with our peers, encapsulating the transition from childhood to adulthood.

Result

We created a choose-your-own adventure story entirely in Figma, immersing the user in a storyline that has them reflect on their choices, lessons they learn, and the nostalgia of childhood and wonder.