Competitive Analysis
Team 1
Introduction
Our client, Merchant's House Museum is going through a website redesign. As part of the research process, a competitive analysis was made to compare and analyze other museum website user experiences.
By analysing our direct and indirect competitors, we could find well or badly designed similarities among these websites. This study bring us awareness on what to do and not to do during website design.
Research goal
Learn good design methods and design thinking from our competitors.
Find shortage of our competitors and avoid those.
Find the patterns among well designed museum websites.
Rating Matrix
| Mobile Friendliness | Homepage | Navigation Bar | Visual elements | Exhibition Introduction | Visiting Information | Accessibility | Ticket Purchasing |
1 | - No responsive design at all. - Hard to get information visually. - Images are too large to load on phone. - Tabs and navigations works badly. | - Not responsive at all when window size changes. - Layout is very badly distribute. - Very lack of information contained. | - The navigation is a mass, hard to find information. - Have no visual feedback. | - Layout very unbalanced. - Font choice unpleasing. - Use color and images badly. | - Lack of descriptions and introductions. | - Can’t find hours listed. - Can’t find map direction. - Have no accessibility information. | - No choice for different languages. - No help center. | - Massive architecture structure. - Few information provided. - Limited options for ticket purchasing. - Hard to navigate. |
2 | - Somehow responsive. - Directly converted from website design with some changes in font size and picture size. - Tabs and navigations works on phone. | - Somehow responsive. - Layout distributed fine, but still have some lackness. - Contains some information. | - The navigation is okay, still have few problems finding things. - Have some visual feedback. | - Layout somehow balanced and organized. - Font choice is okay. - Use okay color and images. | - Have written descriptions and introductions. | - Have hours listed. - Have map direction. - Have accessibility information. | - Some choices for different languages. - Have question and answer page. | - Okay architecture structure. - Have some information provided. - Some options for ticket purchasing. - Can be navigate. |
3 | - Very responsive. - Designed not just based on the website, but have some specific design that works well on phone platform. - Tabs and navigations works well on phone. | - Very responsive, - Layout distributed really well. - Contains all the important informations. | - The navigation is clear and easy to find information. - Well designed and interactive feedbacks | - Layout balanced and organized. - Font choice is nice visually. - Use excellent color and images. | - Have multimedia descriptions and introductions. | - Clear hours listed. - Clear map direction. - Transportation suggestions. - Clear accessibility information. | - Lots of choices for different languages. - Have both real person and AI help center to answer questions. | - Good architecture structure. - Nice and detailed information provided. - Various options for ticket purchasing. - Easy to navigate. |
Our 4 direct competitors and 4 indirect competitors were chosen among local museums, international museums and experiences according to previous research showed users go to museums on trips.
Results
Museum | Direct/Indirect | Mobile Friendliness | Homepage | Navigation Bar | Visual elements | Exhibition Introduction | Visiting Information | Accessibility | Ticket Purchasing |
Direct | 3 | 2 | 2 | 3 | 3 | 3 | 3 | 3 | |
Direct | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 2 | |
Direct | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | |
Direct | 3 | 2 | 2 | 3 | 3 | 2 | 3 | 1 | |
Indirect | 2 | 2 | 3 | 3 | 2 | 3 | 2 | 3 | |
Indirect | 2 | 3 | 3 | 3 | 2 | 2 | 1 | 3 | |
Indirect | 2 | 2 | 2 | 2 | 2 | 2 | 1 | 3 | |
Indirect | 2 | 2 | 3 | 2 | 1 | 1 | 1 | 2 |
Key Findings
Mobile Friendliness
Is it responsive? Does it work as good on mobile device?
Menu
Is the menu as functional as its website version?
GOOD
Good examples for mobile menu. Readable, actionable and functionable.
Okay
For Metrograph and Montreal Museum, the menu bar is functional, but the text size maybe a little small accessibility wise.
For MAD, the opening time is hard to read in the menu because of the color and font size.
Responsiveness
Does all the texts readable on phone? Whether the pages are changing it’s layout when platform changes.
GOOD
Change the number of columns or change the ways of layout will create nice responsive pages.
Bad
For Montreal Museum, the font size on ticket purchasing page is not changing responsively and this size is too large for mobile device.
Homepage
Is it informative? Is it attractive visually?
Highlight important information
Can the users see the most important information once they landing on the homepage?
GOOD
Metrograph, MoMA, MAD and MET are giving examples of showing the start and end day of exhibitions directly on their banners or descriptions on the homepage. Easier for users to plan their visit, with no needs to open lots of description pages to find out those time points.
Metrograph also highlight the movie names in a different color, users can directly find out which movie is now on screen on homepage.
BAD
Examples from MoMA and Friends Experience.
They give a very blurry time period on the homepage. If users want to know the exact information, they need to click those exhibitions and navigate to the description pages.
Responsiveness
When user changes the size of their browser, is the page still visually pleasing and functional?
GOOD
Use MoMA and Whitney as two examples of the homepage layout changes responsively when the size of the window changes.
BAD
In the example of Louvre and Friends Experience, when users have a certain website window size, the page is not changing size responsively. Some buttons are hidden such as the “buy ticket”.
Layout and use of images
Whether information on homepage is evenly distributed.
GOOD
Louvre and Matrograph give examples of having larger and smaller elements, but still brings a balanced visual experience overall.
BAD
Montreal museum use a relatively very large picture for the first exhibition on their website.
Whitney compare to other museums, have a large heading logo.
Feels unbalanced when one element on the homepage has a big size.
Visual elements
Does the website feel balanced? How's the font choices? How are the colors and images used?
Aesthetic vs functionality
We noticed a lot of the visual design of these museums are stunning. It’s clear that a grid is involved for most of these websites creating a sense of organization and intention.
The Whitney has two images side by side images as you scroll down making it feel very put together and intentional.
It’s also a great example of good balance between aesthetic and functionality.
MAD also has a single column design making it feel organized.
GOOD
MoMA although has beautiful colors, can feel confusing at times to which block goes with which image. Can possible become overwhelming for new visitors.
BAD
How are the font choices?
The font/typeface choices are key to have a legible experience. With a numerous amount of fonts, it’s easy to forget that fonts are used to convey information in an efficient manner.
The MET is a great example of good font choice. Using a san serif font is a great balance between using something that’s easy to read and something that fits contemporary design styles.
GOOD
The Metrograph is another stunning website that has excellent font choices for the most part. They use this super cursive font at some points. Although it’s beautiful, it took me some time to read it.
BAD
How are the colors and imagery?
Images are a great way to give the user a feel of what the museum is. Something that we noticed with the Merchant's House Museum is that it has great images but is not being used to its full potential. Colors are a great way to convey a mood to the users (ex. Blue → calmness). When used well, it can add to the balance of the website.
The MET and The FRIENDS Experience does a good job at using beautiful imagery when entering the site because it almost acts like a welcome.
GOOD
Metrograph has amazing color choices. You really can’t go wrong with these two complementary colors (orange and blue). However, I don’t get a sense of what Metrograph is with the image chosen.
It’s also low res which can take away from the professionalism and changes very quick.
BAD
Navigation Bar
Is it easy to find information? Is there feedback?
Is it easy to find information?
The navigation bar is one of the first things a user may look for to find what they’re looking for alongside a search bar.
The Whitney and Metrograph do a good job at the navigation bar in a sense where you don’t have too many options and have a search function nearby.
GOOD
The Louvre does an amazing job by having less options so it doesn’t feel overwhelming for the user. However, there’s no search bar function nearby. In order to use the search function, you need to click on “Menu” where you’re then given the same option alongside the search bar.
BAD
Is there any feedback?
One thing I noticed about the navigation bars are that some give feedback when you hover and others don’t. Not having some sort of feedback may possibly confuse the user by not knowing if something is clickable.
Both Metrograph and the MET do a good job of having some sort of feedback when hovering over the navigation bar. ��Metrograph has colors change and the MET gives you more in depth options.
GOOD
Both the FRIENDS experience and the MoMA don’t have any type of feedback to the navigation bar. You can hover over it and the mouse changes but should give more of an indication that it is clickable.
BAD
Exhibition Introduction
Do they have previews and introductions for exhibitions?
The Met Museum website not only provides textual descriptions of exhibition histories but also offers podcasts to allow users to engage with the exhibitions in a more immersive manner.
GOOD
Additionally, on the Met Museum website, you can find photos of some exhibit items along with descriptions of each piece.
GOOD
The Whitney Museum website includes descriptions of exhibitions by curators, providing users with a deeper understanding of the exhibitions.
GOOD
The Montreal Museum of Archaeology and History website utilizes video content to allow users to directly see a glimpse of some of the exhibitions.
GOOD
The Metrograph website lacks detailed descriptions of the films, making it difficult for users to understand the movies by reading the provided information.
BAD
Visiting Information
Do they have opening/closing times? Do they show locations? Is there a map?
The Whitney Museum website offers various transportation options such as subway and bicycles for visitors. Additionally, it provides accessibility information for visitors who require wheelchair access, ensuring a welcoming experience for all.
GOOD
The website prominently displays the operating hours at the top, and users can also find holiday closure dates on the operating hours page.
GOOD
The Louvre Museum website uses a map to indicate both its operating hours and the names of its buildings, making it easy and efficient for users to access visiting information.
GOOD
While the FRIENDS Experience website does provide clear information about the address and operating hours, it doesn't offer a Google Maps link that would make it more convenient for users to search within the website.
AVERAGE
The Metrograph website only provides information about its location and the nearest subway station, but it doesn't mention its operating hours. This is not user-friendly for first-time website visitors.
BAD
Accessibility
Is there multi language instructions?
The Whitney Museum of American Art is a beautifully designed and easy to navigate website that showcases multiple accessibility options of varied categories, that cater to neurodivergent, specially abled, etc. This information has a clear and dynamic architecture, and the user can easily navigate. Information architecture supports interaction design.
All the required data is well laid-out and easy to access.
GOOD
Great detail in information regarding accessibility, and multiple options - clear hierarchy of information and legible text
The Museum of Arts and Design is an aesthetic design but there are a few navigation glitches and information misses. This causes the problems in interaction design, as it’s not very easy to navigate information related to accessibility on the website and there are not many accessibility options offered either. The information does not follow a clear or streamlined architecture, and the user cannot always navigate the required information. Information architecture does not completely support interaction design.
AVERAGE
The navigation is a bit complex and they have limited options. One of the for the audio tour is not working and gives an error.
The Museum of Modern Art (MoMA) is a good looking website. The website is fairly easy to navigate and showcases multiple accessibility options of varied categories – also one of the best accessibility designs in terms of information, options, spellicaly abled, seniors, visually impaired, etc. This information has a clear and dynamic architecture, and the user can easily navigate. Information architecture supports interaction design.
All the required data is well laid-out and easy to access.
GOOD
Great detail in information regarding accessibility, and multiple options - clear hierarchy of information and legible text. The website is visual heavy and that is appealing and easy on the eyes. The website is not very content heavy and that is a good change as museums seem more approachable with this design format.
The The Metropolitan Museum of Art (MET) is a one of the best website designs I have witnessed in terms of information architecture and user interaction design. It is a breeze to navigate, and showcases multiple accessibility options of varied categories, that cater to deaf, specially abled, etc. This information has a clear and dynamic architecture, and the user can easily navigate. Information architecture supports interaction design.
All the required data is well laid-out and easy to access, and minimizes the time taken to complete a task.
GOOD
The navigation is so crisp I could rate this website a 3+. Information architecture is one of the best I have seen as user gets the required info fast.
The The Louvre is a classic design and simplistic. The website is easy to navigate and showcases multiple accessibility options of varied categories – one of the best accessibility designs in terms of information, options, language, visually impaired, etc. This information has a clear and dynamic architecture, and the user can easily navigate. Information architecture supports interaction design.
All the required data is well laid-out and easy to access.
GOOD
Great detail in information regarding accessibility, and multiple options - clear hierarchy of information and legible text. Some more options witnessed like language which is unique when compared to the rest of the direct and indirect websites studies.
The Montreal Museum of Archaeology and History is an very visually appealing website design but there is no link to access the accessibility information. This is a big information miss. This causes the problems in interaction design, as it’s not very easy to navigate information related to accessibility on the website as there are no visible accessibility options offered. The information does not follow a clear or streamlined architecture, and the user cannot navigate the required information. Information architecture does not support interaction design.
POOR
The navigation is a bit complex and they have not provided a visible access to the desired information. One of the poorest accessibility designs.
The Metrograph has nearly no accessibility elements. No different language choice. Their font size is relatively small, hard to read on smaller screens.
POOR
The The FRIENDS™ Experience is an very visually appealing website design but there is no link to access the accessibility information. This is a big information miss. This causes the problems in interaction design, as it’s not very easy to navigate information related to accessibility on the website as there are no visible accessibility options offered.. The information does not follow a clear or streamlined architecture, and the user cannot navigate the required information. Information architecture does not support interaction design.
POOR
The navigation is a good overall and they have not provided a visible access to the desired information. One of the poorest accessibility designs.
Ticket Purchasing
is there an option to buy tickets online?
The Whitney Museum of American Art ticketing options are easy to navigate and the website content showcases multiple ticketing options of varied categories, for seniors, students, members, etc. This information has a clear and dynamic architecture, and the user can easily navigate. Information architecture supports interaction design.
All the required data is well laid-out and easy to access.
Tickets can be easily purchased.
GOOD
Multiple channels to complete the varied ticket options. Very easy to understand and navigate.
The Museum of Arts and Design has a rather complex ticketing system in place on the website, and there are a few navigation glitches and information lapses. This causes the problems in interaction design, as it’s not very easy to navigate information related to ticketing on the website. The information does not follow a clear or streamlined architecture, and the user cannot always navigate the required information. Information architecture does not completely support interaction design.
The Taylor Swift Tour ticket purchase overlaps the general tickets and the ticket process is confusing in both.
AVERAGE
The ticket purchasing information is provided but the hierarchy of information is complicated, and a bit difficult to manoeuvre.
The Museum of Modern Art (MoMA) is a disaster as the link for ticketing for individual user leads to a ‘page not found’
Highly unexpected from a website of such an esteemed background and diverse liking.
POOR
The ticket purchasing information is provided on the main ticketing page but does not extend during user interaction.
The The Metropolitan Museum of Art (MET) ticketing options are easy to navigate and the website content showcases multiple ticketing options of varied categories with a minimalistic approach. This information has a crisp and dynamic architecture, and the user can easily navigate and save time. Information architecture supports interaction design.
All the required data is well laid-out and easy to access and there is no cognitive overload.
Tickets can be easily purchased.
GOOD
The ticket purchasing process is streamlined and open ended as user can pay as they want as an option. The ticketing process is clearly designed and offers quick solutions.
The The Louvre ticketing options are easy to navigate and follow a traditional approach to look and feel and information layout. The website content showcases multiple ticketing options of varied categories, for general, pass holders, audio, etc. This information has a clear and dynamic architecture, and the user can easily navigate. It does look a bit dated though. Information architecture supports interaction design.
All the required data is well laid-out and easy to access.
Tickets can be easily purchased.
GOOD
The ticket purchasing information is provided and the hierarchy of information is clear and well structured. The layout feels dated.
The Montreal Museum of Archaeology and History ticketing options are easy to navigate and the website content showcases multiple ticketing options of varied categories. This information has a clear and dynamic architecture, and the user can easily navigate. Information architecture supports interaction design.
All the required data is well laid-out and easy to access. And what is interesting to note is that the design of information is very visually appealing and clear to understand ad navigate easily.
Tickets can be easily purchased.
GOOD
Multiple channels to complete the varied ticket options. Very easy to understand and navigate.
The Metrograph has a nice ticket purchasing page, but there’s just a few options and members purchase tickets at a different page. This may cause a little bit of confusion for some users.
Average
The The FRIENDS™ Experience ticketing options are easy to navigate, elaborate and the website content showcases multiple ticketing options of varied categories, and it’s interesting to notice user reviews as part of this experience. This information has a clear and dynamic architecture, and the user can easily navigate. Information architecture supports interaction design.
All the required data is well laid-out and easy to access.
Tickets can be easily purchased.
GOOD
Multiple channels to complete the varied ticket options. Very easy to understand and navigate.
Conclusion
Based on our competitive analysis studies, we find lots of good patterns these websites have. These are the things we can have takeaways and place to learn from them. We also learn there are things missing and went wrong in their design. These are the things we’ll avoid.