Gotham City Zoo

High-Fidelity App Prototype

CONCEPT

The Gotham City Zoo has become a pillar in the Gotham community and offers enriching experiences for all age groups. To upgrade the user’s experience, our team created a free smartphone app that helps users manage their profiles, zoo rewards, tickets, and other experiences.

As a special feature for members of the Gotham City Zoo, our team included an augmented reality tour that incorporates location tracking and mapping technology to elevate the zoo-going experience. In the AR guided tour, users can see their real-time location while they explore the zoo. They can access important zoo checkpoints to learn more about the animals while collecting rewards along the way. Users can also customize the experience with accessibility features such as added audio, large subtitles, and language translation.

DESIGN QUESTION

How can we demonstrate an app that supports the zoo-going experience using an interactive prototype?

PRODUCT SPECIFICATIONS

Users must be able to:

Select and purchase admissions tickets.
View special exhibits, activities, or events that require additional purchase and choose to add them.

THE TEAM

This project included three of Drexel's College of Computing graduate students:

Claudia Salgado
Emma Crawford
Meredith Montgomery

BRAINSTORMING AND IDEATION

To kick off the project, our team met to discuss our topic. In ideation, we used mind mapping to explore the intricacies of zoos.

Once we had a broad idea of everything involved with running a zoo, we organized our ideas on a project vision board to help us further define the Gotham City Zoo. Some of the areas we chose to focus on in this stage where the app’s target group, how the product would help the zoo stand out, and what the business goals of Gotham City Zoo might be. With this information, we identified two scenarios that we wanted to explore further: ticket purchases for an after-dark happy hour event and a self-guided, in-app zoo tour.

After collectively defining our project’s vision, we conducted divergent brainstorming and initial sketching individually. We each explored the use of QR-code to scan at exhibit sites and various manifestations of the guided tour. When we reconvened, we distilled our divergent ideas into a single direction and drafted the initial wireframes. One example of the converging of ideas was around the bottom navigation and hamburger menu.

INITIAL WIREFRAMES

Our first set of wireframes explores the path of a user who is looking into the special events the zoo has to offer. The user can visit the events page from the home screen, look into an event series called Zoo Brews, and select a date to purchase tickets. We demonstrate how a new user could save by purchasing a membership. Our screens also show how the zoo could increase revenue by including an opportunity to add a donation at checkout.

We chose to explore the guided tour we designed in our second set of wireframes. In this scenario, the user already purchased tickets before arriving at the zoo. Upon arrival, the user opens up the app, taps the tickets tab to see their active tickets, and starts the tour from there.

While we included a set of onboarding screens to orient the user to the tour, much of this information would, in reality, we would provide at the time of purchase (i.e., the smartphone requirement and headphone recommendation). In onboarding, the user must give the app permission to use their location and camera, and they receive basic instructions. The rest of the wireframes cover the user’s navigation through the interactive tour using the map and AR views.

FEEDBACK

We were able to get feedback from a wide range of ages using convenience sampling. However, we acknowledge these users may not be representative of the potential users of our zoo app. That said, the users provided valuable feedback that led to necessary design changes.

User One - 28-year-old male

Likes that you can swipe through images on the home screen.
Likes the ID reminder on the event page
He was confused about why there was parking automatically listed on the checkout page
Where is the membership info?
On the confirmation page: “What kind of ID?”

User Two - 67-year-old male

Felt the flow of the wireframes was straightforward and understandable
He liked the featured sections on the home screen.
He was interested to know more about what the membership included, how to learn more, and the registration process.
He expected to see a confirmation number after purchasing tickets as well as parking information.
While he was unsure where the tickets would be located at first, he acknowledged they were probably in the tickets tab.
The user stated he would want to understand why he would need to share his camera before agreeing to it. If it took pictures of people, would he need to agree to a privacy policy as well?
He also brought up an interesting concept of how group chaperones might be able to use the AR tour and interactive map to keep track of group members, like on a high school field trip.
He said he would want the AR icon explained to him because he wouldn’t know what it was by sight alone.
Another concept he brought up was the idea of rewards points earned throughout the interactive tour in which participants could collect points as they reach checkpoints and use the collected points to redeem rewards.

User Three - 26-year-old male

Overall liked the design
He wondered if ticket prices should be included on home page

HIGH-FIDELITY PROTOTYPE

In response to user feedback, we clarified the location of membership information and registration and provided a confirmation number at checkout.

Buy Ticket with Add-Ons:

Buy Ticket with Membership:

From our second set of wireframes, we made some major changes to enhance user confidence and trust. We did this by changing the onboarding flow, telling users how the app would use their location and camera before asking their permission to access it. We also implemented the concept of rewards points at checkpoints to encourage engagement. While we found the added group-tracking feature for chaperones interesting, we decided to focus on the basic AR experience.

AR TOUR

In our AR tour, the user begins their journey from the ticket screen. After onboarding, the user starts their journey through the zoo. As they walk, they can see the avatar they’ve chosen walking along the map. As they draw near unique points of interest, a bat signal will appear to guide the user with turn-by-turn directions to the location.

Users can turn on AR to view the real-world zoo environment through their phones. An icon will appear on the user’s device at checkpoints and key locations, such as animal exhibits, restaurants, information kiosks or first aid stands. When they tap the icon, it will convey facts or helpful tips. Users can access and listen to audio information about the animals. At each checkpoint, users can collect rewards to add them to their rewards wallet.

We also added icons for easy access to a birds-eye-view of the map for directions to important locations and accessibility settings.

With the Gotham City Zoo app, users will be able to navigate these features:

General Admission ticket buying
Browsing events
Reserving tickets for an event (Zoo Brew)
Adding a membership to users purchase
Adding AR tour to member ticket purchase
Managing purchased tickets
Search
View Rewards
Edit Member Profile
AR tour

INTERACTIVE PROTOTYPE

Buy tickets from the home page or buy an event ticket by browsing the event's page.
Start the AR tour by going to "Tickets" tab then clicking on the green "Excursion AR Tour" ticket.

CHALLENGES AND LIMITATIONS

There are inherent challenges in prototyping an augmented reality experience. One of the significant challenges was using a program that doesn’t easily support video. Our AR tour is meant for users to be able to fully interact with it, but it was extremely difficult to capture such a nuanced experience with limited tools.

SUMMARY

Our team worked together to make the Gotham Zoo app come to life using divergent and convergent design practices, sketching, wireframing, user feedback, and high-fidelity prototyping. Our app provides visitors the chance to take advantage of one-of-a-kind opportunities they will never forget, like having cocktails with rhinoceroses and using augmented reality to learn about giraffes while Batman guides them through the zoo.