Story-driven ocean exploration with AR, sketching, and pop-ups to excite and engage future STEAM enthusiasts.
Tiny Town is a single-player AR board game where players join a team of ocean explorers and sketch sampled creatures from different oceans. Your phone acts as microscope allowing you to “scan” creatures that otherwise wouldn’t be visible to the eye!
Hi-fi mockup of the AR application and physical components: Instructions, sketch pad and the pop-up board
Project Details
Individual
4 months (February 2024 - May 2024)
My Roles
2D Illustration (Character, Board, Tokens)
User Interface Design
Branding
Paper Engineering
Tools
Figma
Adobe Photoshop
Adobe Illustrator
Autodesk Maya
UV Printing
My goal was to create an experience where learners can envision a potential career path for themselves.
What was your experience with STEM education in high school or college?
Tiny Town started with this very question asked to 5 professionals at different stages of their careers.
2 Engineers (Mechanical Engineer, Aerospace Engineer)
1 Behavorial Neuroscientist
1 Digital Product Designer
1 Fine Artist (Animation + Digital Media)
4 out of 5 interviewees were mid-career individuals with professional working experience ranging from 3 - 6 years.
1 out of 5 interviewees was a late career individual with over 10+ years of professional working experience and is a mother of a 7 year old.
Having freedom to explore
Freedom to explore creates a sense of agency in the learning experience. Money is a factor in having the ability to explore
Sense of accomplishment
Getting stuck with tools, testing poorly, or not seeing proportional returns on effort negatively impacts learning.
Real world application
Shifting from memorizing facts to understanding cause and effect and real-world applications.
Engaging teaching methods
Engagement and enjoyment in science came from engaging, story-based instruction and affinity for teachers, making students more receptive to topics.
Synthesis map Figjam board of interview
What does engaging teaching methods look like?
The insights made it clear that people preferred what they considered engaging methods of instruction. In practice, this varied from person to person. Some preferred visual cues, some preferred auditory experiences and others preferred learning by doing.
TinyTown uses sketching for tactile learning, AR visuals for visual engagement, and gameplay mechanics to provide a sense of accomplishment.
A Perfect Storm: Fusing game development, animation and product design to make Tiny Town
I combined my animation and games industry experience with the traditional digital app creation approach. With both physical and digital components, I focused on their interplay while developing the journey map, user flow, and sitemap, uncovering unique design opportunities and challenges to separate the experience from already existing STEM based educational experiences available in the market.
Using a pop-up board to reduce set-up time and maximise learning fun
At this time, I was also working on another pop-up book project and using them in an educational setting was on my mind.
The pop-up board allowed added a sense of excitement upon opening the game and reduced the set-up time for the players. Adding the AR component helped further the element of excitement and created an exploration mindset where the phone was transformed into a looking glass of sorts giving them access to viewing tiny creatures without investing in fancy equipment.
A visit to San Francisco's Exploratorium transformed TinyTown from a microscopy game into an ocean exploration adventure.
Initially, I envisioned the AR app as a window into the microscopic world but lacked a specific area of focus. I worried a linear story wouldn't keep learners engaged. Inspiration struck at the Exploratorium in San Francisco, where I learned about seasonal changes in ocean plankton and these creatures called diatoms, shaping the following story.
You are part of an ocean exploration research team and are tasked with helping them catalogue the creatures they have come across.
Walking the line between scientifically accurate, gamified lessons and mobile games
I prioritized a simple UI to highlight the informational content and focused on the act of sketching and creature discovery. This was done to reduce friction points for kids and parents playing together.
Initial UI sketches and final design system featuring textboxes, buttons and tracker logs
Fostering curiosity and exploration by changing the content every month: A different ocean, a new Tiny Town to explore
TinyTown offers a rotating list of creatures and oceans to explore! Each month, QR codes update with new creatures to sketch, ensuring continuous learning and exploration.
For wireframing and testing, I chose the pteropod, a creature with calcified shells used by marine biologists to study ocean acidification. Including such real-life consequences at the wireframe stage helped maintain the ethos of impactful learning experiences.
Pteropod was 3D modeled and shaded based of my 2D design by Jonathan Gonzalez
Revelations in play-testing: A flaw in my hypothesis
“How do I win?”
2 out of 5 users tested asked about the end outcome and how one would win in a multiplater setting indicating a lack of fulfillment with current ending to the activity.
No drawing
3 out of 5 users did not draw the creature when it showed up, instead clicked through the whole activity. Note that each user read the instructions to draw what they see and still missed the cue.
Blank Slate Intimidation
1 user mentioned that drawing on an empty sheet of paper felt too intimidating and made them not want to continue with the activity.
“Feels sterile”
Aside from the initial mention of the boat, the ocean exploration theme falls off and the focus shifts more towards the creature.
For each round of testing users were made to read the instructions, then asked to explore the prototype on their own mobile device.
Wireframes used for testing
Instructions draft front
Instructions draft back
Sketchpad introduced after Round 1 of testing
What Tiny Town 2.o will look like…
Moving the project over to Unity: At present Tiny Town exists as a Figma prototype. I am working on deploying it as an AR app using the game engine Unity.
Revisiting the physical components: The testing process revealed that while the board has the initial wow factor it isn’t entirely central to the main activity, in following iterations I am planning on moving away from the physical components and focusing on the digital app expereince.
Expanding the content: Continuing to research and add more creatures to the roster of Tiny Town and create a data base featuring creatures from different oceans at different points in time.
and that’s what goes into creating a…
Story-driven ocean exploration boardgame with AR, sketching, and pop-ups to excite and engage future STEAM enthusiasts.