Story-driven ocean exploration boardgame 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

Drawing from my animation and games industry experience, I blended traditional app design with physical and digital components. By focusing on their interplay, I developed a journey map, user flow, and sitemap, uncovering unique design opportunities and challenges to distinguish the experience from existing STEM-based educational tools.

Using a pop-up board to reduce set-up time and maximise learning fun

The pop-up board added excitement upon opening the game and minimized setup time. Incorporating an AR component enhanced this excitement, fostering an exploratory mindset by transforming the phone into a virtual looking glass, allowing players to view tiny creatures without the need for expensive 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