Denver Zoo Revamp

Revamping an online platform that enables users to book and plan their visit to the Denver Zoo.

The problem

Evaluating the current state of the platform to identify usability issues and areas of improvement. Conduct user research to redesign the ticket purchasing flow, home page and the membership page to optimise the user experience.

My role: User experience design and research

Tools used: Figma, spreadsheet, uxmetrics.com

Time line: February 2023 to April 2023

The design process

UX Research

Design

User Testing

User experience evaluation

Conducted a UX evaluation of the Denver Zoo's website through a detailed website tear-down identifying inconsistencies, opportunities of improvement in the website in the following:

Usability: Evaluating the navigation, task orientation, feedback & error tolerance, accessibility & technical design, forms & data entry(components) in various sections of the website.

Discoverability: Evaluating the search feature and it’s results, how easy is it to find relevant content.
Visual Design: Evaluate the content, elements of the style guide, imagery & iconography, evaluating the on screen components, animations & interactions and brand association.
Content: The content is meaningful in terms of placement, relevance and usage for the target audience, and helps build trust and credibility.

Key takeaways

Improve the information architecture through proper categorisation and avoiding repetition of menu items.
Enhance a improving t color contrast.
Optimize menubar navigation for mobile view and make it sticky for web view.
For form elements(input fields), make clear distinction between required and optional fields.
Optimise search functionality by showing number of results, enabling auto-suggestion, proper feedback when no relevant results are found.

Optimizing the information architecture

The website had more than 8 tabs with some of the menu items repeating and with confusing titles leading to information cognition.

Revamped the Information Architecture to improve the navigation and discoverability

Research method

Card sort

Conducted a closed card sort with 19 participants with eight categories and cards representing all the pages of the website to understand how users group the website’s content.

The site map

Created a site map based on the card sort results that related most closely with the the participants catergorization. The navigation menu now had only 8 tabs with less than 10 options in each and a separate zoo tales section optimising the navigation.

Research method

Tree test

Based on the updated site map, a tree test was conducted to verify if the updated navigation menu was optimised as per user needs. The users were given 5 tasks to determine whether the updated navigation menu worked better and how it can be improved.

Result

Users had the highest success rate for discoverability of most pages with simple titles like membership, volunteer but had low success rate with menu items with long & complicated titles such as “up-close encounters”.

Design

The design stage of a website revamp involved several key steps to ensure an effective and visually appealing end product that improved the navigation, discoverability and engagement. Each stage in this process involved proper feedback and iteration to ensure that the designs were user centered.

Design systems pattern audit

Conducted an audit of the current website to identify inconsistencies in the existing design system and to determine the range of components to be included in the revamp. Based on which a new design system consistent with the branding was created.

Annotated low fidelity wireframes

After getting a basic feel for how this website should look, some quick scribbles were made. This was followed by making sample wireframes that would allow me to outline the structure and layout of the website. These wireframes were iterated upon to optimize the user experience incorporating all the learnings from UX evaluation and research.

High fidelity interactive prototype

Created high-fidelity mockups and an interactive prototype to provide a more realistic representation of the final website design. They include detailed visuals, accurate typography, color schemes, and graphics that closely resemble the actual user interface for the Home page, General admission user flow and membership page.

The first iteration of the high fidelity mockups were updated based on instructor feedback to incorporate the following changes in the final design iteration:

Updated the mock-ups to reduce repetitive content and unnecessary user inputs to avoid making the user feel overwhelmed.
Reduced clutter from the website by further simplifying the elements per section .
Revamped components that didn’t fit within the grid system to maintain uniformity throughout the website.

User testing and discovering pain points

The high fidelity prototype was used for design validation to run user testing to identify usability issues and incorporate feedback into the final iteration of the design. Usability testing with previous visitors of Denver zoo was conducted to discover pain points through a series of tasks in an moderated interview.

Assesment of the home page

Overall the users could find relevant information and sections to plan their visit to the zoo.

Pain points

Users found the titles of the daily scheduled tasks confusing
The search bar was awkwardly placed

Possible solution

Give a general overview of the daily schedule, what can visitors expect to learn from the talks, by making the titles more clear/ better worded.
The search bar can be collapsed and placed with the components on the right.

Assesment of the membership page

Pain points

Users found the titles of the daily scheduled tasks confusing
The search bar was awkwardly placed

Possible solution

Give a general overview of the daily schedule, what can visitors expect to learn from the talks, by making the titles more clear/ better worded.
The search bar can be collapsed and placed with the components on the right.

Evaluating the general admission flow

Pain pont #1

Solution: Add an overview in the cards about in the Community and corporate admissions

Pain point: Users need clarity of community and corporate tickets section

Pain pont #2

Pain point: Some user feel that the login button may take them out of the flow

Solution: Rename the button “login to continue” or caption under the button

Pain pont #3

Pain point: User are unable to see the cart total at add on stage and during the flow before payment section

Solution: Introduce cart button to check the cart or add cart total above the every section in the flow(expandable).

Pain pont #4

Pain point: The payment page looks content heavy, making the user overwhelmed.

Solution: Expandable accordions with cart on top and contact info, followed by card details and checking if billing info is different from contact info only then asks the user to add details.

Future plans

Work on all the issues highlighted during user testing and run another round of user testing to check if the new designs works better.
Optimise the UI for mobile devices so that it’s responsive across all major devices.

Key takeaways

User testing is essential at all stages of the design iteration to understand user pain points and analysing the success of design solution.
Keeping the language simple and relatable is best practice.
Too many number of user inputs can cause the user to get overwhelmed, it’s better to simplify tasks.

Ishita Dey

Denver Zoo Revamp

The problem

The design process

User experience evaluation

Key takeaways

Optimizing the information architecture

Revamped the Information Architecture to improve the navigation and discoverability

Card sort

The site map

Tree test

Result

Design

Design systems pattern audit

Annotated low fidelity wireframes

High fidelity interactive prototype

The first iteration of the high fidelity mockups were updated based on instructor feedback to incorporate the following changes in the final design iteration:

User testing and discovering pain points

Assesment of the home page

Pain points

Possible solution

Assesment of the membership page

Pain points

Possible solution

Evaluating the general admission flow

Pain pont #1

Pain pont #2

Pain pont #3

Pain pont #4

Future plans

Key takeaways

Interested in hiring me? Drop me a line