Zluto Zoo Website
My Role: UI Designer | Team: Linh-Chi Nguyen, Laala Mari Jawara | NOV 2021
Overview
We were assigned to create an interactive, high-fidelity prototype of a zoo website. Our team set out to envision a new imaginary website that users would be delighted to interact with. We started by brainstorming potential ideas and themes in low-fidelity wireframes. The low-fidelity wireframes we created explored the layout of the homepage, purchasing a ticket, and interaction with a zoo map. Over two weeks, our three-person team created a fully designed zoo website exploring two user actions, buying a ticket, and finding the zoo map. Below are all the steps taken to develop Zluto, a tropical zoo located in Florida that offers various events and experiences.
Process
Step 1: Low-Fidelity Designs
To start, we individually brainstormed three different ideas for the zoo website. The results were three distinct designs that were not biased by each other and offered a variety of different interactions and layouts.
Design 1. With the requirements in mind, this design focused on interaction and calling attention to animal information. Design one highlights a home page that reflects the aesthetic of cheerful, bright, and a place where animals thrive. An interactive map was created where users can feel connected to the animals along with finding relevant information. Finally, a payment screen that is intuitive and inspires users to checkout.
Design 2. This design took a stripped-down approach to building the zoo website, leaving much of the creative elements (e.g., colors, themes, etc.) for consideration in the next iteration. It focused on getting the functional elements onto a low-fidelity wireframe, from the homepage to the checkout screen, and then to the interactive map. The interactive map was meant to serve as a navigation tool for zoo visitors, guiding them through a seamless experience. The potential visitor(s) would plan their visit by selecting their exhibits of interest. Then, built-in artificial intelligence would be able to calculate the most efficient route given what was selected.
Design 3. The design starts with an overarching image that advertises a new animal experience at the zoo. Additionally, weather and hours are easily visible through a small pop-out when the user first enters the home page. Next, a quick way to purchase tickets followed by upcoming events. The design then walks through a proposed experience of buying tickets along with adding events. The last page of payments offers the user a quick way to add a donation without much effort. Lastly, there is a confirmation screen with a way to print tickets.
Step 2: Mid-Fidelity Wireframe
While discussing our sketches, there were certain design details in each of our initial designs we decided to utilize. The challenge was bringing three different ideas together as a final cohesive product, we discussed the importance of imagery and making sure the website was intuitive and functional. In our final wireframe, we highlight important aspects of each design while creating one cohesive design. The yellow dot represents the starting point for each flow.
Purchasing Tickets Flow
Viewing Map & Animal Information Flow
Step 3: High Fidelity Prototype
Homepage. Upon entering the Zluto website, you will be greeted with a large header image displaying an engaging toucan advertising the new bird exhibit. Right away, users will be able to begin the ticket purchasing process by clicking on the drop-down arrows to add the desired number of tickets then clicking on the ‘get ticket’ button. If a user scrolls down, they will see upcoming events and click‘ view event calendar’ for a larger more detailed view on a separate page. Following the upcoming events are images of staff, patrons, and animals enjoying their time at the zoo. This section encourages users to take photos while at the zoo and gives them a sneak preview of the excitement of visiting the zoo. Finally, the footer included contact information, and additional pages users might expect to see are at the bottom of the page.
Purchasing Tickets. For the check-out screen, our team identified the most essential elements to best assist potential users in making decisions on the number of tickets, selection dates, and available times. The “Tickets” screen follows a consistent and standard format that keeps users in the loop along the way by removing the guesswork of the check-out process. A progress indicator remains from the previous wireframe in order to provide users with the visualization of where they are in the purchasing process. In addition, we included an order summary to the right, which updates after tickets are added along with the selected date, times, and events. This in turn the order summary helps the user visually understand what just happened, why it happened, and what to do next if they need to edit.
Moving on, the events page showcased current events offered by Zluto. The user is then brought to a standard payment screen, followed by a call-to-action for users to make a small donation to the zoo. In the last screen, the user is provided a confirmation number with the option to print or text tickets for their upcoming visit, and for those who are interested, the option to easily join Zluto’s newsletter.
Map. We decided to implement a Map element in our final design, this was something discussed within our team, deeming it highly necessary for zoo visitors. Our deliberations led us to want to create something bold and informative. With inspiration from Disney’s ‘Zootopia’, the High-Fi wireframe naturally resulted in the use of color and imagery within our design scheme. The Maps element features a search function, a ‘Lost Feature’ which allows users to be guided in the same working functions of Google maps with the option to request a guide. There is also the ability to view and download the Zluto maps, although users can still view different branches within the Zluto zoo. Finally, Maps is also a place where users can learn more about the different animals living at the zoo, when they search for or select an animal or branch.
Step 4: User Feedback
Our team developed an interview guide (see Appendix A) with focused questions to understand what was working with our design and where the pain points. To ease participants into the interview and gather background on their recent interaction with zoo websites. The guide led the user to first interact with the homepage and let us gather their first impressions. Next, we prompted them with a scenario of wanting to see a visual of the zoo. This led the participant through various screens to find the zoo map and information about flamingos. After returning to the homepage, we asked the participants to purchase two adult tickets and one child ticket. As they went through the intended user flow, we promoted them to add the event of feeding the bird. In the end, we inquired on what they thought worked well along with what could be improved. Overall, we expected interviews would take between 30 minutes to 45 minutes.
Study Themes
After the user tests were completed, our team pulled several themes, including what worked for the design and what didn’t work. We wanted to highlight which aspects were helpful for the user to complete an intended action, and which aspects we overlooked when developing the high-fidelity wireframe.
➔ In general, participants thought that the homepage and its navigation was intuitive, easy to navigate, and contained all the information that they would expect on a zoo website. Some information that would help users form decisions on whether they wanted to visit, however, needed to be better emphasized.
What worked:
Dividing the sections into thirds (i.e., rule-of-thirds) helps users stay visually organized
The ability to purchase tickets at two places (1) front and center on the homepage banner, and (2) at the top of the navigation, was extremely helpful
What didn’t work:
Lack of clear information about what Zluto offers, where it is located, and what makes it distinct from other zoos, which could help inform users about a decision to visit
Lack of animals on the front page, which visitors would probably expect
➔ Participants also thought that the ticketing flow was straightforward and easy to navigate. There were also minor issues uncovered in the subsequent screens.
What worked:
“1-2-3” under Tickets was helpful for users to understand where they are in the ticket-buying process - users know they will be brought to the Events screen next
Order summary was very helpful and intuitive (i.e., the updated summary appears on the right after tickets are added)
The confirmation page met user expectations
What didn’t work:
Lack of information about what is included in the general admission ticket and what is included for each event and the timing of the events.
Instead of automatically adding a specific number of event tickets based on the number of general admission tickets in a cart, rather, most participants would click the “+”’ three times instead if they wanted three people to participant in the event. This was discovered as unhelpful for cases someone in a group wants to opt out of an event. It should not be a requirement that all three must attend.
Payment Page - Minor issues were highlighted by participants, such as the lack of consistency in required fields, and the participant is asked to input the address first, followed by the payment. Having the donate feature in red also indicated that something bad or an error has occurred. Payment Page - Minor issues were highlighted by participants, such as the lack of consistency in required fields, and the participant is asked to input the address first, followed by the payment. Having the donate feature in red also indicated that something bad or an error has occurred.
➔ There were significant issues with the ‘Welcome to Maps’ pages. These issues ultimately impacted the discoverability of the system status, created frustration to participants, and conflicted with what participants expected to happen or expected to be shown.
What worked:
Easy to locate where to find the map from the homepage
Easy to locate where to download the map
Guest services icons that represent the amenities was also intuitive and easy to understand
What didn’t work:
‘Welcome to Maps’ Page -
Did not align with what participants expected when clicking on ‘Map’.
Page was described as “too minimalistic” and “free-flowing”, thinking it would show more information, including what kind of animals are at the zoo.
Lack of descriptions of what each category contains (e.g., what is the canopy?)
‘Viewing the full map’ link located to the right was seen as redundant and an unnecessary step
‘Lost?’ Feature
This lost feature seems out of place on this page.
It was unclear how the lost function works or its intended purpose
It was confusing as to why they needed to hold for 10 seconds as pressing just once should be sufficient
Full Zoo Map Page
Page did not compliment the homepage well
More detail needs to be added to tell visitors about the zoo itself
Colors do not represent the zoo well, such as the “muddy” colors and having the ground as blue which is non-intuitive
Some aspects were not helpful for helping users find and locate things, such as the letter-number grid
Did not make sense to show the restaurants first; most would expect the animals to be shown first as they are most essential for a zoo
Searching for Flamingos
Extra transition to the search bar is unnecessary and redundant. Participants would have expected to be able to use the search, rather than being brought to a similar screen.
It was not obvious that the graphics containing the four planets are clickable.
Categories are also still unclear. It is non-intuitive to know that flamingos are in NEST. The page needs more info on the animals available in the first place.
Participants thought they would see the map of NEST in focus, while the rest of the map fades away or becomes less visible. It would be more helpful to show NEST in relation to the other planets.
Welcome to the NEST Page
Animals need labels à showing just the image of an animal requires users to have to guess what the animal is
No indicator that participants must scroll through to see the animals
Flamingo Information Page
Not providing information about the flamingos that are located at the zoo
There is a lack of information about the flamingo, but even so, this information is not as useful to visitors since they can read up on this while at the zoo
Step 5: Future Changes
The themes uncovered from the user test helped inform how to approach the next iteration of the zoo website. First, to address user concerns with the homepage and ticketing flows, minor changes would be implemented. These include:
Keeping the layout as is but experimenting with different schemes to better capture what is offered at Zluto. Spotlight aspects of the zoo that are important to visitors, such as the animals. These changes would need to be validated with user research methods, such as A/B testing and user interviews with potential users.
Add descriptions of what is included in a general admission ticket on the ticket start page as well as descriptions for each event.
Use the same subtracting and adding of tickets option for the events page (i.e., “- 0 +”). When adding the events, users will need only add one event ticket at a time to increase user control.
Switch the order of the address and card payment fields, and add a required* indicator next to the email address for consistency.
Change the red donate box to a different color.
Major changes would need to be made to align the user’s mental model of what is expected from a zoo map. We would want to ensure that the map is both helpful and intuitive to navigate. It should also emphasize features of the zoo that are important and relevant to the user. To begin tackling these issues, the changes would include:
‘Welcome to Maps’ Page
Remove this page completely, including the ‘Lost’ feature
The landing page when clicking on ‘Maps’ will instead lead to the ‘Full Zoo Map’
The search function will remain on the ‘Full Zoo Map’ page as well
Full Zoo Map Page
Add design aspects that are intuitive for visitors: colors that represent the zoo, it’s components (changing the blue ground to a green to represent land)
Add clear and detailed labels to the areas of the zoo, including what kind of animals are at the zoo as well as descriptions of which animals are in certain categories
Remove the letter-number grid and add a North – West – South – East icon. This would be more intuitive to help with navigating around the zoo. Consider adding a proximity scale to show the distance between different exhibits and amenities.
Move restaurants from the left of the page to the bottom of the page so that it is not the first thing users see when viewing the map.
Redesign the map so that clicking on one area of the map focuses on what is in that area, while the rest of the map shows where an area is in relation to the others
Searching for Flamingos
Remove the extra transition page
Allow users to type “flamingo” into the search directly from the ‘Full Zoo Map’ page
Provide users the direct link to the Flamingo Information page upon using the search.
Welcome to the NEST Page
Allow users to navigate to this page by clicking on NEST from the Full Zoo Map
Remove the scroll function and instead use a grid-like pattern to display the categories of birds, along with a label
Flamingo Information Page
Add relevant information about the animals unique to the zoo.
Design Justification
Design decisions. Our design has gone through various stages and changes along the way, we envisioned a place where zoo visitors can experience practicality as well as the comfort of a good user experience, and website users are happy to look and interact with. We made key decisions along the way to stay in accordance with that mission such as the decision of making the Zluto experience a website rather than an app, we believe this would allow for accessibility to all, considering teachers who are buying tickets for a classroom, group trips, expeditions and more. With this in mind, our Home, Tickets and Maps pages have all been built out in the reflection of the user journey as well as creating a seamless task completion process.
Reflecting on the design process. At the start of the design process, our team identified key aspects that we believed were relevant to the homepage, ticketing features, and navigating a zoo map. Though members of our team found that building the high-fidelity prototype was enjoyable and allowed for much more creative freedom, we also realized that building a clickable high-fidelity prototype would not be possible without starting with the bare bones of a design. In doing so, we were able to lay the groundwork for creating our final prototype. In addition, all throughout the design journey, our team was consistently in contact to address any bottlenecks in our designs and any looming questions that emerged. Admittedly, working asynchronously with time constraints was also a challenge. In allocating tasks, we each took ownership over a specific user flow. However, by trying to divide up the work into manageable components, we believe we lost some of the cohesion that would have made the concept of the Zluto zoo clearer to potential users. As we will describe in the next section, the lack of user testing during the early stages also made a defining impact.
Reflecting on the user feedback. Most crucial to the design process is the ability to include gain insight from potential users every step of the way. In our case, we dove into the problem space from the initial brainstorm to the development of the high-fidelity prototype without carrying out any user testing. Our team mostly operated on making assumptions on what we believed potential users would find most useful in a zoo website experience. This defined the difference between user testing early in the design process versus later in the design process. If we tested users earlier, we would have been able to make better-informed decisions that aligned with a potential user’s mental model. In consequence, we invested too much time and emotional effort into the designs. The distinction between when user testing occurs was especially amplified after gathering user feedback for the ‘Maps’ pages. We went full-fledged into a design without being informed on whether it was the right direction to take. Still, the user feedback that we gained was crucial for identifying pain points in the design and provided us with context that would help us in making changes in the next iteration of the website.