SAN FRANCISCO ZOO & GARDENS
HOW CAN WE ENHANCE YOUR ZOO VISIT BEFORE, DURING AND AFTER?
PROBLEM
We were presented with a two part problem to solve. The first part asks, what is there to do and what should you go see first? The second, how do we keep children engaged and informed of what they are seeing and experiencing? Typically, zoo’s employ a pamphlet or a physical billboard to assist customers, but with crowds of people and children by your side this can become a bit of a handful.
SOLUTION
To solve the problems presented we chose to create a digital guide app. We present vital park information for parents to navigate their day while becoming an interactive learning tool for children.
Scope: 6 months
Categories: UX Research, UI/UX Design, Graphic Design, Animation
Role: Team project. Responsible for UI/UX Design, with some Illustration and animation.
Tools: Photoshop, Illustrator, After Effects
App Store: San Francisco Zoo
EASY AND FUN TO USE
First we organized all pertinent information and split them into five main sections. These sections will also become our main navigation and help our adult users digest park info with ease. Our users can plan their route and find animals facts, exhibits, cafe or rest rooms on the way.
Graphically speaking we aimed for this to no be just another app, because we wanted to have children be engaged a decision was made to crank up the artwork. The overall design took note from jungle-like elements. Bold images and strong graphic icons would be front and center, our main navigation buttons have a stone texture and we surround the edge of the screen with swaying leaves.
UI ASSETS
WHERE SHOULD WE GO FIRST?
The San Francisco Zoo map can be found posted around the park on billboards as well as in the paper pamphlet. The current map design, we felt did not need to be changed however this would be a great opportunity for us to add some functional upgrades. A type of filter was added at the top of the Map screen via our iconic buttons. A number of buttons were created to help our users focus on a specific area. By allowing access to your location we are also able to track where you currently are inside the park.
FUN AND INFORMATIVE
Keeping the little ones in mind we gathered all information on the parks inhabitants. We understand the excitement children have viewing these animals that they might not get a chance to read the text provided. Children can read on their own time or just view the different photos. Parents can also dive into this section to help identify each animal. The best part of this section is being able to take a part of the zoo home with you.
ANIMALS AND MUCH MORE
We want our users to make the most out of their day and not miss any of the fun stuff. Along with our animal friends, the park also offers feedings, rides, playgrounds, animal talks and more! To stay on track and get the most out of your day requires being able to quickly review what activities are available.
In our exhibits section we offer the user a complete list on all things park related each with detailed information and interactive links. Take a moment and map out your day in advance before you come view the park in person!
WIREFRAMES
Moving quickly to block out the UI we use basic shapes and roughly estimate our layout needs. Here we will make a few options playing with hierarchy and size until our layout feels functionally correct. The wireframes are then followed through to a sketch phase, keeping it rough and dirty these sketches will give us an idea of how we might style the UI when moving to color.
SKETCHES
Flexing a little more of our creative muscle we add more detail and form to our basic wireframes. Themes can be established that give different moods to our user. Being able to identify what graphics might or might not work through these rough passes will help the design process later.
HIGH FIDELITY WIREFRAME
Taking into consideration all we have learned from our initial rough wireframes as well as our sketches, we can homogenize our layout into something a little more solid. One step shy of color, we now have a working solidified version of our UI layout.
USER FLOW
To view the full user flow, please hit the button below to download the pdf.
THE PROCESS + FLOW
To view the entire flow tap the button to download the full PDF
MOOD BOARD AND EXPLORATION
Because we are dealing with food the overall design needed to be ‘alive’ and eye grabbing almost as if the food was jumping off of the screen. This was 3rd and final round of mood boards chosen, after reviewing existing food apps and icons we decided that a more third dimensional material design was needed.