Detroit ZooAR Explorer
At a glance
- What
- An AR mobile app concept for the Detroit Zoo
- My role
- UX research through final UI
- Outcome
- Research-driven wireframes to a polished prototype
- Tools
- Adobe XD · usability testing
Project scope
From concept to clickable prototype.
0
Nav Sections
Explore, Info, Donate, Scrapbook, Prizes
0
Team Members
University of Michigan
0
Game Modes
at-zoo & from-home
0
Prototype Rounds
paper → wireframe → polished
The pandemic had changed everything about how people connect with animals. Zoo visits plummeted, pet ownership surged, and the Detroit Zoo needed a way to break the physical barrier between visitors and the animals they love—whether at the zoo or stuck at home.
As a team of four at the University of Michigan, we designed a mobile experience that goes beyond a static map—incorporating a photo scrapbook game with real prizes, live animal cams, a "Message Zookeeper" feature, and donation tools. From paper prototypes to a polished Adobe XD prototype, every screen was tested and iterated with real users.
Process
Research → Prototype → Test → Refine.
Context
A pandemic changed everything. The zoo needed to adapt.
COVID-19 drastically reduced zoo visits while pet ownership surged. People still craved connection with animals—they just couldn't always get there in person. The Detroit Zoo needed a mobile experience that broke the physical barrier between visitors and the animals they love.
Our team of four set out to design an app that works both at the zoo and from home—turning casual visits into adventures with a scrapbook photo game, live animal cams, and an easy path to donate during a time when the zoo needed support most.
Type
Interaction Design — Class Consulting Project
Client
Detroit Zoological Society
Tools
Adobe XD, Paper, Pen, Post-Its
The Challenge
Four problems. One app to solve them.
Pandemic killed foot traffic
COVID drastically reduced zoo visits. People still wanted to connect with animals, but couldn't always get there in person.
Navigation is guesswork
Once at the zoo, visitors rely on printed maps and sparse signage. They miss exhibits they came to see.
No reason to stay engaged
There's nothing interactive to capture visitors' attention—no games, no incentives to explore more, no digital layer on the experience.
No easy path to donate
During a pandemic, the zoo needed support more than ever, but there was no frictionless way for visitors to contribute.
Paper Prototype
Sketched first. Tested fast.
Before opening Adobe XD, we drew every screen by hand on paper. Navigation tabs, animal profile cards, the scrapbook game, the donation flow—all rough, all functional. Then we recruited test participants and walked them through real tasks.
The paper prototype caught problems we never anticipated: our game originally only worked from home, but users wanted at-zoo enhancements too—which led us to design two distinct game modes. The physical touchpoint concept also emerged from these early tests.
Paper prototype walkthrough — testing core flows with real users
"The zoo is a sanctuary for both animals and humans."
Design
Five sections. Two modes. One experience.
The app is organized around five navigation sections: Explore (interactive map with animal icons and wayfinding), Info (hours, events, zoo details), Donate ($1–$10 quick-select donations), Scrapbook (a photo collection game with prizes for every 5 photos), and My Prizes (earned rewards redeemable in-person or online). A persistent toolbox provides quick access to Camera, Physical Waypoint, Message Zookeeper, and Search.
At-Zoo & From-Home
The scrapbook game has two modes with different rules and prizes—in-person visits unlock better rewards, but anyone can play from home with live cams.
Gamified Exploration
Every 5 photos collected wins a prize. Physical touchpoints at exhibits and a camera feature turn a zoo visit into an interactive adventure.
Low-Barrier Giving
$1–$10 quick-select donations with saved payments make it effortless to support animals during the pandemic—from care to "I care" in two taps.
Final Prototype
Final interactive wireframe — all flows connected and tested
Everything connected. Ready to test.
The final Adobe XD prototype brought all five navigation sections together into a single interactive experience. Users could explore the map, browse animal profiles with live cams and social posts, play the scrapbook game, message a zookeeper, and complete a donation—all connected.
We chose Adobe XD for its real-time collaboration, cross-platform compatibility, and smooth path from low to high fidelity. Usability testing validated the structure: the two game modes felt intuitive, and the donate flow was surprisingly frictionless.
Key Decisions
What shaped the design.
What I learned
Usability testing reshapes entire features.
Our scrapbook game started as from-home only. Testing revealed users were excited about at-zoo enhancements too—so we designed two game modes. A single round of testing fundamentally changed the product.
Users surface what you can't see.
We didn't anticipate how much users cared about animal well-being. Their feedback led us to elevate "Message Zookeeper" from a buried feature to a persistent toolbox item, always visible and one tap away.
Pandemic constraints shape design constraints.
We couldn't test with children—one of our main target users—due to COVID. Task-based prompts may have primed understanding. These limitations taught us to design with humility about what we don't know.
Don't build from scratch when you don't have to.
Modeling our design on the existing Detroit Zoo app reduced the learning curve and let us focus on what was truly new: the game, the touchpoints, and the pandemic-era donation flow.
My role
Team
Sam Bloch, Dolapo Raji, Angel Tang, Gloria Zhong — University of Michigan
Sam's Contributions
→ Refined and completed the scrapbook game, physical touchpoint, camera, and physical map search in Adobe XD
→ Co-authored the early User Flow Diagram with Dolapo
→ Fixed all errors in the final prototype
→ Produced the final video demo walkthrough
Timeline
User interviews, personas, and competitive analysis. Identified pandemic pain points and user demographics.
Sketches, storyboards, and paper prototypes. Tested core flows with participants.
User Flow Diagrams and initial Adobe XD wireframes. Translated paper insights into digital screens.
Usability testing rounds. Discovered two game modes, elevated Message Zookeeper, refined physical touchpoints.
Polished Adobe XD prototype, final video demo, report, and presentation. All errors fixed and flows connected.
Like what you see?
I'm always open to discussing new opportunities, creative projects, or just nerding out about design and technology.
Interaction Design · University of Michigan · 2020