Brooklyn Museum Website Navigation Redesign

Zhen Quan
UX Case Study
Published in
9 min readMar 30, 2020

--

Located by Prospect Park, Brooklyn Museum is one of the oldest museums in New York City. However unlike MET or MOMA that are far more well-known to tourists, Brooklyn Museum still have it influence at a borough level. The website is a window to let its potential visitor to get informed of its exhibitions, events and history.

In this study, our team discusses various ways to evaluate the existing information hierarchy of the Brooklyn Museum’s website (BMW) and proposed a revised navigation for it based on the research.

Brooklyn Museum and its Competitive Landscape

First we started knowing about Brooklyn Museum by laying out a mission model canvas for it. We learned that BM relies heavily on its foot traffic and donations to achieve its mission to educate the public and provide spaces for communities. They have crucial university and corporate partners and sponsors that they acknowledge on their website, and use those to fund a wealth of knowledge in its artifacts and exhibitions. Its website is used primarily to provide this information to the public, and is therefore invaluable in the process of accomplishing their goal.

Brooklyn Museum Mission Model Canvas

We also need to know who is competing with Brooklyn Museum by configuring the competitive matrix. Brooklyn Museum is fairly in the middle of these four categories. It is not particularly generalized, nor specialized. It has various educational programs that attracts Brooklyn people. However not all of it’s competitors are museums. Prospect Park Zoo and BBG and so close to Brooklyn Museum so that they often compete in visitor traffics.

Competitive Matrix

Then we used these feature analysis charts to get an understanding of some of the features that Brooklyn Museum has compared to its competitors and comparators. The Brooklyn Museum has many of the listed features, however some of them may be hard to find because of poor information architecture. Brooklyn Museum also doesn’t provide an alternate means of engaging with its users during the COVID-19 outbreak. It simply notes that many of the events on the calendar are postponed or cancelled. This is a sign of Brooklyn Museum not taking its online experiences as part of the whole museum experiences, in another word, it seems not prepared to utilize digital tools to broader its influence.

COMPETITIVE Feature Analysis
COMPARATIVE Feature Analysis

Persona

This is our persona, Florence. She represents Brooklyn Museum’s typical visitors who want to use the website to do research about the museum before they plan a visit. Florence is an art lover and tries to get informed of what’s on view at various museums. She was intrigued by an exhibition at the Brooklyn Museum recently. As a busy student facing overwhelming choices in New York City, she wants to know more information about the exhibition, at the meantime to explore other events in Brooklyn Museum.

How might we offer Florence a way to do research on the Brooklyn Museum so that she can go to the exhibition and plan her entire art trip efficiently?

Persona

The Testing on Existing Site Navigation

The scope of testing includes:

  • Tree Study
  • Open Card Sorting
  • Closed Card Sorting
  • Heuristic Evaluation

1) Tree Study

This study is to evaluate whether the existing navigation tree and labels are intuitive enough for someone who is unfamiliar with the Brooklyn Museum website. It strips away any formatting or images that would help guide the user, so that we can focus on the text and navigation alone. We decided to test whether users could find the 1)Egyptian section of the museum, 2)navigate the calendar section, 3)browse the upcoming events.

The result of the testing is not good. Few people completing the tasks successfully indicating BMW is lack of clear labelling or some features are hidden in locations.

Tree Study Success Rate Overview

2) Open Card Sorting

We conducted an open card sort study to get an idea of how the average user expects the information on the BMW to be organized. We will use these groupings to better understand the average user’s mental maps, and have them propel our proposed design decisions for the eventual redesign.

Overall the results showed users can differentiate the art-related units and the service-related units, however some of the units like “Facility Rental” and “Photo & Film Shoots” were grouped in different categories each time indicating that user disagreed on where to group them.

3) Closed Card Sorting

Closed Card sorting allows users to organize the secondary categories, grouping them together under each primary category, based on what makes sense to them. Overall, you can see ratio of what users grouped in the category to what don’t.

“On View” and “Collections” seemed be very confusing to the users, 42% of the secondary navigation options under “On View” were sorted in by users and only 29% under “Collection” were sorted in.

Closed Card Sorting: Sort-in(blue) & Sort-out(yellow) Ratio

4) Heuristic Evaluation

The heuristic evaluation allows us to judge the website on individual, predetermined components, instead of relying on our inherent preferences and biases. We used Abby’s heuristics to evaluate the BMW over four different pages: Homepage, On View, Calendar, and Collections.

Findability is the biggest ongoing issue throughout the Brooklyn Museum’s website. Because “Collections” and “On View” are constantly on display throughout the website, there is an ongoing competition between the two headers, and it is not obviously clear which the user should choose to complete their tasks.

In addition, as we also learned from the tree study, it is very difficult for users to navigate the calendar, as the primary form of navigation (the large calendar display at the top of the webpage) is only designed to scroll a few days at a time. In addition, the only way to navigate the calendar by a specific month is to select “All Events” under “Select a Category”, and the option to browse by month will appear. This is a Major Problem for its findability and usability.

Heuristic Evaluation by Pages

Key Findings and Recommendations

With all the research above in mind, we can draw a summery of key problems we have found so far and give recommendations accordingly.

  1. Overall the website lacks a sense of branding — monochromatic design has a minimalist aesthetics but doesn’t help to show the characteristics of the museum.
  2. The “Calendar” section doesn’t allow users to browse events on multiple dates on one page. “All Events” and “Select a Month” links are hidden under “Select a Category” drop-down menu.
  3. “On View” is a vague word, doesn’t clearly suggest its content.
  4. “Collection” page uses a different navigation system — a mega menu that is not consistent with other pages.
  5. Users thought some secondary navigations could be group under multiple primary navigations.
Findings to Recommendations

Proposed Information Architecture

We created a sitemap to visualize how the navigation on this website is structured. The site map would offer a clear structure of navigation hierarchy and the linkages behind each page.

Existing Navigation Sitemap

Then we created a revised site map to visualize our proposed navigation compared to the current design. Mapping a proposed sitemap could be the basis of the user flow and provide structural support for the ideation stage. We addressed the problematic area by highlighting the changed navigation.

Proposed Navigation Sitemap

The Testing on Proposed Site Navigation

We ran another round of tree study and closed card sorting on the proposed navigation. The stats shows “Exhibition”/“On View”, “Collection” have been improved significantly.

Tree Study on Proposed Navigation
Closed Card Sorting on Proposed Navigation

Annotated Prototype

Home Page

  1. Reconstruct the structure of the primary navigation into 3 sections — purchasing, art and other information
  2. Even though we didn’t get to test out the usability of “Become a Member”, “Buy Tickets”, “Shop” links, but we think having those three together in consistent style will give users impressions and leads to more museum revenues
  3. Change “On View”, “Calendar” to “Exhibitions”, “Events”. According to our tree study, users have difficulties differentiate “On View”, “Calendar” and “Collections” — especially “On View” and “Calendar” doesn’t clearly suggest their contents.
  4. Create a “Service” primary navigation for “Space Rental”, “Film&Photo Shoots”, “Image Service” and “Collection API”. According to our open card sorting that our users have difficulties sorting those cards into any of the current primary navigation.

Exhibitions Page

  1. Add “exhibition” to each of the secondary navigation accordingly.
  2. Combine “Past Exhibition” and “Exhibition Archives” — they are highly similat in contents and technically exhibitions in the past.
  3. Add “Online Exhibition” option because the musuem has a lot of online case studies and could be used as online exhibits.
  4. Change “Touring” to “Traveling Exhibition. According to our open&closed card sorting, users thought it’s the exhibition tour offered by the museum.

Events Page

  1. Show “All Events” at the main page. Currently when users land on the “Calendar” main page they only see the events on today and can’t browse events in a time period on one page, moreover, “All Events” link hides under “Select a category”.
  2. Pull “Select a month” drop down out. In current website, the drop down only pops up when you select “All Events” under “Select a category”

Collections Page

  1. Remove the the mega menu in the hamburger icon, replace it with horizontal navigation to stay consistent with other pages.
  2. Change “Collection” to “Category” to suggest the content.
  3. Change “On View” to “On View by Floors” to suggest the content.
  4. Move the search bar accordingly.

Visit Page & Other Pages

  1. Change the horizontal tertiary navigation to drop-downs in order to better represent the hierarchy.
  2. Intensify the color effect when the cursor hovers on the menu.
  • Changes in other pages follow the rule.

The Hi-Fi Prototype

Please click HERE to interact with the full version of redesigned navigation.

Moving Forward & Closing Summary

At the next stage we will run a usability testing on the proposed navigation and reiterate the prototype based on the testing. Moreover, we want to help Brooklyn Museum explore its potentials at an online level — for example, create a new section for online exhibitions, build an interest group on its featured collection etc,.

In most of the cases, the website is the first part of the museum experience. What the website can do is not just providing information but also give visitors more potential to interact, to acquire knowledge about art, thus creating a complete community. There is more to be discovered and redesigned beyond the website navigation.

--

--