Art museums in the United States of America welcome approximately 58 million visitors yearly, according to the National Endowment of the Arts (NEA). The Museum of Contemporary Hispanic Art (MOCHA), a fictious art museum, was looking to open its doors not only to its local community of Madison, Wisconsin, but also to the World Wide Web.

Through exploring the goals and problems faced by art museum visitors via a series of interviews and reiterative usability tests, I designed a desktop website for MOCHA. This website uniquely allows for deep exploration into the museum’s art collection that seamlessly integrates with a museum map to find the artworks of interest in the real world. Additionally, this website considers that visiting an art museum is often one stop during a trip out on the town and thus helps to provide nearby suggestions to continue the fun. Finally, the website also incorporates standard expectations that a museum visitor may have, such as details on events at the museum, visitor information, and background on the museum itself.

Check Out the Final Design Here➡️

…or continue reading to learn more about the entire design process.

🧡 Empathize with Users

User Interviews

To begin the design process, I wanted to get a better understanding of the breadth of expectations and pain points art museum visitors have. To help accomplish this, I created interview questions with the following goals in mind:

1. I want to understand roadblocks a visitor experiences when trying to plan a visit to a public art museum.
2. I want to identify reasons why a user is prompted to visit an art museum and what reasons deter them from visiting an art museum.
3. I want to understand the expectations museum goers have from their art museum visit.
4. I want to identify what factors impact a visitor’s perception of a visit to the art museum.

I then conducted a convenience sample to recruit 3 participants for user interviews, while still ensuring that this sample had varied backgrounds.

Personas

After conducting this initial set of interviews, I created personas for each of my interviewees under fake but representative names and photos to capture their goals and frustrations when visiting art museums.

User Journey Maps

With these personas in mind, I created user journey maps for each participant to put myself in their shoes while they try to achieve a goal of theirs when visiting an art museum. This also aided in coming up with potential improvement opportunities.

In summary, my key findings were:

• Joe Jankovic is a 53-year-old retired officer and disabled veteran who has already frequented many art museums in his lifetime. Given this, he wants to be able to identify unique artworks he has not yet seen before. Additionally, he and his friend group are fairly socially competitive. Therefore, he’d also like to identify the most famous artworks at the museum so he’ll be able to impress his friends. Finally, as someone with mobility issues, he is often on the lookout for elevators and would like to be able to locate them easily.
• Noah Joseph is a 22-year-old computer science student that visits art museums to de-stress from the demands of school and his elderly parent care-taking responsibilities. He particularly likes learning about why the artist created what they did, as he can empathize with creative work given his own creation-related hobbies. He has struggled navigating art museums in the past, which conflicts with his goal of ensuring that he covers most of the art museum in order to get the most bang for his buck.
• Angela Magno is a 37-year-old produce lead at her local commissary who doesn’t have much interest in art. However, since she lives with her young adult children, she is sometimes requested to join them on their art museum excursions. Thus, her primary motivation when visiting an art museum is how to make her family’s trip as fun as possible and capture those moments. At art museums, she can feel frustrated at having difficulty understanding the art and not knowing where she can get food on the trip.

💡 Ideate Solutions

Competitive Audit

Now equipped with a baseline level of understanding of art museum visitors’ goals and frustrations, I felt largely comfortable tackling solution ideation. However, I still wanted to development my understanding of what is available in the market to help inform me on art museum visitor expectations.

To do this, I conducted a competitive audit of 6 different art museums where I evaluated them all on first impressions, website interaction, visual design, and content.

I found the Madison Museum of Contemporary Art and Art Institue of Chicago to have the strongest websites of the group given their consistent brand identity, intuitive navigation, and extensive content displayed in a non-overwhelming way. In contrast, the Orlando Museum of Art was riddled with UX issues, such as low contrast text, difficult to read fonts, unintuitive carousel interactions, and more.

I used this competitive audit as inspiration during my upcoming menu card sorting and rapid idea iteration practices.

Card Sort

With this deeper understanding of end user expectations of art museum websites, I conducted a card sort to determine how menu navigation would be organized and what content should be included.

I ended up moving forward with the 4th iteration of my card sort after identifying the following concerns with the previous iterations:

First Iteration:

• “What’s New?” may not be easily attributed to events and temporary exhibits. Thus, end users may have difficulty locating that content.

Second Iteration:

• I broke down the main sections into pre-visit, during visit, and post-visit to reduce the number of sections needed and to help visitors during the appropriate time of their visit.
• I decided against this iteration as art museum content is not normally grouped together in this way which could confuse end users who have prior experience with art museum websites. Additionally, the amount of content on each section may be too overwhelming.

Third Iteration:

• I separated out the sections much more granularly so that there were seven navigation options, thinking that end users may more easily identify where to locate their desired content.
• However, the sheer number of sections itself could get a loser lost and make the menu feel cluttered.

Fourth Iteration:

• I moved the map section on its own since this is the section end users would most urgently need (where is the bathroom? how do I see x artwork?)
• I put back events and temporary exhibits together, as I realized I could simply change the name to be “temp exhibits / events” so that end users would clearly know where to find that content, as opposed to “what’s new”.

Crazy 8's

After determining high-level content and navigation, I leaned on the four main themes of art museum visitor goals I previously identified…

1. Museum Navigation (locating real world objects at the museum)
2. Memory Making (having a fun-filled day out)
3. Temporary Exhibit / Events Planning (planning for temporary activities to do at the art museum)
4. Art Insights (determining what art is at the museum and why was it made)

…to begin ideating what screens could look like for MOCHA’s website. I spent 8 minutes to come up with 8 potential designs to solve each theme (32 minutes and 32 designs total) and starred the aspects of the designs that I felt would meet the users’ needs the most.

User Flows

Continuing to lean on the four main themes found in art museum visitors’ goals when visiting an art museum, I worked to create screen by screen user flows for visiting a famous artwork in the museum, finding the description of an artwork, determining the date & time of an event, and determining where to eat post-museum visit.

Wireframes

The best designs for each theme from rapid idea iteration were then cleaned up into paper wireframes to match these user flows.

⚙️ Prototype Solutions

Lo-fi Prototype

After wireframing, I used Figma to create a 16 frame lo-fidelity prototype.

See the key screens for each user flow in MOCHA’s lo-fidelity prototype below.

User Flow 1: Visit a Famous Artwork in the Museum

User Flow 2: Find the Description of an Art Piece.

User Flow 3: Determine when an event is taking place.

User Flow 4: Determine where to eat after your art museum visit.

🧪 Test Solutions

Lo-Fi Usability Test

I then conducted five moderated remote usability tests of MOCHA’s lo-fidelity prototype across the month of November 2023. Performance was measured using time on task, conversion rate, and a system usability scale as Key Performance Indicators (KPIs).

From these tests, my top three main areas of improvement included:

1. End users often had difficulty finding and using the sort and filter buttons on the permanent collection tab.
2. End users sometimes were unable to identify the icons on the map.
3. End users sometimes struggled to know when something would be clickable or not.

Hi-Fi Prototype

In my next iteration, I redid the sort UI so that it ran across most of the screen horizontally to increase visibility. I also opted to switch the filter feature to a search feature, as the breadth of filters that an end user may want to use would result in clunky filter UI, thereby making it difficult to navigate.

Additionally, I rechose an elevator icon based on end user suggestions of what they’d expect an elevator icon to look like. Finally, to help end users understand what is clickable or not, I standardized the buttons so that they were all yellow and had a shadow for emphasis.

See the key screens for each user flow in the first iteration of MOCHA’s high-fidelity prototype below.

User Flow 1: Visit a Famous Artwork in the Museum

User Flow 2: Find the Description of an Art Piece.

User Flow 3: Determine when an event is taking place.

User Flow 4: Determine where to eat after your art museum visit.

Hi-Fi Usability Test

I then conducted a round of usability testing on the hi-fidelity prototype with five new participants.

❌My key areas of improvement were:

1. End users expected more content describing the art museum itself and its background.
2. End users sometimes checked for links to google maps for address related topics that were not there.
3. End users found it confusing to navigate between events and temporary exhibits as they sometimes didn’t notice the content was on the same page.
4. End users still struggled to identify some of the icons on the map :(

✅ Areas that end users particularly liked and/or were successful with:

1. End users found the map and art integration to be very helpful and intuitive. They also noted that they have not seen this feature on other websites before.
2. End users felt largely positive to see nearby food and activities listed on the site. They felt this would be particularly useful for families.
3. End users now found the sort feature to be intuitive and often used this feature to determine if the art museum was worth visiting or not.
4. End users felt that the necessary information to plan a trip to the museum was readily available.

💻 “Final” Design

Final Hi-Fi Prototype

To meet end user’s background content expectations, I added an about tab to the menu that the home page also links out to.

To make navigating to events and temporary events clearer, I separated the two sections into their own menu items.

I also incorporated google maps links where addresses are mentioned to help end users more easily navigate to their desired destination.

Finally, I added words under the icons on the map to eliminate icon confusion. This helps to ensure people can locate essential stops such as bathrooms and elevators during their visit.

See the key screens for each user flow in the second iteration of MOCHA’s high-fidelity prototype below.

User Flow 1: Visit a Famous Artwork in the Museum

User Flow 2: Find the Description of an Art Piece.

User Flow 3: Determine when an event is taking place.

User Flow 4: Determine where to eat after your art museum visit.

At this stage, the website is ready for launch. I would plan to conduct future testing and make further improvements post-launch as the design journey never ends.

Final Design Demo Video

Thanks for listening 😊

Connect on LinkedIn Here ➡️

View my Portfolio Site Here ➡️