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.

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 the 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.