Art Institute Website Re-designed
Nov. 2018
Role
UX Researcher
Information Architect
Web Designer
Tools
OptimalSort
Treejack
Sketch
Affiliated Course
HCI 454
Interaction Design
& Information Architecture
Instructor
Adam Steele
Overview
This educational project re-established Art Institute of Chicago's website's information architecture combined best merge results from remote open card sorting with expert review, then conducted tree testing to evaluate the findability of specific labels in the website. It also applied the expandable mega menu to the global navigation on the redesigned homepage. Final deliverables are hi-fidelity prototype of homepage, sitemap, a mobile version call-to-action task flow. This project should have been a group project with 3-4 members lasting 4 weeks, the instructor allowed me to finish the whole work alone under his supervision, the process was tense and challenging but I learned a lot from every detail of research and design.
Problems
Overwhelming information architecture increases users cognitive load.
Unable to target major users on its website.
Out of date design cannot be a representation of a world-class art museum.
Art Institute of Chicago (abbr. AIC) is an art museum, also can be considered as a research institution concentrated in the art conservation and conservation science, it owns one of the largest art history libraries in the US. Stakeholders of its website are not limited to visitors but researchers, students, Pre-K-12 teachers, librarians, scientists, and sponsors, which is why the AIC website has a lot information under the research and education labels.
We can see the website try to present the information as much as possible for all stakeholders by using the one navigation, which significantly aggravates users cognitive load thus increasing the difficulty of obtaining information as well as increasing the interaction cost.
Visit Page, Captured at Sep. 08. 2018
Research Page, Captured at Sep. 08. 2018
Solutions
Established a new hierarchical information architecture making frequently acquired information be more reachable.
Categorized navigation labels based on users’ motivations and open card sorting results.
Applied the mega menu to display all choices, users can grasp everything at once.
Refreshed the design style to make it clean and simple.
Redesigned the homepage content, making the relevant information become more accessible for visitors (defined as major users).
Prototype
Defining Major User
Research Process
Even though the Art Institute assumes responsibilities for exhibiting art as an museum as well as researching the conservation science and indexing historic valuable documents as an institution, it does not mean that the website needs to present all information to users. The website should be as a tool for assisting museum visitors to enhance their visiting experience, NOT be an archive to tell users “what I have”. It serves all stakeholders but has to concentrate on the major group – visitors.
Content Inventory
I created the content inventory of Art Institute with Microsoft Excel by examining each clickable label on the whole site. There are 8 first-level labels, 52 second-level labels, 183 third-level labels, and 139 forth-level labels. First-level labels have been defined as the one directly shown on the global navigation bar, second-level labels prompted when first-level labels activated, third-level labels displayed on redirected content pages when second-level labels clicked, fourth-level labels are semantic labels for summarizing the content shown on redirected pages.
Since the global navigation is drawer type design, the only way to access 3rd labels is to activate one of the 2nd labels, this procedure dramatically increases the interaction cost. Users have to glance all 2nd labels top-down to determine which one they should click to get further information they expected. However, there are six times the amount of 3rd and 4th labels as the amount of 2nd labels., the deeper hierarchy users dig into, the higher interactions cost, drawer type design apparently is inappropriate for this huge inventory.
Remote Open Card Sorting
Card sorting is a method to reveal users’ mental model, not a usability evaluation method, we care about how visitors acquire the information which helps them to enhance upcoming visiting experience such as open hour, admission fee, audio guide and so on.
Some information which under the RESEARCH and LEARN first-level labels is barely seen by visitors since stakeholders for these labels are researchers, teachers, and professors which have already been defined as the non-major group for the website.
Therefore, this open card sorting only contains all labels under VISIT and COLLECTIONS (68 total), participants will be asked to organize cards into groups by same natural relationships and then name each group they created. On the other side, it’s unrealistic to cover over 300 labels to do card sorting, which would spend volunteers one day to finish it. I adopted OptimalSort by Optimal Workshop - an internet-based software - for card sorting [1], it provides an efficient way to recruit people by just sending a link via social media.
Pilot Session
I conducted a pilot moderated card sorting before launching the remote one. I can observe how participants were grouping cards and understand what they were thinking by “Think-aloud” protocol. When finished, I asked participants to draw a star on these cards which they didn’t understand.
Part of results from pilot study
Part of results from pilot study
I found the most difficult part is grouping art themes like “Textiles”, “Throne Miniature Rooms”, “Modern” and “Contemporary”, participants spent much time on these cards because they do not understand these art terms, even if some of them have been to the Art Institute.
In this situation, I deleted these cards related to art themes, the final number of cards been used in remote card sorting is 54. According to the guideline of card sorting by OptimalWorkshop, participants will be more likely to complete the card sorting for 30 to 60 cards [2], considering that the Art Institute content inventory is huge, 54 cards are most relevant cards that guaranteed to get enough data for making decisions.
Pre-study Questions
OptimalSort gave researchers an opportunity of asking participants to answer pre-study questions before launching the remote card sorting, I designed four questions for participants, one is required and three are optional. Based on the results, there are 12 participants who have responded to pre-study questions, 7 participants have been to the Art Institute and 3 of them found the museum information through the website. 5 participants have not been to the museum but nearly half of them are willing to get information from the website.
The main way of acquiring museum information for potential visitors is the website.
The results of card sorting may not reflect real users’ mental model since most of the participants have been to the museum and they may group cards based on their preconception implanted when they browsed the website before visiting the museum. As a UX researcher, I think the card sorting needs a filtering function to screen ineligible participants for better results in the further study.
Card Sorting Results
Launched on Oct. 29, 2018 and closed on Nov. 1, 2018. 13 participants recruited, 12 completed, 1 abandoned.
Most used 12 ~ 28 mins to finish, the median is 13.6 mins. Based on time spent and completion rate, I presumed that the difficulty of card sorting is fair, it didn’t give participants too much frustration.
58% of participants agree with grouping labels related to visiting such as “Hour, Direction, Calendar, Parking”, some of the labels have strong natural relationships and semantic meanings, even though this group contains 13 labels, participants did not have much trouble for it.
83% of participants agree with grouping labels related to nearby places for example “Shop Nearby, Explore Nearby, Stay Nearby”, the similar naming convention of these labels helps participants reach this high agreement rate.
92% of participants agree with grouping labels related to dining like “Museum Café, Outdoor Dining, Caffe Moderno”, participants could easily consider these labels as restaurant names, therefore, they grouped them together.
However, there are 33 labels that do not reach the half agreement rate, three critical issues are detected.
Screenshot of Best Merge Results
Identified Issues
“Sign Language, Tours with Sighted Guides, Touch Gallery, TacTiles Kits” are labels originally under the “Accessibility”, results shown some of them have been grouped separately, “TacTiles Kits” even has been grouped individually.
The reason for this situation is that most participants cannot fully understand meanings of these labels, the alternative explanation is that these labels’ name are not friendly enough for all people.
Therefore, these labels have to be renamed by using understandable intuitional words with no-bias and no-discrimination purposes. The Metropolitan Museum of Art (The MET) provides a great solution for this issue, for example, we can replace “Sign Languages” with “Visitors Who Are Deaf”.
Under “Visit (1st) - Collections Update (2nd)” label, there are three labels “New on View, Works off View, and Gallery Closures”, the word “View” seems too vague and it can be interpreted as many ways, visitors may get the idea of these labels but need more time than other labels.
Otherwise, under “Exhibition (1st)” labels, there is also a “Collections Update (2nd)” label, different from mentioned above, this 2nd level label replaced “Views” with “Current, Upcoming and Past”, the inconsistency of these labels increases the ambiguity.
Moreover, “Exhibition” and “Collections” labels may be confused for visitors since they are represented somehow same semantic meanings. In my work, I deleted “Collection Update(2nd)” from “Visit (1st)” and renamed “Exhibition” as “Exhibition and Events”.
“Collections (1st)” should have been supposed to show what artworks the museum has or as a way to attract potential visitors, but in the Art Institute website “Collections (1st)” also contains “A Science Laboratory, Online Scholarly Category, Search Interpretive Resource, Museum Studies” labels that also have been consisted in “Research (1st)” label, visitors easily get frustrated by the label redundancy.
Speaking of “Research (1st)” label, it’s the largest category contained 14 second-level labels, these labels not only cover research-related information but also the museum library information, in my work, I created a new first-level label “Library”, re-grouped some labels under the “Research” to the “Library”.
Tree Testing
Tree testing is a great usability technique to evaluate the findability of target information based on simple text version of the website and discover where users are getting lost in the information architecture [3]. In this project, I applied Treejack by OptimalWorkshop [4] to conduct tree testing study, same as OptimalSort, it also can be remotely completed from the internet by just sending the link to social media.
I conducted tree testing to evaluate new re-established information architecture under “Research”, “Education” and “Library” labels which are NOT included in the card sorting study. In order to avoid of using leading words in tree-testing tasks and let participants fully understand what they are going to do, I created 7 scenario-based tasks to test participants whether they could find “Teachers Program, Join Membership, Oral Histories (Artists), Current Event, Highlights Collections, Volunteer, House History Research”, respectively. One of the tasks is that,
“You are a teacher from an elementary school at Chicago, you aspire to bring art into your curriculum to stimulate your students to generate more interactions and cultivate their critical thinking skills. You open the Art Institute website to find out some related information that supports you to implement this idea.” The correct path is “Education – K-12 Educators - Teachers Programs”.
Tree Testing Results
In the tree-testing study, the results may be unexpected, 4 out of 7 tasks’ failure rate is higher than 60%. No leading words in task statements give participants no helpful clue to decide the right path, which significantly increases the difficulty of testing. Besides, most of the tasks concentrate on labels under “Research” and “Education” which designed for some specific users such as researchers, K-12 teachers. Some participants may lack expert knowledge to understand the task.
Part of results from tree testing
This tree-testing study gives me a lesson that although the remote internet-based study is easy to conduct, the recruitment should be considered to screen eligible potential users, also considering such the huge content inventory the museum has, the tree testing should be repeatedly conducted with a different small domain.
Mega Menu
The Art Institute has more than 300 “articles”, how to establish the large information architecture, design the ease-to-use global navigation for users to find the information instantly which they are interested in the challenging work for every UX designer.
Mega menu is an expandable menu with two-dimensional panels especially for websites with large labels [5]. The panel will drop down when the cursor is hovering on the navigation, users can grasp everything at once with no scrolling interaction.
It applied a regular dropdown menu, users cannot see all labels and must rely on working memory on their mind.
Art Institute's website's navigation menu - Visit
With the mega menu, it immediately shows everything at glance and users do not need to remember everything, thus reducing users’ cognitive loads.
I also integrated selected third-level labels into it, users could more easily pinpoint the information in as little time as possible.
Re-designed mega menu - Visit
Plan Your Visit
“Plan Your Visit”, a call-to-action button, should also be considered in a museum website, in view of large exhibits the Art Institute has, there is a tradeoff between limited visiting time and collections which visitors really want to see, they constantly make non-compensatory decisions to determine which path they should follow and which collections they should see at first.
By referring the design idea from Museum of Science and Industry, I created a task flow of “Plan Your Visit” for mobile version to help visitors plan their upcoming visit. Users only needs to tell the visiting date, how many hours they would have and if there are children to be with, the app will immediately prompt suggestions for users.
Select the date then next
Drag indicator to select how many hours you will have then next
Select one of options to define your role for this visit then next
Continue to buy tickets or go back
Check the date and select tickets
Fill in the information then next
"You may scan the QR code"
If you have children following with you then select
Different from the design of MSI, the Art Institute provides much teaching resource for K-12 teachers and university faculties, in the museum, they can company with their students to experience the art together. Therefore, I add the other question “Please define your role for this visit” in task flow with five options “Pre-K-Educations, Parents, University Faculties, Students, Adult Visitors”, based on the different option, the task flow could give visitors different experience opportunities, the task flow also integrated ticket purchasing process, once the purchasing has been done, the e-ticket and visiting suggestions could be automatically sent to visitors’ email recorded when they fill in the payment information.
Homepage Content Design
By analyzing other art museum websites such as the National Gallery of Art, The MET, the Louvre and so on, I found all websites including the Art Institute have no information related to the floor plan, admission fee and address on the content area.
Most websites just create a “Ticket” button on the navigation and wish visitors to find it, thus purchasing a ticket from online, however, we cannot pretend that all visitors have been to the website and already know the web design convention. In my work, I created a small section on the content area to locate the price information, all visitors could suddenly see the admission fee. Most of the art museum is a non-profit organization, the admission fee is the one of important revenue, how to show the price information in an appropriate way is in the interests of the museum.
The floor plan is important for visitors especially for new ones, however, it’s missing on most of the websites. Even though we could get a free printed floor map on the price auditorium, providing a digital version for potential visitors to be familiar with earlier and planning the path in advance is helpful. Therefore, I also created a section on the content area for accessing the floor plan.
All museum websites display their address on website footer, if users know the web design convention, they can immediately find it, but for other people, I think they will spend some time to find out the address information and how to get there. On my prototype, I put the museum address with a shortcut map on the content area, this design can give new users a general impression of where the museum is while looking through the website
Google Map shows that visitors usually stay at the Art Institute for less than 3 hours. During the design process, I was thinking why there is no Highlights section on many art museum websites if visitors only have 2 hours at the museum, what should they see firstly, how they know which the most precious treasure is. I guess everyone knows Mona Lisa has been exhibited at the Louvre but how about the Art Institute? In my design, I put the Highlights section on the content area not only for visitor’s convenience but also for promotional purposes.
As a non-profit organization, the donation is essential for sustainable development. According to 2018 the Art Institute Audit Report, the total endowment fund is over 1 million. In the old design, the label “Give” is buried in the high hierarchical navigation. What I changed is to unfold making it visible on the content area, every time visitors browsing the website, they can realize that “Oh, the museum needs the donation, I can actually do something for it.”.
Most of the museums use pictorial description to introduce events. In my design, I abandoned this kind of design and only use some dots threaded by a straight line to illustrate past, current and upcoming events within two weeks. This design can indicate that events are dynamic, the website is live, if visitors are interested in some of the events, they can click to get further information. On the other hand, the linear design can greatly reduce the content area, users do not need to scroll down, again and again, to get through the whole website.
References
[1] OptimalSort by OptimalWorkshop. https://www.optimalworkshop.com/optimalsort
[2] Card Sorting 101. OptimalWorkshop. Retrieved from https://www.optimalworkshop.com/101/card-sorting
[3] Kathryn Whitention. 2017. Tree Testing: Fast, Iterative Evaluation of Menu Labels and Categories. Retrieved from https://www.nngroup.com/articles/tree-testing/
[4] Treejack by OptimalWorkshop. https://www.optimalworkshop.com/treejack
[5] Jakob Nielsen. 2017. Mega Menus Work Well for Site Navigation. Retrieved from https://www.nngroup.com/articles/mega-menus-work-well/
Thanks, Prof. Adam for guiding me through the entire project. This is my first time finishing this large-scale project individually, challenging but learned a lot.
