• RINO App
  • Gambit App

RINO App: A Zoo Admin's Assistant

[Regulator of Information and Navigable Operations]

Image displays an Android phone
Summary
A friend of mine from college created the education department for Racine Zoo in Wisconsin from the ground up. They have 16+ programs dedicated to conservation and animal education on top of other events at the zoo. For the last five years, she’s been working with common tools like Outlook, Gmail, and Excel with little success in finding a program that can accurately consolidate many of the tasks that entail staffing for animal care.
The Problem to Solve
Needing to jump through various applications for animal handling creates a large margin of potentially dangerous errors! While Microsoft Excel and Outlook have their functions in the zoo administrator's life, they are not a consolidated substitute for what the client was looking for.

App Requirements
‍‍
The app was required to solve three major tasks, which included the ability to:
-Plug in animal information and rules associated with them (including rules about how long animals can be out)
-Plug in educators as they’re clear to handle specific animals
-Generate a list of suggested animals for events based on the above parameters

Target Audience
With emerging young, educated professionals in the zoological field, the RINO app helps serve as an organizer for driven coordinators. These diligent workers are the bridge between conservation education and internal cooperation. They deserve to have an app that works according to their needs.

RESEARCH PHASE

Market Analysis
While trying to research apps to help with animal handling, it became very clear right away that this was a novel problem to solve. When speaking with my client, she had mentioned that no such app existed in the field. In an attempt to figure out what features worked and were valued, I conducted an interview while writing down the pros and cons of the programs that were currently used at Racine Zoo.

A comparative chart between Microsoft Excel and Outlook.
Pros for Organization text "Excel allows you to create tables and charts that are easy visuals to follow. it is an application that is well-established in a variety of professional settings.

Versatility text under Outlook.
"Outlook includes internal messaging on top of the ability to create events. Like Excel, Outlook is an established application used across industries. 

Learning Curve Under Excel as a con
Currently the program is mainly used as a mean to organize staff and their certifications, but there aren't other functions that work well with needs

Too Many Under Outlook
While outlook is used for events and messaging, staff still need to use external notes and emails to collect all information needed for schedules.

Inspiration under Excel
Organizing using tabs will allow for easy navigation and lists can help display info easily.

Calendar under Outlook
We can utilize a calendar that will include events with suggested animals and staffing.

"Having to use multiple platforms drastically increases the chance for errors...I just really want things to work and work in a timely manner..."

Conducting a survey while asking both quantitative and qualitative questions, revealed what our client valued most.
Who valued most from a streamlined process?
How long on average does it take to submit a staffing form?
What is most important to consider when working for the zoo?

Our client informed us that it goes through at least five iterations of confirmation between different department heads before the schedule is finally posted (and they each have to deal with their own personal programs)!

A word cloud created from survey answers of the client. Prominent words include animal, educators, schedules, job, mistakes, make, ambassador.

Creating a word cloud from our interview notes revealed the key words that our client would use to describe their position and what they wanted for the staff! Animals and Educators were no surprise, but seeing words like Mistakes, Order, and Rules really drove home that they needed something that WORKED.

EMPATHIZING WITH THE USER

Image of Persona 1, Aszya. Aszya is a woman with dark brown, wavy hair that goes past her shoulders. She wears rectangular glasses and is smiling as she holds a green snake in her hand.
Persona 1: Aszya (27yo || B.S. Zoology)
leads the education department with compassion and consideration for the safety of staff, guests, and animals. She prioritizes accessible education and making sure that staffing needs consistently and accurately reflect the needs of the zoo.

Pain points: Too many apps, simple tasks fail too readily, currently no way to auto-generate suggestions
Image depicts Persona 2 named Ryan. Ryan is a young man with a full brown beard and short salt and pepper hair. He is looking at a seal (whose head is mainly cropped from the image).
Persona 2: Ryan (29yo || B.S. Animal Conservation)
is an Education Lead who focuses on the daily face-to-face interactions between staff, animals, and the guests. With a degree in Animal Conservation, he values teaching others about the importance of biodiversity and conservation efforts of zoos.

Pain points: communication issues between departments, outdated information can lead to safety issues, need for quick and accurate updates isn't readily available with current systems
Journey Mapping
What steps do our audience need to take to complete the task of organizing their events and animal handlers? Through our empathy map and storyboarding, we strip the path to its simplest form to focus on keeping the process succinct but effective.
This is a Journey Map that shows Aszya's routine in staffing for an event.
Simple User Flow and Storyboarding
A great way to break down the steps needed to make the app a positive experience for our client. It was crucial to make sure that information was easily accessible in the least amount of steps and laid out intuitively.
user Flowchart showing that education admins, program coordinators and older animal handlers would be the ones using the app.

Main goal: successfully designate the animal and handler for a program.
The Storyboard shows Rory (a cartoon rendition) who is a 27 yo zoo educator. The six panels depict Rory deciding what animal to schedule for the event, checking the animal info, reviewing the rules and confirming, picking and confirming the handler, finally confirming the event with him smiling with a thumbs up.

THE DESIGN PROCESS

Sketches and Notes
There were many ways to approach designing RINO. What better way than to sketch and take notes quickly throughout the ideation phase. This was a great opportunity to focus on the what and the how of the app. Some major hurdles I wanted to tackle were how to easily categorize information in an effective but simple way and the presentation of the overall app to include all the details the client wanted.
Racine zoo app notes, part 1. Much of the information is in black ink with the occasional red ink to indicate connections between thoughts. Information primarily discusses the different components to consider for the UI and the user profiles.Titled: Animaide.
Mockup 1 consists of two blue sticky notes. The top sticky note uses the tab system considered for the project while the bottom sticky note shows the layout of the event which includes a title, date/time, location, description, and the confirmed/suggested animals to be used for the event.
A continuation of Notes 1 that focuses on how the animals would be listed/in what ways their rules would be provided for users.Nearly identical to Mockup 1 save that sticky note 2 is now unfolded to show all the information stated previously.
Crazy 8’s
I wanted to use tags as the easiest and most navigable process, because it is intuitive and customizable based on the user's needs. I iterated the main events page of the app several times, and found that having the tags system helped solve the issue of creating unique rules for animals, suggestions, and event needs.
A sheet of plain computer paper folded into eights. Each section shows a variation on how to the main event page of the app would be laid out.
Hand-drawn Paper Prototype
With limited time during a sprint, it's imperative to get ideas out quickly and efficiently! For the design, I made a small booklet that helped mimic the tabs of the app. It aided in visualizing what would would be displayed up front, and the backside of each tab would have a small sketch of how other screens may appear.

The first page of a small booklet-style mockup of the app UI. There are three squares in the upper left hand corner to indicate social mediate links.

A logo and a login in the center with a chat/faq function in the lower right hand corner.The inner pages of the booklet show 3 tabs titled Home, Animals, and Staff. There is a profile image at the top with a settings wheel and internal notification system.

The Home tab displays the month, date, and the events of that date.The left page (aka the back of the Home Tab) shows details such as description and suggested animals of the events for that day. It is meant to show how things would look if you clicked on those specific events.

The new Animal Tab has 2 sections, each with 6 rectangles. The sections are marked Tier 1 and Tier 2 based on the difficulty of handling for animals at the zoo. The left-hand page has the animal's name, species, appropriate tags as well as the rules and description of the animal selected.

The staff tab contains 2 columns of 3 squares each to indicate listed staff members.
Mood Board and Color
During the paper prototyping process, I wanted to give consideration for colors and moods of the app. It should feel fresh and lively like the animals and plants you would see at the zoo. The colors were meant to evoke a very natural and refreshing feeling for our users. While the not all of the colors were used in the design, I kept the greens and lighter oranges/yellows to make the palette more inviting!

The mood board consists of 6 images total. Starting at the left, upper row is an image of orange bunches on their branches. Going right, we have color shade e59a68 which is a muted orange color. There is a potted monstera plant against a white background  as the last image on the top row.

The second row starting left has 4 colors of a dark green, a lighter, leafy green, pale green, and pale gold stripes going horizontally.

The middle picture depicts water bromeliads of a light orange and yellow variety. The last image is of color #293818, a dark, earthy green tone.
Wireframes
After creating so many paper sketches, it was time to gather the best ideas into InVision. It allowed me to look at functionality and flow before moving forward with prototyping.
All images for wireframes are in grayscale. The first set shows account creation as well as the login in screen and a confirmation of sign up.
Wireframes included show the main events page. There is room at the top for the user profile image, their name, and their position. Sections are separated as tabs marked Events, Animals, and Staff. The Event page has a large calendar, the date, and a list of events below that would occur for the selected day.

Other wireframe images have options to add events.
The final set of wireframes show that the staff and animals are simply listed and you can click on each one individually to show descriptions and set rules/certifications.
Low Fidelity Prototype hero image. A phone next to a mac book keyboard against a white tabletop. Image on the phone shows the RINO app in full color on the Events tab.
Clickable Low Fidelity Prototype
This shows the interactions in practice! What changes can be made to the interface for better user experience? I touched up the main features while improving assets to make sure they were accessible and consistent with our vision for RINO.
Link to Prototype.
That same events tab in the hero image for the low-fidelity prototype.
The animals tab includes the list of animals, an add function, and a sort/filter function for the user.
Final Thoughts
With limited time and resources, I spent a great deal of time with my client in discussing how the internal systems of RINO could be improved. Overall, she was very pleased with the app's simple and functional design! The hope is to go through several new iterations of development and testing to gather more feedback in the future. Currently, I have been working on creating a better visual design as can be seen by the slides below.

Upgraded visuals for app onboarding. RINO logo in the upper left-hand corner is a solid, polygon rhino against a pale green background.

Welcome to RINO
The updated login screen. 
Words at the top against dark green background say "Get organized with the power of RINO"

Login consists of email and password.
Upgraded visuals for the main body of the app include more rounded rectangles, a calendar without grid. An overall much more polished design.
Have questions or want to talk about my designs? Excited to hear from you!
Contact Me