BTG App Design

I dedicated three months to an iterative design process that combined creativity with validation. I began with extensive sitemapping and wireframing, sketching out multiple variations of layouts and user flows to understand how visitors would naturally interact with the app.

I conducted rounds of user testing, observing how real people navigated my prototypes, listening to their feedback, and using those insights to make thoughtful adjustments. This cycle of designing, presenting, and testing allowed me to uncover what worked best, what needed to evolve, and ultimately shaped the app into a solution grounded in both research and real user needs.

Sitemap

Back to BTG Overview

The sitemap is broad at the top (Scan, Kid Mode, Conservation, Profile, Home, Search, My Account, Login, Map), which gives users clear entry points.

Each section branches into deep, content-heavy structures (e.g., Conservation → Feed with Updates → Endangered List, Rescue Stories, etc.). This is good for rich exploration, but it risks overwhelming users if navigation isn’t streamlined.

Consistency: Profile appears twice (standalone + under My Account). This could cause confusion — consolidating these might improve clarity.

Scan → Upload Photo → Animal Profile Page
- Very direct and user-friendly. The scan flow feels like the primary feature and is designed to deliver quick gratification.
Kid Mode → Scavenger Hunt / Quizzes / Flashcards / Rewards
- Nicely gamified and tailored to younger audiences. Clear motivation loops (learn → play → reward).
Conservation → Updates / Rescue Stories / Ways to Get Involved
- This is a mission-driven pathway. Great for aligning with emotional design — users who care about conservation get narrative-rich, value-building content.

Paper Lo Fidelity Wireframes

Workflow 1: Scan

Workflow 2: Kid Mode

Workflow 3: Conservation Updates

Profile Section:

Pitch Questions:

These are questions I try to ask myself halfway through my design process so I know I have a good understanding of the project.

Who are the primary users?

Kids (5-12)

Adult aquarium visitors (any age)

conservationist

b. What are these users doing with your product and why?

Kids (5-12) - interacting with games to learn more about animals and gain rewards

Adult aquarium visitors - scanning animals to learn more about them and favoriting their favorite ones so they can save and share it with their friends, they also can earn reward such as VIP touch tank experiences

Conservationists- learn about updates of rescue and release of the marine life and ways to help out.

c. What is the name of your product?

Behind the Glass

d. What is the focus of your site (e-commerce, social media, travel, food, etc.)?

Education

e. How is your product different/better than existing products/competitors?

Unlike traditional aquarium apps that provide only static information about animals, Behind the Glass offers an interactive and personalized experience. It also highlights animals' personalities and makes them more memorable. It gamifies learning for kids, allows adult visitors to engage with exhibits through scanning and rewards, and provides conservationists with real-time updates on rescue and release efforts. The app bridges education and engagement by making aquarium visits more immersive and memorable.

f. What products are similar to yours?

Fathomverse – An interactive marine education app that uses VR and AR to immerse users in ocean exploration. While highly engaging, it focuses more on virtual experiences rather than real-time interaction with physical aquariums.

PictureFish – A fish identification app that allows users to take photos and get instant species recognition. While useful for identifying fish, it lacks the interactive, gamified, and conservation-focused features of Behind the Glass.

JellyWatch – A citizen science app for tracking jellyfish and other marine sightings. It’s great for data collection but doesn’t provide detailed animal backstories, interactive engagement, or rewards for aquarium visitors.

Elevator Pitch

For kids, adult aquarium visitors, and conservationists who want a more engaging and interactive way to connect with marine life, Behind the Glass is an educational aquarium app that combines scanning technology, gamification, and real-time conservation updates to create an immersive aquarium experience. Unlike Fathomverse, which focuses on VR-based exploration, PictureFish, which is limited to fish identification, and JellyWatch, which centers on citizen science tracking, Behind the Glass enhances real-world aquarium visits with interactive learning, personalized rewards, and exclusive conservation insights.

Digital Low Fidelity Wireframes

Workflow 1: Scan

Workflow 2: KidMode

Workflow 3: Conservation

Homescreen Brain Drawings:

These are just quick 5 minute sketches of the home screen to try out different ways people will first interact with the home screen .

This sequence of pages explores different navigation approaches for the app. The first concept begins with a central scan page, with an expandable menu for exploring additional functions.

The second concept simplifies the experience by opening directly to a landing page with the three core app functions, essentially acting as a straightforward navigation bar.

The third concept experiments with button composition while also introducing a profile button, giving users a more personalized entry point.

Homescreen Digital Iterations

Idea 1 Homepage

Strengths:

Clean and simple layout
Highlights past visits and kid updates in a straightforward way

Weaknesses:

Feels more like a log or archive rather than an engaging entry point
Minimal hierarchy, everything looks the same, so there’s no clear primary action for the user to take
Users may not immediately know where to go next besides scrolling

Idea 2 Homepage

Strengths:

Balances past visit history with engaging content (Species Map) in one screen.
Stronger visual hierarchy: the visits are stacked at the top, then the map acts as a secondary engagement tool
The underwater theme background makes it immersive and aligned with the brand ("Beyond the Glass")
Provides the most context for users, past activity, kid progress, and a call to action (tap the map)

Weaknesses:

Slightly busier than Idea 1

Idea 3 Homepage

Strengths:

Visually dynamic, with the large map and icons pulling users in
Clear emphasis on exploration and discovery

Weaknesses:

Loses important practical info (past visits, kid updates)
Might feel confusing as a “homepage” since it doesn’t show the user’s personal context right away
Works more like a secondary “explore” screen rather than a true homepage

Why Idea 2 Works Best

It directs people clearly: past visits and kid updates show personal progress, while the map invites exploration. It shows the most information in a structured way, making the app feel valuable and personalized from the start. It blends practical tracking (visits, favorites, kid mode) with immersive storytelling (species map), which supports engagement for both adults and children. Overall, it strikes the right balance between utility and excitement, exactly what a homepage should do.

Workflow Digital Wireframes

Workflow 1: Scan

I designed a scan-to-learn feature that allows visitors to discover species in a way that feels both educational and playful. The flow moves from context-setting on the homepage, to interactive discovery through scanning, and finally to a personalized species profile.

Homepage:

Balancing Personal Progress with ExplorationThe homepage establishes a clear hierarchy of information by combining personalized updates with an invitation to explore. At the top, users see their past visits and KidMode progress, grounding them in their own experience. Below, a species map serves as an exploratory element, encouraging curiosity about global connections to the animals they encounter. The underwater gradient background reinforces the aquarium theme while keeping the interface immersive. A fixed navigation bar at the bottom ensures effortless access to core features like Home, Scan, Kids, and Updates.

Scan Mode:

Making Discovery InteractiveThe scanning screen transforms the aquarium experience into an active moment of discovery. A bounding box overlays the live camera feed, allowing users to “capture” species in real time. The system provides immediate feedback, “Looks like Sally, Tap to see”, with a clear call-to-action that guides the next step. By offering options to either take a photo or uploadYou said:continueChatGPT said:constraints, ensuring accessibility and flexibility. This approach makes the act of learning feel game-like and rewarding, transforming the aquarium visit into a more memorable, hands-on experience.

Species Profile:

Storytelling Meets Education. Once a species is identified, the user lands on a profile page that blends scientific accuracy with approachable storytelling. Each animal is given a name, age, and personality traits, which humanizes the experience and helps children (and adults) form a stronger emotional connection. The information is structured in a clear hierarchy, starting with quick personal facts (age, gender, location), moving into species details and conservation status, and ending with a playful personality description. This balance ensures that the page appeals to a wide audience: casual visitors gain fun, memorable insights, while those seeking depth get accurate scientific information. The circular hero image of the fish keeps the focus on the animal, visually reinforcing its role as the centerpiece of the app.

Design Strategy:

Guiding Curiosity to Connection. The flow is intentional:

Homepage establishes context and sparks curiosity.

Scan Mode turns curiosity into interaction.

Species Profile deepens the experience through narrative and education.

By designing each screen to complement the next, the app builds a bridge from visitor engagement to conservation awareness, while keeping the experience light, immersive, and easy to navigate.

Workflow 2: KidMode

Beyond the Glass – Kids Mode

To make the app exciting and educational for younger visitors, I designed a dedicated Kids! Mode that combines quizzes, games, and rewards. The aim was to keep children engaged through play while strengthening their connection to marine life and conservation.

Entry Point:

The Kids Mode offers three clear paths: Marine Twin Quiz, Games, and Rewards. The layout is kept simple with bold icons and minimal text so children can easily navigate. Whimsical illustrations of sea life (jellyfish, whales) anchor the design in the underwater theme.

Marine Twin Quiz: Personalizing the Experience

The Marine Twin Quiz invites kids to answer fun, scenario-based questions—like “If you could be any sea creature, what would you want to do?” The answer choices are written in kid-friendly language and designed to spark imagination. Once completed, the quiz reveals a personalized match: for example, Sally the Blue Tang. By giving animals names, personalities, and traits, the app makes the learning feel relatable and memorable.

Mini-Games:

Kids can also choose mini-games, such as “Guess the Fish,” where they identify creatures from photos. The gameplay is intentionally simple (tap, choose, confirm) to keep it accessible for a wide age range. Playful reinforcement (e.g., large text, celebratory feedback) makes each interaction rewarding while reinforcing species recognition.

Rewards: Bridging Digital and Real-World Experiences

One of the strongest motivators in Kids! Mode is the reward system. Completing levels unlocks tangible perks, like a Free Penguin Feeding, that can be redeemed during the visit. This creates a strong bridge between digital play and the real aquarium experience, encouraging kids to stay engaged and deepening their connection to the animals.

Design Strategy:

Kids Mode is designed around three principles:

Engage: Simple games and quizzes keep children curious and entertained.

Personalize: By giving marine life names and personalities, the app makes education more relatable.

Reward: Real-world incentives strengthen motivation and create unforgettable experiences.

Together, these elements ensure Kids Mode is more than just a side feature, it’s a core part of the app’s mission to educate and inspire children and ease the aquarium experience for parents.

Workflow 3: Conservation Updates

To extend the app’s impact beyond scanning and games, I designed an Updates section that connects visitors to real-world conservation efforts. The goal was to move users from passive learning toward active participation, whether that means staying informed, attending events, or volunteering.

Updates Hub: Stories, Events, and Opportunities

The Updates hub is designed to feel like a dynamic newsfeed. At the top, users see highlights of recent conservation wins, such as rescued sand sharks or baby sea turtles released after storms. Below, upcoming opportunities like beach cleanups and volunteer programs are displayed with clear dates, locations, and calls to action. The mix of narratives and actionable items ensures both casual visitors and motivated advocates can engage at their own pace.

Expandable Content: Depth Without Overwhelm

Each card in the feed is tappable, leading to a dedicated page for deeper detail.

For example:

A conservation story expands into a full article with images, offering transparency into the rescue process.
A beach cleanup expands into a list of upcoming and past events, encouraging repeat participation.
A volunteer program expands into details with a clear “Sign Up!” button, making commitment easy.This progressive disclosure design keeps the homepage clean while still supporting users who want to dig deeper.

Design Strategy: From Awareness to Action

The Conservation & Updates flow is guided by three principles:
Inform: Provide digestible, real-time stories about conservation efforts.
Engage: Use visuals and headlines to spark curiosity and empathy.
Activate: Offer clear, actionable opportunities (cleanups, volunteer programs) to turn awareness into hands-on involvement.

By bridging digital updates with physical participation, this section transforms the app into a platform for conservation activism, helping visitors move from spectators to stewards of marine life.

Final App Walkthrough

Watch the video below to watch how the app comes together!

Pitch Presentation

This is a presentation walking through the background of the project.

This concludes the walkthrough of all my research and my final product.