Beanie’s Bandana
Interactive scrollytelling experience
This project in short…
Beanie’s Bandana is an linear scrollytelling narrative about common wildlife animals in North America.
The story is told from the perspective of Beanie’s owner, who must venture into the woods at night to find their dog Beanie, after he chases after the animal who took his bandana. Along the way, the user meets the animal suspects, noting observations about them in their notepad. At the end of the story, the user must use Beanie’s clues and the notes taken to figure out who the culprit is.
The goal of the project is to educate children about wildlife animals in North America through an engaging and interactive digital narrative. As designers, we also wanted to explore different interactive technologies and how they can enhance storytelling and learning.
Role
Lead UX/UI designer, storyboard and wireframe artist, coding and visual asset support.
Team members: Emily Huang, Priya Modi, Stefanie Wang.
Format/Platform
Web (optimized for desktop)
Tools
Procreate, Figma, VS Code, Github, Notion
Client
Alexander Young, Sessional Lecturer @ University of Toronto
Audience
Children ages 8-12
Timeline
January 2025 - April 2025
Deliverables
Working demo for proof of concept, including story introduction and conclusion, one animal interaction, and working buttons and quiz mechanisms.
The highlights
Story overview.
The story is told from the perspective of Beanie’s owner, who must venture into the woods at night to find their dog Beanie, after he chases after the animal who took his bandana.
Along the way, the user meets the animal suspects, noting observations about them in their notepad. At the end of the story, the user must use Beanie’s clues and the notes taken to figure out who the culprit is.
The design process
Roles and responsibilities.
My main role in this project was lead UI/UX designer. My responsibilities included ensuring early alignment on project direction and mapping out user interactions for the development team.
Additional roles included research, asset creation, and project documentation.
Research and ideation.
Each team member researched and created sketches for two animals in preparation for our asset development and script.
This included finding information about their diet, habitat, etc., as well as finding fun facts that could be used as clues or to help give each animal a distinct personality.
Wireframing and UI/UX.
To visualize our preliminary ideas, we first organized the story as a flow diagram. The first version included the primary scenes and mechanisms that would be needed, such as:
parallax scrolling
animal and notepad interactions
how the user would wrap up the story and solve the mystery.
This helped us walk through our ideas in more logical steps and visualize how interactions might play out. It also helped identify interactive problems we could face during development.
The final version of the wireframe identified more detailed user interactions with notes for the development team.
Asset creation.
Asset creation was a collaborative effort with sketches, line art, and colouring passed between different team members.
To ensure consistency, we created cohesive moodboards and stylesheets which detailed the typefaces, colour palettes, and brush packs to use.
I’ll be mainly highlighting my roles in this case study. If you’re interested in a more detailed description of this project, you can find the full design document here.
