Redesigning the Guggenheim’s Navigation System

Running around in circles…

Jennifer Shin
jenshin-uxdi
10 min readMar 30, 2020

--

In our existing society, before actually experiencing something, whether it’s a movie or restaurant, we rely on the Internet to give us a little more detail about what we should expect or to verify information. To that end, the information should be quick and easy to find, right?

Unfortunately for the Guggenheim, their website design currently, specifically the navigation, struggles to make information easily and readily available for their visitors. After all, going to the museum’s website is the first interaction and experience a prospective visitor will have before even stepping into the building.

My Role: UX Researcher/Designer | Duration: 1.5 Weeks

Scope of Work

For our third project, we were tasked with redesigning the Guggenheim website’s information architecture, specifically the navigation system. We used tree testing, card sorting, competitive and comparative analyses, heuristic evaluations, sitemaps, and user flows to inform our final designs.

The research portion of the project was done in groups while the navigation redesign was done solo.

The Opportunity

To identify major issues on the Guggenheim’s website that would hinder users from having a seamless experience that exemplifies its mission and identity.

The experience that the Guggenheim wants to give its users is supported by things like donations, fundraising, memberships, and visitor revenue, so being able to improve the overall experience to appease the different beneficiaries of the museum is crucial to help the Guggenheim propel their mission forward.

Goal of Research and Methodology

Before we dove into the redesign, my team and I conducted some preliminary research on the Guggenheim as a business by filling out a Mission Model Canvas. We chose to use the Mission Model Canvas instead of the Business Model Canvas because we believed that the Guggenheim’s purpose was to fulfill a mission, versus making a revenue. After all, the institution is a non-profit organization.

Mission Model Canvas for the Guggenheim

Meet Florence

From there, we were given our persona, Florence, who is an embodiment of our target audience, the typical Guggenheim Museum-goer.

She’s a busy art student who likes to visit different museums and galleries in NYC. While she wants to explore new cultures and ideas through art, she’s frustrated because she can’t seem to find the time to attend the events she wants to go to and is not aware of upcoming exhibitions.

Revised Problem Statement

With Florence in mind, our problem statement read as follows:

Museum websites can contain confusing and unclear jargon that make it difficult for users to quickly find what they are looking for.

As a result, Florence isn’t able to successfully source the information she needs to fit events she wants to go to into her busy schedule.

How might we help her identify the details that she needs more efficiently so she can focus on the tasks in her busy schedule?

The Competitive Landscape

In order to grasp a holistic, visual view of the competition, we conducted two different methods of research: a competitive matrix and a feature analysis.

Competitive matrix for the Guggenheim and its museum competitors

For the competitive matrix, we arranged each museum based on how generalized or specialized their collections are and by how visually stimulating or conservative their websites are.

While the Guggenheim’s website had some sleek, modern elements, we ultimately found that the Guggenheim’s website is significantly more conservative than its modern art competitors, such as the Whitney and the MoMA. Across the board, the websites were pretty similar to each other, with the ones who leaned more “expressive” had some fun surprise and delight elements for their website visitors, like the LACMA, whose page contains a “light switch” by the footer that allows users to toggle between light and dark mode.

To see what the Guggenheim does or doesn’t do compared to its direct competitors and comparators, we also conducted a feature analysis to get a better understanding of the similarities and differences.

How the Guggenheim fares against its competitors and comparators

For our competitors, we chose modern art museums that offered a similar experience to the Guggenheim, and for our comparators, we chose institutions that offered similar types of information to the Guggenheim that either weren’t modern art-focused (Bronx Zoo) or museum-specific websites (Hi-Fructose).

Our main assumption through this process was that Guggenheim website visitors would have a difficult time navigating the website and accomplishing their goals not just because of a lack of information, but because of the (dis)organization of the information. One of the main insights we pulled from the feature analysis was that the Guggenheim’s competitors and comparators often broke up important information into different pages so their visitors were not overwhelmed.

Heuristic Evaluation

In order to granularly analyze design elements of the Guggenheim’s website, we employed Abby’s 10 Heuristics, which tests a website on 10 principles: findable, accessible, clear, communicative, usable, credibility, controllable, valuable, learnable, and delightful. With each principle, we gave a score ranging from 0–3, with 0 indicating a major problem and 3 indicating that it followed best practices.

After analyzing the Guggenheim’s home page, “Plan Your Visit” page, “Exhibitions” page, and “Membership” page using Abby’s Heuristics, we uncovered that the main issues were accessibility, controllability, and delightfulness, specifically that the font sizes in some areas were hard to read with unclear delineations between headlines, minimal context as to where users were on a page, and that the website was just your average webpage with nothing truly delightful for a visitor.

Some other issues we uncovered were that the home page is indistinguishable from the other pages; many times, we were double-checking to make sure we were on the home page. Additionally, the search function of the website could benefit from providing more fine-grained results.

The Navigation Redesign and Testing

We went from this…

OG Guggenheim website

To this!

That new-new Guggenheim website navigation

Here’s my proposed navigation system for the Guggenheim’s website. As you can see, I brought the hovering sidebar navigation to the top as a simple, easy-to-view top bar navigation. I also renamed and adjusted some of the labels to make their clearer to visitors coming to the page.

How’d we get to this point? Testing, testing, and more testing.

Existing Sitemap & User Flow

To gain a better understanding of how the Guggenheim’s website is organized, we created a sitemap, which lays out the relationships between each page and the contents within them.

Existing sitemap

While the existing sitemaps seems straightforward, the labels within the navigation were confusing. Through testing, we found that many users were frustrated because they weren’t able to clearly define certain menu items or identify what they were entirely.

Existing User Flow

With that, we also created a user flow for someone looking to join the Guggenheim as a member. As you can see above, there are so many different paths for that one task, even when a visitor’s not actively seeking out the most direct path. So many different elements of the Guggenheim’s website eventually lead to the “Become a Member” CTA, which ultimately drives to the “Membership” page that gives visitors more information about the different tiers of memberships.

Through testing, I created this proposed sitemap with changes indicated in the darker teal.

Proposed sitemap!
  1. Exhibition information previously under “Visit” and “Art” making it confusing for users to navigate. Added in a separate “Exhibitions” navigation element to clearly delineate where users can find information about any exhibits.
  2. Previously “About the Collection” under “About.” Renamed to “Permanent Collection” for more clarity. Also nested under “Art,” as many users associated the word “collection” with some form of art.
  3. Previously “Research,” renamed to “Resources & Research” to include “Audio,” “Video,” and “Blogs,” as these were elements users most closely associated with resources. They were previously under their own section called “Engage,” which was unclear to many users.
  4. Previously under “Art.” Shifted “Publications” to “Resources & Research,” as the label indicates it is a resource to complement the artwork. The page contains information about books and catalogues published by the Guggenheim Museum’s Publishing Department.
  5. See 3.
  6. Previously under “Visit.” Shifted to “About” as many users saw this as an information link out. Through card sorting, a majority of users categorized this under the “About” label.

Tree Testing

In order to pinpoint the areas of improvement, we conducted two rounds of tree testing to understand how our target audience would navigate the Guggenheim website as it stands as well as to test if my new navigation layout improved users’ understanding of the information on the page.

Task 1: You go to the Guggenheim frequently and would like to go with your friends and family. However, tickets are expensive so you want to join the museum to enjoy the perks and benefits.

By joining the membership options in the “Join & Give” section of the navigation, users were able to successfully find the “Membership” page under the nagivation. Many users also noted that “Join” was a clear indicator of where they would find information about membership options. This task saw a success rate increase from 19% to 86%.

Task 2: You have friends coming into town, and you want to see which exhibits will be on display during their stay. Check out which exhibitions are coming up.

From the jump, this task was seemingly relatively straightforward, but in the initial test, we saw that some users still failed the task. However, with a clearer delineation of an explicit “Exhibitions” navigational item, I was able to increase the success rate from 75% to 95%.

Task 3: You get out of work late and want to meet up with friends after a busy week. Find the next after hours event on Friday.

Even after rearranging elements, users still struggled with this task, although we did a 6% improvement from the initial test. Users indicated that they would normal look for a calendar of events that’s typically nested under the “Visit” section of a website.

Open Card Sort: Existing Navigation

An open card sort helped us to understand how users used their mental models to interpret the existing navigation with the absence of explicit labels. This let us see how different users categorized the information that is currently laid out and to see where we could either expand or consolidate elements in the navigation.

We saw consistent groups emerge from our rsearch, as most users grouped the “Visit” and “About” options in buckets that represented general information.

As expected, many users grouped “Audio” and Video” into buckets that represented resources. The existing “Engage” category intends to give users opportunities to connect with the museum, and we believe that users saw other cards such as “Performance” and “Education” as opportunities to actively connect rather than being a research activity.

Closed Card Sort: Existing and Proposed

We also conducted open card sorts to see if users had the same idea of where navigation items would be nested under. With a closed card sort, we provided users with the categories in which they needed to sort the elements.

Compared to the existing navigation test results, the rate in which users categorized cards within their intended groups was significantly higher. Additionally, the modified labels, indicated above in yellow, helped users more clearly define what belonged in each category.

From the existing navigation to the proposed navigation, I saw an 18% increase in users sorting the card items into their proper categories, a win!

Proposed Navigation Changes

Clickable Figma prototype here.

Some of the changes I implemented can be viewed below, as well as through the clickable Figma prototype so you can experience the changes for yourself.

Here, under the “Calendar” item, I added in the option to actually select a date to view events from that particular day. Additionally, if a visitor just wants the holistic view, they can click the “View All Events” CTA, which will bring them to the full calendar page.

By bringing “Exhibitions” into its own tab for visibility, users were more aptly able to navigate to the exhibition pages instead of going around in circles to find where it could be.

Looking Ahead

Some users indicated that they would like to have seen a separate “Events” call out to more clearly show that they could view events, instead of having a “Calendar” label, so I’d like to explore expanding that menu item to read “Calendar of Events” or even as its own “Events” tab.

I’d also go back and apply the rest of the recommendations of our heuristic evaluation across the entire website to ensure that these principles are being met to guarantee the best experience possible for website visitors. And after that…

Usability testing! Using the updated navigation, I’d love to spend some time with users to understand their thought process of going through the redesign to either affirm our changes or to glean further insights to iterate and improve on the design.

--

--