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
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?
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"
Not effective
Information Communication
"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.
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.
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.
Card Sorting Task
Card Sorting Result From User 01
Based on card sorting result, I reconstructed the information architecture.
BEFORE
-
Not concise and descriptive label
-
No priority in sub-navigation menu
-
Confusing grouping
-
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
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
Art/Collection
Detail Page
O4
Deliver & Evaluate
And finally, does the new design help ?
Final Design
Homepage
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
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.
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
“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
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!