Isabella Stewart Gardner Museum Website Redesign

Description

The Isabella Stewart Gardner Museum is a beloved Boston attraction that attracts thousands of visitors each year. However, navigating the museum's website is not easy, due to its unorganized, text-heavy webpages and unresponsive mobile design. These design flaws have resulted in fewer membership sign-ups and online ticket reservations.

Project Challenges

1) Organize museum content in a clear, concise manner to increase the user's ability to navigate the website.

2) Make the website more responsive on a mobile device to increase user accessibility.

3) Create a visual identity that reflects the museum.

Timeline

November 2024

Role

UX/UI Designer
Branding

Responsibilities

Research, wireframing, information architecture, low and high-fidelity prototyping, conducting usability studies, branding and visual design

Identifying the Problems

In order to properly identify roadblocks in the museum website's design, I conducted a heuristic evaluation. I primarily focused on the interface use efficiency, aesthetic design, and component visibility. I also paid attention to key responsive differences between the desktop and mobile versions of the website.

Website Color Scheme

The playful and juvenile rainbow-esque color palette utilized on the museum website deviates from the elegant, sophisticated nature of the museum and its contents.

Asking the Right Questions

Market research suggests that museum visitors primarily access museum websites not only to preview current exhibits, but to access important visiting information like ticket prices and open hours. After evaluating the existing museum website, I used the identified pain points to develop my research questions.

"Can the user easily preview exhibit information on both desktop and mobile devices?"

"Can the user easily navigate the ticket purchasing process?"

"Can the user easily find answers to their questions about the museum?"

After conducting a usability test, qualitative results demonstrated user friction in previewing exhibitions and ticket purchasing. Using the qualitative findings, I created a word cloud to group similar emotional responses to website content. Test participants included both previous visitors of the museum and those who had never visited. The test involved navigating both desktop and mobile website versions and a brief questionnaire.

Mobile Device

Site abandonment upon purchasing tickets after reaching login screen
Inability to or excessive time needed to locate museum hours of operation and ticket prices
Excessive time spent locating information regarding museum policies

Desktop

Exhibition collections ignored
Frustration navigating calendar view when purchasing tickets
Quickly previewing "visit" screen before clicking away
Excessive time spent locating information regarding museum policies

I then developed two user personas to better understand my target users after collecting qualitative data.

Beginning To Redesign

Information Architecture

I created a sitemap based on the original website to break down and better understand its organization. I decided to keep the hierarchical structure as it is effective in navigating between different pages and allows users to quickly explore different museum features at any point.

Wireframing

Keeping in mind the feedback from the usability test, I began wireframing the key problem pages to find solutions to usability issues. I created designs for the homepage, visit page, and ticket page for both desktop and mobile devices.

Addressing Challenges

Organize museum content clearly

Text-heavy pages and uncategorized information led to confusion among users. I visually separated information to create more digestible, aesthetically appealing pages that allow users to locate the information they're seeking more efficiently. I also created more stand-out buttons on the website's navigation screen, such as the visit page, which contains information that target users most frequently search for, such as museum operating hours and ticket prices.

A more responsive website

Images and visuals on the mobile website version are often misaligned. Content hierarchy from desktop to mobile devices is also altered. In my redesign I reestablish the proper hierarchy and assure all visuals are appropriately aligned and in place. I consolidated and realigned footer graphics to prevent unnecessary and excessive scrolling.

A reflective identity

The visual design of the museum website is bold and playful, but that doesn't exactly reflect the elegant, sophisticated, and archival nature of the museum's medieval Roman and Italian Renaissance dominating art collections. Since the museum does offer modern art exhibitions, I designed the website visuals to include both a refined and modern style to better relate to the museum as a whole.

Style Guide

The Isabella Stewart Gardner Museum is famous for its beautiful courtyard in bloom year-round. When creating a color palette, I wanted to highlight the greenery that is often associated with the museum and is among one of the first things visitors see when entering the museum. Combined with a dark maroon to add an elegant, timeless touch, the bright green directs users around the website and towards points of interest. The high contrast visuals emulate the dark halls of the museum that are occasionally lit from filtering sunlight shining in from the courtyard's glass ceiling.

Redesigns

Wrapping things up

My goals when redesigning the Isabella Stewart Gardner Museum website were to improve mobile responsiveness, create a more reflective visual identity, and to better organize pure-text pages. This approach enhances user experience by providing clean, intuitive navigation and ensuring that visitors can easily engage with the content across various devices. The design prioritizes a refined aesthetic that aligns with the museum's legacy while offering a modern, streamlined interface that makes information more accessible and visually appealing. This process results in a more user-centric, efficient, and aesthetically cohesive online presence. Redesigning a pre-existing website improved my ability to identify design flaws before making the same mistakes in my own work.