DENVER ZOO
I redesigned the Denver Zoo website based on UX research using their current design system.
Website design featured on Design Rush!
Summary
For this project, I evaluated and proposed a redesign for the Denver Zoo’s website. The redesign is essential because the current design is confusing and does not allow users to complete tasks quickly and efficiently. The outcome of the redesign is a simplified ticket-purchasing process, an organized navigation bar, a ‘home page’ tailored to the user’s needs, an interactive ‘animals’ page, and a more accessible website.
Challenges
A very long and unintuitive ticket-purchasing process with many unnecessary steps
An overcrowded and unorganized navigation bar with many repeated navigation headings and sub-headings
A long home page that is heavy on text and displays more information than needed
An animals page with a broken ‘filter’ feature and a lack of interactivity
Overall inconsistent brand personality, page layout, navigation styling, and call-to-action styling
Problem’s solved with the redesign
Working with the Zoo’s current design system
Using their brand kit in an accessible way
Limitations
Tools
Figma
UX Metrics
Duration
January - May 2023
Roles
UX/ UI Designer
UX Researcher
RESEARCH
UX evaluation
In performing a UX Evaluation on the Denver Zoo’s website, I audited the current state of the website against proven UX design principles in order to find pain points within its usability, findability, content, and visual design.
Inconsistent styling of navigation items and more than eight items per sub-navigation group can lead to user confusion
The interface does not express easy reversal of actions which does not allow users an easy way to go back
Site does not pass AA compliance when graded against WCAG 2.0 accessibility guidelines
No balance of information density and use of white space, making it hard to read and find important information quickly
Many of the call-to-actions are not immediately visible and do not look actionable or pressable creating confusion among the user
Major problems identified
Decide on the brand identity and stay consistent throughout
Remove duplicate navigation options
Create obvious options to reverse actions on each page
Reduce clutter and long text blocks
Make accessible using AA compliance
Key Opportunities
Card sort
Eighteen people sorted the sub-headings from the Denver Zoo’s navigation bar under the headings based on what made the most sense to them. This was used to help evaluate the zoo’s Information Architecture and eventually create one that caters to the Denver Zoo’s users' needs.
17/19 participants placed the sub-heading ‘rules and regulations’ under the ‘about’ heading although it’s currently under ‘visit’
15/19 participants placed the sub-heading ‘FAQs’ under the ‘about’ heading although it’s currently under ‘visit’
14/19 participants placed the sub-heading ‘up-close looks’ under unnecessary in order to remove it from the main navigation
Key results
Site map
To create the site map, I typed out all of the website’s navigation headings and reorganized the website’s sub-headings beneath them. This reorganization was mainly based on the results of the card sorts. This reorganization was necessary because the repetitive headings go to the same pages.
Below is the Denver Zoo’s current navigation with each pages drop-down open, displaying its subpages:
Through the reorganization of the headings and sub-headings, the following key changes were made:
29 subheadings were discarded completely, either because they were repeated or were unnecessary
The number of subheadings within the ‘visit’ heading was cut in half
‘Support us’ heading was cut from 14 sub-headings to five
‘About’ heading was cut from 13 sub-headings to six
Final site map:
Tree test
Five participants aged 18-65 who have visited the Denver Zoo at least once complete a tree test. The tree test consisted of five tasks, and participants were asked to demonstrate the path they would take through the website's navigation to complete each task. Below are each of the tasks, the correct navigation, and the participant results.
Task one
Imagine you want to rent an electric wheelchair for your visit to the zoo. Where would you go to do that?
Correct choice
Home > Visit > Park rentals
Task two
Imagine you are looking for volunteer opportunities at the zoo. Where would you go to find them?
Correct choice
Home > Support us > Volunteer
Task three
Imagine you want to have an up-close encounter with a llama. Where would you go to do that?
Correct choice
Home > Things to do > Experiences
Task four
Imagine you want to send your kid to summer camp at the zoo. Where would you find information about that?
Correct choice
Home > Things to do > Safari camps
Task five
Imagine you want to cancel your membership. Where would you go to do that?
Correct choice
Home > Membership > Membership 101
The outcome of the test was an average success score of 72% with a median time of completion at two minutes and 25 seconds.
What surprised me most about the outcomes of the tree tests was the task four results. I did not expect it to have a higher direct failure rate than direct success rate, however, the most common path participants followed, Education > Scout programs and campouts, makes sense with the context.
DESIGN
Design systems pattern audit
Examined the Zoo’s website and collected images of the following components and their variants: accordion, button, checkbox, dropdown, text inputs, link, modal, pagination, radio button, search, form, filtering, cards, table, and image gallery.
The design systems pattern audit was useful in seeing which parts of the website’s design system are currently consistent and which are not. Through completing this audit, I noticed that there are many inconsistencies within most of the components, elements, and patterns in the Denver Zoo’s design system.
The image to the right shows the inconsistencies within the card element and its variants.
Annotated low fidelity wireframes
Created low-fidelity wireframes with annotations of my proposed desktop designs. I drew wireframes for all pages related to the ‘home’ page, the purchase of a ‘general admissions’ ticket flow, and the ‘animals’ page. For the ‘animals’ page, I knew I wanted to make it more interactive, so I decided to create a game mode’. This would allow the user to guess the animal based on given information, and then they could view the animal. For the ticket flow, I combined some of the pages from the original flow as well as got rid of some. For the home page, I condensed the page and simplified it to only provide the necessary information.
High fidelity interactive prototype
Applying all methodologies listed above, I finally delivered my official website redesign through a high-fidelity prototype made in Figma.
The redesign of the ‘home’ page
The redesign of the purchase of a ‘general admission’ ticket flow
The redesign of the ‘animals’ page
Prototype’s core parts
I used the Denver Zoo’s design system to build the wireframes, consisting of both default and filled-in states.
Below are the wireframes from the prototype.
Professional feedback
High fidelity wireframe feedback and changes
The feedback I received on the ‘home’ page was to stay consistent with rounded corner styling, make the card headers a lighter color, shorten some of the text on the cards, use different photos for each card, and fix accessibility issues with the colors used. Based on this feedback, I made all the suggested changes.
The feedback I received on the ‘animals’ page was to make the ‘game mode’ option into a toggle with labels for ‘on’ and ‘off,’ make the ‘on’ and ‘off’ labels the same font weight as the search bar text, and to only bold the headings of the cards so there’s more distinction between them and the text. Based on this feedback, I made all the suggested changes.
The feedback I received on the ticket flow was that once the user selects the type of ticket they want, the rest of the options should disappear, to remove the ‘+’ and ‘-’ option from the ticket quantity adjuster altogether, remove the unavailable times rather than greying them out, delete the labels for the text-entry fields once the wireframe is in its filled-in state, move the checkout screen (where the user verifies their order) to after the user enters their payment method within the flow, and make the progress bar smaller so that it doesn’t take up the entire width of the page. Based on this feedback, I made all the suggested design changes above.
Low fidelity wireframe feedback and changes
The feedback I received on the ‘home’ page was that I should explore different design patterns for the two main sections so they are not repetitive. Based on this feedback, I added a colored background to the second section and laid the times of the upcoming events over the top of the image.
For the ‘animals’ page, I received feedback that I should consider adding a search or filter functionality andallow the usern to turn the ‘game mode’ on and off. I added a search function and provided the user an on and off toggle for ‘game mode’.
Ticket flow feedback suggested exploring alternative patterns for entering ticket quantities, avoiding a time-consuming process for larger quantities, and replacing the overwhelming dropdown with a different method to display available times. Adding a way to identify unavailable dates and times, as well as streamlining the 'add ons' and 'donations' pages. In response, I implemented a way for users to type their ticket quantity in, replaced the dropdown with buttons representing each available time, and visually indicated unavailable dates and times by graying them out. Additionally, I merged the 'add ons' and 'donations' pages with the ‘your order’ page.
EVAL & KEY RESULTS
User testing process and pain points
I met with three participants between the ages of 18-65 who visited the zoo at least once and conducted user tests with them. Taking detailed notes of my feedback, I asked them to view the ‘home’ and ‘animals’ pages and go through the ticket flow.
The default version of the ‘animals’ page set as the game mode is extremely confusing to start on
The ‘admissions tickets’ page includes more than just ticket options (such as donation options, food packages, and memberships), which was very confusing
The descriptions of the tickets needed to be shorter on the ‘admissions tickets’ page
The ‘confirmation’ page doesn’t include an email confirmation message
Key pain points
Based on the identified pain points, the proposed feedback would be to alter the flow to start on the list view of the animal’s page rather than the game mode. I will also delete some options under the ‘admissions tickets’ screen that are not ticket options. I will add email confirmation to the ‘confirmation’ screen at the end of the ticket flow. To shorten the ticket process, I would potentially combine the ‘contact information’ screen with the ‘sign-in’ screen to give the user the option to input their information or click the sign-in button to take them to a page to sign-in. I may also combine the ‘date and time’ screen with the ‘admissions tickets’ screen.