THE COSMIC CARASSIUS
THE COSMIC CARASSIUS
CASE STUDY
CASE STUDY
OBJECTIVE
Create an engaging interactive storytelling experience with The Cosmic Carassius Auratus. Users navigate a forgetful psychic reading through the fish's questions and prompts, with their choices shaping the outcomes.
MY WHY?
Outside of “The Legend of Santar,” I struggled to find quality interactive storytelling examples with genuinely randomized responses based on user interaction. Personality tests, whether online or in magazines, exemplify how I envision this story unfolding: a series of choices leading to specific results. While “The Legend of Santar” shows how to simplify choices, it lacks a sense of control over outcomes; pressing a single button doesn’t feel meaningful. This could be improved by adapting techniques from personality tests.
OBJECTIVE
Create an engaging interactive storytelling experience with The Cosmic Carassius Auratus. Users navigate a forgetful psychic reading through the fish's questions and prompts, with their choices shaping the outcomes.
MY WHY?
Outside of “The Legend of Santar,” I struggled to find quality interactive storytelling examples with genuinely randomized responses based on user interaction. Personality tests, whether online or in magazines, exemplify how I envision this story unfolding: a series of choices leading to specific results. While “The Legend of Santar” shows how to simplify choices, it lacks a sense of control over outcomes; pressing a single button doesn’t feel meaningful. This could be improved by adapting techniques from personality tests.
SCOPE
SCOPE
The narrative will follow a circular structure, where the fish asks questions and waits for user interaction before presenting a result, then repeating the process. User input will be categorized using a self-report inventory to generate tailored outcomes.
UI/UX RESEARCH
UI/UX RESEARCH
Consideration of visual hierarchy and the users flow. The user needs to be able to learn from their mistakes in order to complete the circluar story, so feedback needs to be given. While the story’s plot will be relative set, the user will still have a sense of control when answering questions.
Moodboards, color palettes, and visual aesthetics were created to guide the storyboard. Key plot points were illustrated and explained for a clear visual depiction. Visual transitions requiring illustration were identified, along with essential buttons and selection tools crucial to the plot.
Moodboards, color palettes, and visual aesthetics were created to guide the storyboard. Key plot points were illustrated and explained for a clear visual depiction. Visual transitions requiring illustration were identified, along with essential buttons and selection tools crucial to the plot.
A low-fidelity wireframe was created to outline the narrative, interactivity, audio, and other relevant information for each page. At this stage, a loose plot was established to support circular questioning, with a sequence of answers that users must select to reach a result.
A low-fidelity wireframe was created to outline the narrative, interactivity, audio, and other relevant information for each page. At this stage, a loose plot was established to support circular questioning, with a sequence of answers that users must select to reach a result.
BUILDING THE INTERFACE
BUILDING THE INTERFACE
To ensure a unified UI design, a design system was established at the project's outset, addressing color usage, type scales, button variations, and visual/audio assets. Visual clarity and accessibility were prioritized.
EB Garamond
deep blue, purple, gold color palette
With internal and external feedback, a high-fidelity prototype was created and further refined. Additional questions, routes, and endings were created based on feedback and testing to create a dynamic and interesting plot for the user to follow. Animations, visual effects, and audio were implemented as well.
To ensure a unified UI design, a design system was established at the project's outset, addressing color usage, type scales, button variations, and visual/audio assets. Visual clarity and accessibility were prioritized.
EB Garamond
deep blue, purple, gold color palette
With internal and external feedback, a high-fidelity prototype was created and further refined. Additional questions, routes, and endings were created based on feedback and testing to create a dynamic and interesting plot for the user to follow. Animations, visual effects, and audio were implemented as well.
OUTCOMES
OUTCOMES
A responsive prototype and complete plot-line created an engaging interactive experience. Users can experience a humorous and unique psychic reading. After refining the visuals and animations, the prototype was able to take its final form and become a functioning storytelling experience!
A responsive prototype and complete plot-line created an engaging interactive experience. Users can experience a humorous and unique psychic reading. After refining the visuals and animations, the prototype was able to take its final form and become a functioning storytelling experience!