Matthew Lawrence Christy
UXD/HCI Student / Game Designer

The Hartford Zoo

by: Team Nile
Group Assignment 3 - Functional Prototype
INFO-691 - Drexel University

Image alt tag

Team Prototype 3: Functional Prototype
Functional, Click-Through Prototyping using Figma

The third and final group assignment, our team was tasked to create an interface prototype that can be used as if it were a functioning system.

The topic of this assignment is the Zoo! We had to design a functional prototype of an app or website that allows people to purchase tickets to visit the zoo, view exhibits, donate, etc. (The zoo can be your local zoo, some other zoo, or some imaginary zoo – Harry Potter Zoo, Alien Zoo, Zoo of the Future, Zootopia, etc.)

Product specifications:

  • Zoo visitors can select and purchase admissions tickets

  • Visitors can view special exhibits, activities, or events that require additional purchase and choose to add them

  • Other features, like viewing anticipated busy times, are at your discretion

Defining the App's
Core Functions
Core Functions and General UI of the App

Core Functions and General UI of the App

Defining the core functions of the app was fairly straight-forward.

We began by asking ourselves, what would the average parent or young-adult want out of the app?

  • What areas are beneficial?

  • What might someone expect out of the app?

  • Where do the elements fit in hierarchically?

Wireframing the idea

Wireframing:

We designed aloud in this wire framing exercise; as we were drawing we were walking each other through the basics of the app. The landing screen should have the five basic core functions: Ticketing, Attractions and Events, Information, the Map of the Zoo, and the Hamburger menu in the top left that will show additional functions/area of the App.

We wanted to ensure a consistent navigation in the UI: The top menu bar will always have the Hamburger and the Shopping cart available, while displaying the title of the current screen you are in (e.g. Tickets). The bottom navigation bar will always provide a way to move forward and backwards throughout the app. Finally, the home button at the button at the bottom will take the user back to the landing screen.

We created a style guide for ensuring complimentary colors and legible fonts.

We created a style guide for ensuring complimentary colors and legible fonts.

The Landing Screen
The Ticketing Sequence
Events and Attractions
Information and The Zoo Map
Feedback from a user after trying our functional prototype.

Feedback from a user after trying our functional prototype.

Feedback

We reached out to two people for feedback on the functional prototype. It was constructive, and allowed us to make some changes in the design before submitting.

Some of the feedback is also a result of Figma's limitations, which are beyond the scope of the this project.

Give it a try!

The Hartford Zoo - Functional Prototype