About the Project

This was a class project from course Usability Theory & Practice. The project was to understand how international users interact with the website and how they use it for research. Our goal was to create a better user experience to help users quickly locate information, modify confusing terminology, enable them to discover new information, also migrate web traffic from Timeline to MET main page.

Issue

We met with UX designers from MET, they pointed it out the website has not been updated for a while and the website has huge amount of traffic from international visitors. They wanted to understand the research perspective of the international researcher, the efficiency of terminology, and help them explore more information on the other site of MET and migrate some traffic.

My Role

• Lead UX researcher

• Conducted usability testing

• Led and managed the team of 4 people, made sure everyone would participate in every step of the whole usability testing

• Created final report and presented it to clients

We recruited 10 participants to complete MET usability test. We would like to interview users have a research background with years of research experience.

Pre-questionnaire, Task, and Post-questionnaire

One interview was made up by one moderator and one note taker. There were three procedures for participant to complete: pre-questionnaire to learn about the participant, five user tasks to explore the existing issues of the site, and post-questionnaire to understand their thoughts. Each interview was taken 1 hour to complete and recorded for further viewing and researching.

User Tasks - Following questions were asked during the middle of the task

1. Use a search engine to find information about Cubism

— Understand how users search info by using search engine and their opinion of the term description

• Compare top three links descriptions of Cubism on the search engine, which one you think is the best and why?

• Before opening the link(cubism on timeline), what do you expect to see?

• Now open the link and browse the whole page, is there anything that you expected on the page that was not there?

2. Go to the timeline homepage, find info on Roman in 1000 B.C. to 1 A.D.. Before expanding the section, spend a minute or two browsing without clicking

— Understand how user search info on Heilbrunn timeline and use filter function

• After clicking in, do you see what you expect upon arriving to the page?

• What do you think about the content and visuals on this page?

3. Find the Temple of Dendur page on this website and browse around without clicking anything

— Understand how user seeks for additional information/search bar

• What do you see on this page?

• Before opening the sidebar, What do you expect to find when clicking these right side menu? Does it match up with what you thought?

4. Find more information about the Temple of Dendur using the links on this page.

— Understand how user navigate from timeline to MET main website

• Before opening the sidebar, What do you expect to find when clicking these right side menu? Does it match up with what you thought?

5. Find information about the work in your language.

— Understand how user use translation on the MET main website

Post-Questionnaire

1. How does the information on this page compares with other websites you use such as Wikipedia?

2. Does the information regarding artists and their works found on the Met Timeline website give you more than what another, less scholarly source such as Wikipedia or Google Image would give you?

3. How likely are you to recommend this site to another researcher / student? (1 = Not likely at all, 5 = Very likely)

4. Please select 5 adjectives from the Microsoft Product Reaction Cards that you would describe the website.

Insights from participants

Finding 1: Too much white empty space on homepage, participants expect more guidance and visualization information

Most users thought the design of the homepage was minimal and bare in design. The structure of content felt unorganized and users wanted more images.

• The simplicity of the design is not appealing for users

• Unorganized structure

• Low discoverability of the navigation

• Difficulty to understand word chronologies

Recommendation 1: Improve navigation guidance and restructure content on the homepage

• Add a header with MET logo and title Heilbrunn Timeline of Art History

• Add a underline below navigation to highlight it

• Create three columns with relevant image and short description to describe essay, works, and chronology

• Move ARTISTS/MAKERS and KEYWORDS from footer to navigation.

Finding 2: Thematic category filter confuses users

When users were searching for information, some issues of the filter were discovered.

• Information in Thematic category are overlapped and confusing

• The or word between geographical region and thematic category is not noticeable

Recommendation 2: Redesign filters to improve searchability

• Expanded thematic content filter tab to three different tabs with clear labels

• Adding these theoretical new filters for categories, such as “artist,” “ruler,” and “collection”

• Add alphabetized listing to filter function

• Highlighting the “or” between the “Geographic Function” and “Thematic Category” tab

Finding 3: Some design elements of object details on the essay and artwork pages were hidden

• Gallery View button is not noticeable

• Participants wanted Keywords section and Description section to be already expanded when they open the page

• Clickable links are varied in appearance and reduce readability and discoverability

• The link of See additional object information is confusing and prevents participant from exploring more info about the object

Recommendation 3: Reorganize additional links to improve consistency and extend user journeys

• Remove cover picture and its button to display gallery

• Have Keywords section and Description section expanded while landing on the page

• Add underline to the links on the right sidebar to a look consistent with the links under Description

• Organize and categorize the links under Description

• Add icon to pdfs to show difference from normal links

• Change the name to See additional object information to More information about this object. Turn the link into a button and move below the description.