landing louvre.png
Artboard 1.png

Louvre Museum

O V E R V I E W

This is the design challenge when I interviewed for IBM. I was

tasked to redesign the Louvre Museum’ website to help visitors

find artworks easily. Through usability testing, I found the underlying problem is ineffective information communication and less intuitive information architecture that discourages navigation. So I rebuilt the information architecture and improved the information hierarchy, giving a seamless navigation experience. 

Category

Web Redesign

Role

UX Researcher

UX Designer

Time

4 Days

S O L U T I O N

ezgif.com-video-to-gif-2.gif

P R O C E S S

O1

Empathize

&Define

Usability Test

As-is Journey

O2

Synthesize

&Ideate

5 Whys

Parallel Product Analysis

Card Sorting

O3

Develop

&Iterate

Design Guidelines

Wireframing

O4

Deliver

&Evaluate

Usability Test

Analytical Thinker | Inquisitive Explorer | Art-lover

 

O1

Empathize & Define

Why do users leave before they find what they want ?

Question Storming

The challenge prompt I was given is that the world’s museum Louvre found that a lot of users are trying to find information about prominent pieces of art however they are leaving before they find what they want.

To understand the problem prompt,  I tried to come out as many questions as possible before I take any move to understand what I don’t know and what I need to know.

Who are these users?

What kind of information are they looking for?

Why do they leave?

When and where do they leave?

How do they interact with this website?

Why don’t just Google?

These questions set the direction for research. Besides, by trying to answer these questions, I had a contextual understanding of the problem. Besides, the question that why don’t people just Google artworks that they are interested in allows me to think of two user scenarios.  

These two scenarios serve as a checklist, reminding me the final design need to serve those two different needs well.

User Scenario 1

After visiting the Louvre Museum, Marisa forgot the name of the work that she was interested in but remembered it was in Asian department. So she decided to Louvre’s web to search it.

User Scenario 2

Steve is an art researcher and he wants to know more information about a piece of work such as related study, exhibitions and news. Louvre’s web is the most authoritative way for him

to find out.

Usability Test

At the same time, I explored Louvre's current website to build empathy. I gave myself a  task to find Mona Lisa on this website. As a result,  I ended up to find nothing about it. I had a general intuition about the reason that is unclear navigation.

 

However, I  need more data to validate my hypothesis and define specific problems. So I conducted a usability test with 6 people with the same task.  And I mapped out their current navigation flows and breakdowns within it.

How Do Users Find An Artwork Named Gambriella in Louvre’s website?

Louvre.png

From this diagram, you can easily find that: 

A small task takes many steps and goes through many navigation hierarchies.

Users spend a lot of time in understanding where each navigation tab may go.

Users have wrong attempt to navigate themselves.

An Anatomy of Problem Definition 

Based on the usability test result, I realized that ineffective information communication and unclear information architecture discourage navigations. It strikes me two software engineering term: front-end and back-end. Information communication is more of a front-end problem while information architecture is more of a back-end problem.

Front end.png
"Front-End"

Not effective 

Information Communication

Backend.png
"Back-End"

Unclear

Information Architecture

 

O2    

Synthesize & Ideate

 How to prevent users from leaving before they find what they want?

Revisit User Feedback 

So I revisited users feedback collected from the usability test and synthesize them using 5 Whys to generate ideas. Overall, I chose 4 user feedback to conduct 5 Whys. The reason why I choose only 4 feedback is that some feedback indicates a solution directly and others can be categorized into these four.

5whys4
5whys4

press to zoom
5whys
5whys

press to zoom
5whys2
5whys2

press to zoom
5whys4
5whys4

press to zoom
1/4

Part 1 - Ideas

After performing 5 whys, I summarize what should final design ensure:

Efficient Flow

Efficient flow enables users to achieve goals easily and quickly without information distraction

Concise Label

A concise label should indicate its function

intuitively

Easy To Find

Search is the last thing user would do thus it 

should be easy to find

Keep Consistent

Consistent layout helps users to absorb information easily.

Differentiate Landing

Choose a proper landing image to indicate each page’s function

Quick Access

provide quick access to  important information 

such as masterpiece 

Learn From Parallel Products

Based on Jakob’s law,  users prefer your site to work the same way as all the other sites they already know. So parallel

products study is not same as competitive analysis, instead, it is used to extract the commonality of similar websites such as other museum’s website, landmarks’ websites, NPO’s(library) websites.  Overall, I looked through almost 50 websites and analyzed 5 websites in detail. 

Snip20181119_5.png
Snip20181119_11.png
Snip20181119_7.png
Snip20181119_6.png
Snip20181119_10.png
Snip20181119_8.png

Museum's  |  Landmark'  |  NPO's Website 

Part 2 - Ideas

After performing 5 whys, I summarize what should final design ensure:

Visually Stylistic

Efficient flow enables users to achieve goals easily and quickly without information distraction

Call To Action

A concise label should indicate its function

intuitively

Use Proper Picture

Search is the last thing user would do thus it 

should be easy to find

All In One

Consistent layout helps users to absorb information easily.

Keep It Simple

Choose a proper landing image to indicate each page’s function

Always There

provide quick access to  important information 

such as masterpiece 

Design Guidelines

By combing part 1 and part 2 ideas, I formed design guidelines for final design.

Consistent

& Differentiate

Keep layout consistent while 

also differentiate information

Stylistic

& Minimalistic

Keep visual stylistic and 

minimalistic

Concise

& Descriptive

Provide concise, descriptive 

navigation label that indicates 

its destiny as what users expect

Call-To-Action

& Highlight

Highlight call-to-action features through providing quick access or put in the easy-to-find position 

Efficient

&Smooth

Provide efficient and

smooth task flow

 

O3    

Develop & Iterate

Build, test, learn and repeat

With design guidelines in mind,  it’s clear that I have 2 tasks during this stage.

Task 1: Reconstruct Information Architecture

I extracted the current information architecture and conducted card sorting to understand users’ mental model through which I also asked participants to highlight what they think is most important for them.  

cardsorting_before.png

Card Sorting Task

cardsorting_after.png

Card Sorting Result From User 01

Based on card sorting result, I reconstructed the information architecture.

old_Information Architecture copy.png
BEFORE
  • Not concise and descriptive label

  • No priority in sub-navigation menu

  • Confusing grouping

new_Information Architecutre.png
  • Concise and descriptive label

  • Prioritize what users care

  • Grouping based on users mental modal

AFTER

Task 2: Redesign the Layout

The second task is to organize content in a clear way. Given limited time and challenge statement itself, I choose three most relevant pages to redesign, which are: homepage, art page and details page of artwork.  

Iteration

wireframe_2.jpeg
wireframe_4.jpeg
wireframe_5.jpeg
One-page Layout
Square grid-based
Rectangular grid-based 
Pros
Immersive Experience
Cons
Not easy to quick navigate
Pros
Easy to navigate
Cons
Not easy to quick navigate
Pros
Easy to navigate

Sufficient space for each component

Final Wireframe

Homepage
Wf-Homepage – 1.png
Art/Collection
Wf-Art – 1.png
Detail Page
Wifi-Artwork_Detail_–_1.png
 

O4    

Deliver & Evaluate

 And finally, does the new design help ?

Final Design

ezgif.com-video-to-gif-2.gif
Homepage
hifi_ homepage.png
Hero Image

choose Louvre’s landmark as a hero image to suggest context, product information, and aesthetic tone.

Call To Action

Put buy ticket in an obvious position to call action.

Daily Artwork

Daily artwork is a useful module to increase traffic in the original Louvre's website but fail to catch user’s attention.  

So I highlight it in the new design.

Gallery View

Collection highlight serve as a quick access 

to well-known masterpiece at Louvre. Using

a gallery review to mimic offline visiting

experience.

Art
hifi_art.png
Search First

Louvre contains more than 380,000 objects, 

so put search first would be an efficient way to navigate. 

By category

Louvre contains 8 curatorial departments. 

This category is important navigation to help users to find specific type artworks.

hifi_detail.png
Detail Page
Artwork Landing

After clicking an artwork, users want to know more details of it.  What it looks like would be first thing users expect to see.  

 

Besides, Louvre shoots close-up videos for some artwork but hide this function in the corner. So I integrate this function here to provide seamless experience. 

Evaluation

The aim of evaluation session is to assess the usability of the new design to ensure it is effective, efficient and desirable. So I conducted another round of usability test to compare the new user flow with original one.

Usability Evaluation

BEFORE
AFTER
diagram 1.png
diagram 2.png
“I just somehow find it.”

Takes 3-5 min time

Takes around 7 steps

“I think I can find in this way”

Takes less than 1 min

Takes around 4 steps

What Users Say

“This’s way better.”

---- User 01

“I think it should be here”

---- User 02

What My Interviewer Say

“I feel like it should be in this tab.”

---- User 03

"Lingzhi impressed me with how thorough she was in her delivery of the design

challenge.  She walked me through her 4-step process of facilitating research + 

comparative analysis, and then creating low and then high-fidelity wireframes."

Hayley A Yudelman.png

Hayley A Yudelman

Design Researcher @IBM

 

R E F L E C T I O N

While doing this project, I tried my best to think of the problem thoroughly and address it effectively in limited time.  However,  if I could have more time on this project, I wish I could:

 

  • Interview different kinds of users to understand more user scenarios

  • Involve stakeholders’ interest into consideration such as marketing purpose and organizational structure

  • Perform qualitative analysis to get a deep understanding of users behavior. For example,  a high bounce rate of a page can help me Identify which page is most frustrating for users. 

 

In the end, as an art-lover, I really enjoyed doing this project. So I decided to continue work on it as my side project. I will update my new design soon!