Promo image of the honolulu zoo app.

Honolulu Zoo App

Project Detail

Role

UX, UI, Visual Design

Scope

Timeline: 4 Week
Team: UX/UI Designer, Mentor
Tools: Figma, Illustrator, Google Forms
           Photoshop, Google Earth

Deliverables

User Research
‍Competitor Analysis
User Stories
User Flows
Wireframes
Branding
Mockups
Custom Illustrations
Prototype
Usability Test

Overview

Millions of people visit the zoo and aquarium each year. This is a huge audience and an excellent opportunity to promote wildlife conservation. To integrate technology into helping the Honolulu Zoo visitors navigate the animal exhibits and encourage conservation through learning by making the process interactive and fun. I was tasked to design a mobile app that achieves these goals.

Problem

The challenge was to find a way to reduce paper waste from single used paper map pamphlets and increase visitors' engagement in learning about zoo animals and wildlife conservation.

Solution

I designed a mobile app with an interactive map that allows visitors to easily navigate through the Honolulu Zoo exhibits. I incorporated gamification to promote learning by developing an animal profile scavenger hunt game with a medal reward system to help give the user engagement incentives.

My Process

User Research

Survey

I conducted user survey to help learn about zoo visitors. Who are they? Who do they visit the zoo with? How often do they visit the zoo? How do they navigate around the exhibit?
Graphic icon relating to user survey.
User survey findings:
  • Adults 31 - 45 years old
  • Visit zoo once every few years
  • Primarily to see the animals
  • 65% of visitors use map
  • 39% recycle map after use
  • 83% of visitors like to learn about the animals

Interview

I interviewed the zoo visitors to understand their experience and pain points, especially regarding navigation and learning about the zoo animals.
Graphic icon relating to user interview.
User interview findings:
  • Paper map can be confusing with too much information crowded in a small area
  • Some paper maps are over simplified.
  • Finding yourself on a paper map is difficult without a self-locator
  • Paper map isn't always up-to-date
  • Visitors engage in learning passively.
  • Most visitors find the zoo and learning about animals to be more interesting for kids.
The user research findings validate the need for a well-designed interactive map to help the visitors navigate the zoo. It also informs me of my target users, which are adult zoo visitors with children. The map will be designed with the adult users in mind, and the interactive learning will gear toward a younger audience.

Competitor Analysis

To understand the strengths and weaknesses of products with similar functionalities to my design goals, I did SWOT analysis for the San Diego Zoo, Omaha Zoo, and Disneyland mobile apps.
Swot analysis of the san diego zoo, disneyland, and omaha zoo.

User Stories

I created user stories to identify the possible goals that the app user may have and the tasks they need to do to accomplish those goals. I then assign them a priority class to help determine which stories need to be implemented into the design.
User stories.

Wireframes

In this phase, I created wireframes to visualize the layout and information architecture of the app. I started this process with sketches to allow for exploration and quick iterations. From there, I took to Figma to draw out a more detailed digital version.

Wireframes Sketches

Loose sketches to quickly get ideas down on paper.
Wireframe sketches.

Wireframes Sketches Refined

Refining the sketches for clarity.
Refined wireframe sketches.

Lo-Fi Wireframes

Initial pass of the digital wireframes. In this stage I was most concerned with the layout and information architecture.
Digital lo-fi wireframes.

Hi-Fi Wireframes

I Incorporated feedback and increasing the fidelity of the wireframes to get a better feel of the final look of the app.
Digital hi-fi wireframes.

Branding

The process of creating branding work for me involves referencing the user research findings to make sure I have the intended user in mind when I make design decisions. I then explore published visual designs for inspiration and remix them into my own design solutions.

To establish the look and feel of the brand, I referred to user research findings. I decided on design criteria that best reflect the interests and values of the target audience.
Design criteria adjectives.

Moodboards for inspiration

I crafted moodboards from the visual elements that inspire me to refer to when I create my own designs. These are also helpful in communicating the directions I plan to take the project in.

Style Tile

Using the design criteria and moodboards as a foundation, I crafted a style tile to establish the color palette, fonts, and possible textures.

I want to present a new look in the app, but I don't want to stray too far from the current brand identity of the Honolulu Zoo. To accomplish that, I referenced their visual designs and used a similar color palette.
a style tile.

Logo Design

I started the logo design process by creating rough sketches of the ideas. During this stage, I play with arranging and iterating all the possible components of the logo to explore variations. From here, I pick the ones with the most potentials to be critiqued by stakeholders.

With the feedback in consideration, I then start defining the logo design. I explored the shapes and spaces of each component to achieve the most readable design. With the planning and exploration completed, I created the greyscale version of the logo then add colors to them in Adobe Illustrator.
A breakdown of the logo design process.

Mockups

I created the mockups to show the final looks of the app. I used the wireframes as the foundation and applying design decisions using the style tile as a guide. This phase involved creating custom icons and illustrations.

Custom Map Icons

I created custom icons to use as map pins. The icons represent different classes of animal exhibits and amenities.
A breakdown of the map icon design process.

Zoo Map Design

Using the current map of the Honolulu Zoo in tandem with google earth, I created a more detailed version of the zoo map and styled it to better fit the look and feel of this product.
A breakdown of the zoo map design process.

Mockups Early Version

I applied the branding elements, custom icon designs and illustrations to show the look and feel of the app in this early version of the mockups.
An early version of the mockups.

Mockups Revised

I revised the mockups based on the feedback I received from stakeholders to improve the design. I designed additional icons and UI elements to take the Medals page to a more finished look in this revision. I updated the navigation menu to improve the looks and feel of the interactions. Lastly, I added more styling to increase visual uniqueness in the product.

Medal Designs

A breakdown of the medal design process.

Mockups Final Version

Final version of the mockups.

Prototype


With the completed mockups, I used Figma prototyping tools to design the user's interactions when using the app. In this stage, it's important that accessibility, mental models, and micro-interactions are considered to ensure that the app functions as intended and brings the user delight.
A teaser image of the prototype.

Usability Test

To test the design of the prototype, I conducted moderated usability tests. I interviewed 6 participants remotely over Zoom. The sessions last between 30 - 40 minutes.
Infographic showing the usability test detail.
Infographic showing the purpose of the usability test.

Test Results

From the usability tests, I learned that most participants understood the purpose and interactions found in the Explore, Medal, Animal Profile, and Information pages.

The users could navigate the map on the Explore page and successfully find the animal exhibit using the filter function.

The users expressed that they find the concept interesting. They think that it would be the most successful aim toward kids.

The animal profile activity was straightforward for the participants. The taking photo feature was noted as fun and gives the user another reason to take photos of the zoo's animals.

The users were surprised to find that the animal pages were intentionally left unfilled at first but quickly concluded that it was mean for the user to complete, like a "scavenger hunt."

They noted that the medal system is an excellent way to get users to complete the animal profile activities and is a perfect incentive to get visitors to return to the zoo should they want to obtain all the available achievements.

The one area that was confusing for most participants was the animal map pin icons. In particular, the reptile and bird icons were not immediately recognizable.

Prototype Revised


Based on my findings from the usability tests. I made changes to improve the prototype.

In this version, I redesigned the map pin icons to be more recognizable and fixed minor issues such as typos and slight inconsistency in the UI alignment.
A before and after version of the changes made to the reptile and bird icon.

Conclusion

The design of the app was very successful. The users were able to understand the goals of the app. Using the map and the filter feature, the users could navigate and find the animal exhibits. They understood the interactive components of the animal profile activity and the achievement system. They found it to be an interesting way to get visitors, particularly children, to learn about zoo animals. And promote revisiting the zoo in the future.

The only element that didn't work as intended was the map pin icon design. In particular, the reptile and the bird icons were unclear on their own to most users.

I had anticipated the animal profile activity and the achievement system to be more difficult for users to recognize without explanation. Still, I was surprised that they understood the concept quite well after seeing how the Animal Profile and Medal page were presented.

I thought that the map pin icon designs were easily recognizable, but most users could not discern the reptile and bird icons.

One feature that I would like to have been able to implement given more time was to create a notification feature that alerts the users when they receive a new medal. This would significantly bridge the gap between the actions that the users made in the animal profile activity and the achievement reward.

From this project, I learned that map creation is a very challenging task. It's crucial to strike a good balance between the actual and the representation of the landmark.

I've gained more experience using Figma as a design and prototyping tool. I learned that while Figma is a great program, there are still a lot of limitations. Namely, the program can be highly laggy when viewing prototypes remotely. This had forced me to find alternative solutions during my conducting the usability test. I looked to the remote control feature found in Zoom to ensure that the participants can see how the prototype was intended to be seen.

This was a beneficial discovery that I will apply to future usability tests.

Thank you for reading