Zoo Time

Client

Website

The Challenge

Create an application that let’s users plan their visit ahead of time. The app needs to inform the users on what animals, exhibits and other attractions are available, and let the users make their own itinerary from what interests them.

The Outcome

I created an app design in Sketch and Principle that lets users manage a “to-do” list of things that they would like to see at the zoo. Items are added through searching, recommendations, and scrolling the entire list of animals and attractions. Additionally, the app automatically generates a path to follow on the map of the zoo to show the users the recommended route to see all their listed items.

See video below for final result:

Design Process

Brainstorming

During my brainstorming stage, I listed as many features as I could that might be relevant to a zoo app in order to have a broad understanding of my available options.

Booking

Time
Date
Specific exhibit or day pass
Quantity
Adult, child, senior
Price
Confirmation
E-ticket

Explore

Search
Animals
Exhibits
Interactive map (GPS, distance to specified exhibits and destinations)

Account

History
Past tickets and purchases
Checklist
What’s next, recommendation

Information

Zoo address
Opening hours
FAQ
Reviews
Discounts and special events

Persona

In order to stay on track with the design process, I created a persona that would represent a big part of my users. The persona features Mia, a mother of three who juggles work and home life with great pride, all the while enjoying traveling and cooking.

Wireframes

I used the application Balsamiq to quickly ideate and create layouts. The low fidelity allowed me to test different concepts and move elements around quickly. My first version as seen below had most of the same features as the final version, however, the information was not intuitively and conveniently displayed. Each featured was on its own tab accessible through a hamburger icon opening a side menu, and it required the user to constantly switch pages. Here are some of my early concepts:

My final concept is a single-page app. I moved all the featured into a single page that the user never has to leave. This not only made the app more intuitive but it also prevents the users getting lost. The user sees a map of the zoo in fullscreen, and uses the modal bottom sheet container as the controls. There, he/she can manage his “to-do” list of things to see at the zoo. Items can be reordered, added, removed and the user can click on them for a short description of the item. On the map, a recommended path is automatically generated between all items added to the “to-do” list. By changing the order of the items, the priority of each is changed and the path is re-calculated automatically.

User Journey

The user journey starts with the on-boarding modal. The user then familiarizes himself/herself with the main screen: the fullscreen map and the modal bottom sheet. From there the user adds and manages the list of things to do and see at the zoo, and generates a recommended route to efficiently see them all once.

High-Fidelity Renders

From my wireframes, I moved on to designing the high-fidelity and pixel-perfect screens. I developed an aesthetic, a colour palette, and a style for my icons that I reused throughout the application for consistency and overall aesthetics. By using a card-based design, I was able to clearly and intuitively create item lists that could scale to any screen size responsively.

By referring to my persona (Mia) throughout the design process, I was able to focus on the ease-of-use and intuitiveness of the app and reflect on whether or not each feature was useful to Mia. The playful icons, rounded font, and card-based design makes the app versatile, readable, and suitable for young children as well as parents while giving the app a unique look.

Animated Prototype

I used Principle to create an animated version of my application in order to have a better understanding of the transitions, user journey, and animations between screens.

Conclusion

After ideating about the “planning ahead” app for a zoo, I came up with an itinerary builder that allows users to add animals, exhibits, restaurants and parks to a “to-do” list. The app then automatically and intuitively recommends a path to follow on a map between the added items.

While ideating for this app, I explored multiple aspects of planning and cataloguing a trip. I have tested my ideas using my persona and my roommates and narrowed it down to an intuitive and concise experience.

Should this app be further developed, I would recommend adding more features such as