Louvre Website Redesign

Project Brief

As part of IBM’s internship application, I took on a design challenge to re-design the Louvre’s website in 72 hours. Due to traveling at the time I received the design challenge, I ended up only having just over 24 hours to complete it.

The Challenge

Redesign parts of a website for the world’s largest museum: The Louvre. Your co-worker, a user researcher, has analytics that show many users are looking for information on prominent pieces of art, but are leaving before they find what they want. Propose changes to address this feedback.

Unpacking the Current State

Current Homepage

The first thing I did after receiving the design challenge is look up the Louvre’s homepage, in order to evaluate the current state and areas of opportunity.

Design Opportunities

From there, I broke down the design opportunities I saw into 3 main categories:

Surface: Simple graphic design issues that could be quickly improved

Complex: Issues with how the user might interact with the website based on first impressions

Critical: Large UX issues with how the user would navigate the website as a whole, considering the information architecture of the homepage.

Surface

Side columns are distracting and take up almost 60% of the real estate

Logo is difficult to read to low resolution

Inconsistent colors: 3 different hues of red on the homepage

Complex

CTA Button is not very apparent

2 levels of hierarchy in the top bar

Many navigation items compete with each other for space

Critical

Poor information hierarchy based on size and space

Too many navigation options

Wording and navigation terms are esoteric and unclear


Exploring the User Journey

The Quest for the Mona Lisa

Because of my limited time in this design challenge, I didn’t have the luxury of constructing a typical user journey from interviews and research. Instead, I decided to use the website as I normally would to find information about one of the most famous paintings of all time, the Mona Lisa.

Step 1

From the homepage, I was unable to find a search bar, so instead, I used “Collection and Louvre Palace”.

Frustrations:

Unable to find a search button
Wording puts doubt in the user’s mind: what is “Louvre Palace”?

Step 2

From the homepage, I was unable to find a search bar, so instead, I used “Collection and Louvre Palace”.

Frustrations:

Unable to find a search button
Wording puts doubt in the user’s mind: what is “Louvre Palace”?

Step 3

From the homepage, I was unable to find a search bar, so instead, I used “Collection and Louvre Palace”.

Frustrations:

Unable to find a search button
Wording puts doubt in the user’s mind: what is “Louvre Palace”?

Step 4

From the homepage, I was unable to find a search bar, so instead, I used “Collection and Louvre Palace”.

Frustrations:

Unable to find a search button
Wording puts doubt in the user’s mind: what is “Louvre Palace”?

Step 5

From the homepage, I was unable to find a search bar, so instead, I used “Collection and Louvre Palace”.

Frustrations:

Unable to find a search button
Wording puts doubt in the user’s mind: what is “Louvre Palace”?

Key takeaways

Predictable Places

The search function, search results, and much of the information for the website appear in unfamiliar locations.

Precise Wording

Wording for navigation elements are unclear, which is a main cause of doubt in the user’s mind.

Content Hierarchy

The information is not easy to scan quickly because titles, images, and other elements compete for space rather than work together.

Competitive Analysis

How is everyone else doing it?

From here, I began to investigate how other leading museums might organize content to make desired information more accesible by looking at two examples: The Smithsonian, and The MET.

There are many specific takeaways I gathered from comparing these sites, including more accesible wording on navigation elements, a less visually cluttered homepage, and a more prominent search function. Contrasting these sites to the Louvre, I learned the biggest issue with the Louvre’s current information architecture:

Content is sorted by the what, not by the why

By this, I mean that these sites consider who the user and what that user might be looking for. The Louvre’s pages group together concepts that are thought to be similar by museum workers and people who spend a considerable time in the museum, but that might not be intuitive for the user.

So Who is the User?

Developing Archetypes

Because of the nature of a timed design challenge, I unfortunately had to make an assumption here about the why users would visit the Louvre’s website and I used that to develop archetypes. I divided these into 4 distinct categories.

Learning

Anyone from an elementary school doing a book report to the art fanatic constantly checking for new pieces of work

Going

Someone that is planning to visit the Louvre and is going to find ticket information and things they can do while there

There

Someone in the museum, likely looking for a map or more information about installations, most likely using a phone

Gone

People who have gone to the museum and are now reliving their experience online, similar experience as the “Learning” group

Designing for the Learner

I decided to hone in on one type of user for this challenge, but I still wanted to consider the other 3 archetypes in my final design. “The Learner” seemed like the most common type of user, so I focused primarily on them. I realized that a large age difference and experience difference in the learners would mean that I would have to consider both 8 year olds and renowned art historians in my solution, using both simple and easy to understand language, but also providing opportunities to find obscure pieces of art and new and exciting opportunities for those art enthusiasts.

My Solution

Homepage

The landing page of the website features a breathtaking video of the Louvre, in addition to navigation elements and a prominent search bar.

The “Visit” button and “Buy your Tickets” feature are both implemented for the “Going” archetype

I included the “Art” button especially for the young learner

“What’s On Right Now” shows the art enthusiast and the visitor everything new and exciting in the museum

Art

The art page now has a search bar in the center of the screen to allow some learners easy access to their destination.

There’s also three different ways to explore parts of the full gallery at the bottom of the page, catering to different levels of art history proficiency.

Search Results

The search results now clearly shows a thumbnail for each result, ways to sort the information, and a clear visual hierarchy of the text for each result.

In addition, there are subtle changes such as color coding the medium of the piece, so that the user can quickly scan for the artistic medium they might be looking for.

Art Page

Clicking on an actual piece of art will show a clear description of the piece, with special attention to the visual hierarchy of the pictures of art on the site, as well as descriptions of the context, and technical descriptions including the citation, materials, and physical history of the piece.

This page uses the same information the old one included, but the way it is presented makes the information much more digestible and easy to navigate.