Click-Through Prototyping using FigmA

Functional Prototyping

The Hartford Zoo

We designed a fully functional prototype of an app that allows users to purchase tickets for the Hartford Zoo, view exhibits or events, obtain zoo information, and display the zoo map.

Defining the core functions

We began by asking ourselves what the average person would want from the app.

What areas are beneficial?
What might someone expect out of the app
Where do the elements fit in hierarchically?

Wireframing and Branding

Wireframes

Easy to Use

The landing screen was designed to have five essential 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/areas of the App.
Consistent Navigation

We wanted to ensure 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 on (e.g., Tickets).
Changes Post-Sketching

After reviewing the wireframes, we decided to include a bottom navigation bar that will always provide a way to move forward and backward throughout the app. The navigation bar also consists of a home button at the bottom. It will take the user back to the landing screen.