Modern Art Museum Website Design
Olive Patterson
modern art museum
MAM
Modern Art Museum(MAM) is a museum that showcases the latest of the art scene and specializes in Modern and Photographic Styles of art. The typical user is between 18-50 years old, and most users are students, young professionals, and experienced professionals. The MAM Website’s goal is to make visiting the museum easy and exciting, keeping the latest artist showcasings and events a focal point of the museum.
Project Overview
The Product:
Project Duration:
August 2024 to September 2024
Project Overview
The Problem:
The Goal:
Museum websites often have confusing homepages and over complicated navigation user flows, making it difficult for users to view the museum details/events before purchasing museum tickets.
Design a website for the Modern Art Museum that allows users to browse the museum’s current and upcoming exhibits, and to buy tickets with ease.
Project Overview
My Role:
My Responsibilities
UX Designer leading the Modern Art Museum’s design.
Conducting interviews, peper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for usability studies, iterating on designs and responsive design.
Understanding the User
modern art museum
MAM
User Research: Summary
I heavily compiled secondary research and then turned it into empathy maps to better understand the users and their user journeys. I discovered that many users want to visit this type of museum as a night out with friends or on their own time as a break from a busy day at work. However, many museum websites are cluttered with information and hard to navigate, especially when trying to figure out the museum’s events and how busy the museum might be. This caused users to either forego using the website at all, and instead taking their chances and buying tickets at the museum; not knowing what they might run into once they get there.
User Research: Pain Points
1
Dislikes
Overcrowding
3
Hours of
Operation
2
Avoiding
Queuing
4
Booking
Tickets
User feels bothered by overcrowding, and feels that their experience at the museum is limited when there are too many people.
User wants to avoid waiting in line at a museum due to max capacity being reached. When this happens, they often leave, or postpone their visit.
User feels like museum’s operations are not always clear, and feel like they have to do extra searching to find a time to go.
User prefers to book museum tickets online using the website- and they usually access the website through their smartphone.
Persona: Rayne
Problem Statement:
Rayne is a 28 year old office manager from New York City who needs to access museum hours when it is less busy because she wants to take her mind off of work and enjoy a less crowded visit.
User
Journey Map
I created a User Journey map of Rayne’s experience using the site to help identify possible pain points and improvement opportunities.
Persona: Rayne Pearson
Goal: Enjoy an extended lunch break at the museum.
Starting the Design
modern art museum
MAM
Sitemap
Overcrowding and Avoiding queueing were the two main pain points for users, so I used that knowledge to create a sitemap.
My goal was to make hierarchical information architecture that would allow for a concise user experience.
Paper Wireframes
Next, I sketched out paper wireframes for each screen of my website keeping the user pain points in my mind.
The home screen paper wireframe variations to the right focus on optimizing a simplistic view of information the user might want to access.
Stars mark the parts of wireframes that contribute to the final wireframe.
Paper Wireframes
Because some users wanted to access the site on both a computer or their phone, I included paper wireframes for different screen sizes.
Screen Size Variations
Digital Wireframes
Moving from paper to digital wireframes helped solidify how to best address user pain points.
Making the navigation simple and constantly stickered to the top of the page was a priority for my design strategy.
Digital Wireframes: Screen Size Variations
Low Fidelity Prototype
This Low-Fidelity prototype focuses on a users flow of purchasing tickets to a museum event.
Usability Study: Parameters
Study Type:
Moderated usability study
Participants:
5 Participants
Length:
15-25 Minutes
Location:
United States; Remote
Usability Studies: Findings
1
Buy Tickets
3
Back to Home
2
Missing Confirmation
Users were confused by the multiple “Buy Tickets” button, and the confusion inhibited their user flow.
These were the main findings uncovered by the usability study:
Users felt rushed and annoyed that there was no confirmation before officially purchasing their ticket.
On the confirmation page, users wanted the option to return back to the homepage afterwards.
Refining the Design
modern art museum
MAM
Based on the insights from the usability study, I made changes to improve the site’s ticket purchase flow. One of the changes I made was cleaning up the menu and taking away the extra “Buy Tickets” option. This allowed a more direct flow for users to buy tickets using the button attached to the event details page iself.
Mockups
Before usability study
After usability study
Mockups
I also minimized the complete checkout page, and added a few things to help the user be sure they purchased their tickets correctly. I added a check mark icon, which is a common indicator for users to know the flow has been completed. I also added an option to browse the events page after purchasing, allowing the user the option to enjoy browsing the site some more.
Before usability study
After usability study
Mockups: Original Screen Size
Mockups: Screen Size Variations
I included considerations for additional screen sizes in my mockups. Because users browse museum events and purchase tickets from their phones often, I felt it was important to optimize the browsing experience.
High Fidelity Prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by other team members.
View the MAM’s Hi-Fi Prototype
Accessibility Considerations
1
3
2
I used headings with different sized text for clear visual hierarchy
I used easy to read fonts, allowing the sites information to be easily understood by any user.
I used high color contrast between text and the backdrop to aide visually impaired users, particularly those who are color blind.
Going Forward
modern art museum
MAM
Takeaways
Impact:
What I learned:
Our target users shared that the design was intuitive to navigate through, more engaging with the museum event images, and demonstrated a clear visual hierarchy that led them to enjoy the website and its’ user flow.
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
Next Steps
1
3
2
Conduct follow-up usability testing on the new website
Identify any additional areas of need and ideate on new features
Research on the future of museums and how any technological changes might affect target users experience with their websites.
Let’s Connect!
Thank you for reviewing my work on the Modern Art Museum’s website!
If you’d like to see more, or would like to get in touch, my contact information is provided below:
Email: olliecreativework@gmail.com
Website: olivepattersonwork.myportfolio.com