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?
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.
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.
User Personas
I created user personas based on the research findings. These personas represent the key target audience and serve as a reference for the design process.
Peter Parkour represents the general zoo visitor who uses the app mainly for navigation.
Jean Nisbest is a more frequent zoo visitor and uses the app as a way for her kids to become more engaged in their exploration and learning at the 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 Flows
Based on the user stories, I created user flow diagrams to map out the user's steps as they use the app.
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.
Wireframes Sketches Refined
Refining the sketches for clarity.
Lo-Fi Wireframes
Initial pass of the digital wireframes. In this stage I was most concerned with the layout and information architecture.
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.
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.
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.
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.
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.
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.
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.
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
Mockups Final Version
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.
View 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.
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.
View Revised Prototype »
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.
