Getty's What's On Section

After our team gathered the user, business, and technical requirements, I conducted a competitive analysis of 19 prominent art institutions to see how they were handling their events and exhibitions pages. While there were a wide range of approaches for displaying this information, it was clear that we could take a modular approach featuring three key pieces: a promotion section, a sort/filter component, and a calendar.

The analysis also highlighted some unique issues that we had to account for at the Getty, such as managing a high volume of tours with unique scheduling patterns, infrequent events, and two distinct locations (i.e, the Getty Center and the Getty Villa). Multiple questions also arose around event formatting, including tagging conventions (i.e., single or multiple categories), the level of detail to include (i.e., description versus basic information), and whether or not tours and events should be grouped together.

With the help of our PM and key stakeholders, three main audience categories were identified for this project: General Audience, Scholars, and Journalists. We started creating user scenarios for these groups and realized that there were unique personas within the larger General Audience group:

We built out journey maps for these scenarios, identifying their key goals, struggles, and tasks, which helped us build out user flows and determine which pages we actually needed. It also confirmed that providing different entry points for engaging with the content would allow our diverse user groups to most efficiently find what they needed.

To kick off the design process, I created low-fidelity wireframes for the “What’s On” highlights page, which was to serve as the central hub for visitors planning their Getty visit. Initially, stakeholders envisioned integrating the calendar with search functionality alongside a comprehensive list of exhibitions and events on the “What’s On” page. However, through early testing and analysis of museum websites, we recognized that this approach was overly complex. We determined that separating highlights from the calendar would better cater to users' diverse needs, opting for a more streamlined and user-friendly interface.

Following multiple rounds of card sorting aimed at understanding users' mental models around exhibitions and events, it became evident that exhibitions were the primary expectation for users within the "What's On" section of the site. This insight guided our strategy to establish a dedicated page for exhibitions, alongside their inclusion in the broader calendar view. This would give users various points of entry to engage with our content according to their preferences, whether they wanted to focus on exhibitions, events, or see what was being promoted by the museum at any given time.

I also explored different layouts for the contents of the calendar page that surfaced business decisions our team needed to make – did we want all items stacked in a list form or arranged in a grid? How much information within the cards should we show at this level? Should all items be combined or sectioned into “Exhibitions,” “Events,” and “Tours”?

Another pivotal decision centered around whether to default the calendar display to only show today's events or to include future ones as well. While showcasing today's events exclusively would cater to users planning their visit on the same day, we opted to display all items by default to ensure events were prominently featured and not overshadowed by exhibitions and tours.

It was also at this point in the process that we decided to incorporate price information into the cards on the calendar page, a departure from our past practices but a request that consistently emerged in testing sessions. I designed a ticket icon to help distinguish the price from the rest of the event information and opted for a straightforward approach for the messaging at the calendar level, displaying only the cost or "Free" for simplicity and clarity.

Ongoing tours posed another challenge as these had varying schedules for weekdays, Saturdays, and Sundays. The existing approach treated each of the three schedules as its own event, resulting in excessive duplication across the calendar. Our solution was to create a unified page for each tour type, consolidating all schedule variations while using the generic “Daily” label on the calendar page. This not only simplified the user experience but also reduced technical complexities for our development team.

We knew that in addition to redesigning the individual pages, refining the navigation menu for the “What’s On” category was necessary to help users find what they need more efficiently.

Analyzing data from Google Analytics revealed that future and past exhibition pages were accessed significantly less compared to "Current Exhibitions." Consequently, we opted to streamline navigation by consolidating access through the primary navigation. Our solution involved featuring a singular "Exhibitions" link, which defaults to displaying current exhibitions while offering secondary links for accessing future and past exhibitions. This approach simplified navigation, ensuring users could easily access relevant content precisely when they needed it.

There were two other small changes we made to the navigation during our audit. We noticed that the term “Calendar of Events” failed to encapsulate the diverse range of items showcased within the calendar, including events, exhibitions, and tours. We had also been providing direct access from the primary navigation to “Online Events,” which was essentially a pre-filtered view of the calendar page. Discussions with stakeholders, however, revealed that this feature was introduced during the Covid era and no longer warranted such prominent placement in the navigation now that the museum had reopened. With these two insights, we simplified “Calendar of Events” to “Calendar” and removed “Online Events” from the primary nav entirely.

As a result of the usability testing we conducted, we refined our existing sort and filter component to improve its usability. We streamlined the component by removing accordion functionality and sorting options, and we displayed the number of selected filters in the dropdown category upon selection to provide users with immediate feedback. To improve clarity, we replaced checkboxes with chips to better distinguish their functionality and align with typical filter patterns.

Even prior to testing, we knew that one of the major challenges we had to contend with on these pages was how to balance the prominence of both Getty locations – the Getty Center and the Getty Villa. Usability testing only reaffirmed this concern, so we decided to try a version of the component where we replaced the location selection dropdown with fixed, "show only" checkboxes positioned below the row of dropdown menus.

To assess the effectiveness of these changes, we conducted a preference test comparing the original component with four dropdown menus to the version with checkboxes.

Since we wanted participants to run through some use cases using a single design before deciding on which version they preferred, we employed an A/B testing model for the preference test. Half of the participants assessed version A first and then compared both designs side by side, while the other half evaluated version B before making their comparison. This approach aimed to mitigate potential biases in the testing process.

After handing off the designs to development and presenting to stakeholders, a few use cases emerged that we hadn’t considered and needed to be addressed.

Date picker
There was a preexisting calendar component within our design library but the interaction behaviors hadn’t been defined yet. Following research on standard UX practices for calendar pickers (including those of Airbnb, Kayak, and Ticketmaster), I designed an interaction enabling users to effortlessly select either a single date or a range of dates, providing instantaneous feedback on their choices.

Image modal
After reviewing our final designs with a museum stakeholder group, we identified an unaddressed requirement for the Exhibition Detail page: the ability for users to view selected exhibition works in full-screen. This necessitated the creation of a new component, as this functionality was missing from our design library.

I decided to create a variant of our existing carousel component, but the challenge was to make sure users understood that clicking on an image would expand it (versus take them to a new page). I added two affordances to achieve this: I incorporated a full-screen icon into the bottom right corner of each image and I collaborated with our dev team to change the cursor hover state over images from the traditional pointer finger to a zoom-in magnifying glass. I also included a counter at the bottom of the screen to set expectations with users on the length of the slideshow.

For the image modal screen, I opted to reduce the background opacity to 85% to maintain context with the original page while distinguishing the modal from our dedicated full-screen image viewer, which supports zooming. To optimize the viewing experience, I positioned the artist name, artwork title, and a link to the object page next to the image, which accommodates varying text lengths and maximizes the image size within the viewport.

The final designs that we handed off to our dev team consisted of five unique page templates for both desktop and mobile.

Less is more
Although my design process has always been iterative, we realized early in the project that presenting multiple solutions to stakeholders was counterproductive, as it hindered decision-making in time-constrained meetings. We decided to maintain our iterative process amongst the UX team but streamlined our stakeholder presentations to a single solution that aligned best with user needs. This focused approach facilitated more directed and productive conversations overall.

Establish expectations with stakeholders early on
When the project was first brought to our team, we presumed we were being tasked with a comprehensive redesign, entailing a complete overhaul of the IA and a ground-up reconstruction of the pages. After the first handful of meetings with stakeholders, however, it became apparent that the project was primarily conceived as a reskin, with constraints on the extent of changes permissible from the existing pages. While we were able to push back on this slightly and make UX improvements that we felt were most impactful, it taught us the importance of clarifying early on where a project falls on the redesign/reskin spectrum.

We also learned that when working with such large and diverse stakeholder groups, it was essential to constantly confirm what feedback was mere opinion versus a mandate. Given the impossibility of addressing every comment, particularly when conflicting, we collaborated closely with our project manager to consolidate feedback and determine next steps, ensuring efficient progress amidst varying stakeholder perspectives.