Fable Fantasy

Reliving your childhood lessons!

Overview

As part of a team of five, I designed and built an interactive (choose-your-own-adventure) story-telling game in Figma in a month. Though I helped with every aspect of the project, I was mainly responsible for project management, establishing a robust and comprehensive design system, and creating most of the interactions and animations. 

This involved setting up components and variants, and establishing a design system that included colors, typography, style, and visual language. With four drastically different worlds and teammates with different styles, my work helped ensure that the game was consistent and cohesive across all components of the story, while making sure that the visual elements and storytelling were relatable and engaging for users.
  • Timeline
  • Jan - Feb 2023
  • Skills
  • Design System
    Visual Identity
    Interaction Design
  • Team
  • Ryan Lian
    Sarah Jacob
    Maria Wang
    Danna Lenis
    Genevieve Dandurand
  • Tools
  • Figma
    Vectornator
    ‍

Context

This project had several constraints. First and foremost, it had to resemble a vending machine selling things you can't buy. Secondly, everything had to be on Figma, we could not use any game engines or coding. Lastly, none of us were familiar with Figma, design systems, or creating vector drawings.

How could we create something that is relatable and makes the audience feel something with the constraints?

How could we keep this game cohesive and organized in a short time frame while balancing the creative energies of five different people?

Process

Ideation

We had many ideas from a cat world with human pets in cat cafes to a complicated love story involving planets and the sun 😉

Ultimately we decided on a dreamy fantastical theme that would allow us to have four distinct worlds to free up our different creative visions and creativity to take off

Initial Prototype

At first, we prototyped by mapping out all of the stories, characters, compositions, and interactions.

I realized that cohesion is actually a very important factor (as you can see, the styles and everything are all so different to the point where it was gross). The visual language would make or break this project.

Story

In essence, we wanted our vending machine items to be childhood lessons that helped us become who we are now—we're buying nostalgia, youth, and memories that are priceless. Each of the four worlds represent a different childhood lesson, and the characters that teach you the lesson are actually stuffed animals you had as a kid.

We wanted to keep the last bit a surprise, but it was too difficult to understand without showing the stuffed animal in the beginning at all. Finding this balance between showing and telling was one of the most difficult parts of this story.

In the end, we decided to specify a context of the protagonist being a student right before moving to college for the first time, saying contemplating whether to bring his childhood toys or not. This allowed us to tie all of the symbols together while fostering a relatable experience for our classmates.

Visual Language

I then started experimenting with different aesthetics, types, and palettes, trying to find something that fit into the story and experience we are sharing.

I also decided to go with a limited palette for each world for a clean, cohesive, childhood cartoon story look (inspired by the best of course, My Little Pony).
With this, we started drawing our own backgrounds in Procreate (shoutout to Maria)

Transitions

Because the story we ended up with was too unclear, I spent time working on convincing transitions. This meant giving more autonomy for the user, inviting the user to CHOOSE to go on adventures instead of sitting through them. This also involved created a realistic eye opening animation to immerse the user into the scene.

Outcome

Design System

I decided to go with clean, simple chatboxs and such to highlight the complex and beautiful characters and backgrounds.
‍
The typography also matches this fairytale vibe without being too distracting. The flares also add that bit of fun we all had when we were younger.

Interactions (Select Few)

Transitions

Scenes

Reflections & Takeaways

This was a really rewarding project! Seeing all of our hard works coming together into an actually engaging and fun game is incredible, and working with these constraints also worked out surprisingly well. I actually really enjoyed being in more of a product manager position working on design infrastructure and helping my teammates with whatever they're struggling with. Learning about how to set up design systems also made everything so much easier. The plug-ins in Figma also was incredible

Thanks for stopping by!

Ryan Lian ©2023

OverviewChallengeprocessoutcomeReflection