MATC Library Website
Information Architechture | Website Redesign
Team
Winny Chang
Holly Chen
Dan Wu
Contribution
Survey Design
Website Analysis
Wireframing
Prototyping
Usability Testing
Duration
Tools
3 months
(Oct. - Dec. 2019)
Google Form
OptimalSort
Adobe XD
Introduction
Lots of websites lack good structure, which causes the users to get lost in the information. In this project, our team chose to redesign the website of the Madison Area Technical College (MATC) Library (https://libguides.madisoncollege.edu/library). The website contains lots of information on each page and has a big room for improvement. Through interviews, survey, card sorting, and usability testing, we discovered the issues regarding the website and proposed a new design.
Process
1. User Research
As a designer, we need to keep in mind that "we are not the users". It is essential that we do not design from our perspectives but to understand how the mentality of the actual user works. To understand the users, we interviewed the library's UX team, sent out a survey, and conducted preliminary usability testings on a staff (from the writing center) and a student. The key findings are listed below:
​
-
[Interview] The main users of the MATC library website are students, faculty, and staff.
-
[Survey Result] For faculty/staff, they use “Student Achievement Center” and “Faculty & Staff” in the navigation bar most frequently. For students, “Group Study Rooms” was the top feature they use. The “Featured” was the second place.
-
[Survey Result] Things that at least two users enjoy about the website are: pleasant looking, easy to use, helpful, and provide lots of information. Things that at least two users dislike about the website are too much information on the website, poor web page design (e.g. poor layout, lots of text, important things are not obvious), confusing / not user-friendly.
-
[Preliminary Usability Testing] It was hard for the staff and the student to complete the tasks we assigned. They had trouble finding library's event calendar and the tutoring schedule. They also expressed that there was too much information on pages such as "Research Help" and "Computer Help".
“I would rather go to librarians directly instead of looking through the information.”
​
Based on the two usability tests, we created two personas:
.jpg)
Persona representing the "student" user group.
.jpg)
Persona representing the "faculty" user group.
2. Website Analysis
Home Page
​
The home page contains lots of links to other pages on the site. For the navigation bar, most of the links lead to external pages, but there are also some local pages hidden inside the drop-down menu. The top left section is divided into five tabs, and each tab contains an average of seven links to local pages. We think that the homepage contains too much information without suitable categorization.
Top-level site map of the MATC Library Website shows that there are lots of links on the home page.
Web Content
​
Most of the pages that we are redesigning give us the feeling that the library is dumping all the resources they have on the pages. Our interviewees also complained about the messiness of the website with too much information, which they would instead approach librarians directly. This presents the low user experience of the website.
Example pages of "too much information". It is hard to find certain information within so many links.
Controlled Vocabulary
​
We were surprised when realizing that the current library website is using it. The reason is that the inconsistencies of vocabulary used on the website are very noticeable. For instance, "Faculty Toolbox", a section dedicated to faculty staff, can be found in four different names (faculty support, faculty toolkit, faculty toolbox, and library support) that direct you to the exact same contents. Additionally, "Computer Help" and "Research Help" on the homepage lead you to "Academic Technology Launchpad: Technology" and "Reference and Research Help: Ask Us! Research Help" respectively. We recognized that the variety of vocabulary enhances the confusion of users.
A page with different names (marked in orange).
Accessibility
​
We conducted web accessibility evaluation through google chrome's "inspect me - audit - accessibility" feature to go through its HTML file, and it scores a 99/100. However, the pointer disappeared after the navigation bar when conducting the keyboard-testing method. Furthermore, with so much information on the website, it would take a long time to reach the item you want with the keyboard.
Card Sorting
​
We utilized open card sorting to see what categories and names make sense to the users. From different sections of the MATC Library website, we selected 28 items. We used the online card sorting tool, “OptimalSort”, so that we can analyze the data easier. Ten responses were collected, including similar numbers of males/females, and Americans/non-Americans to represent the MATC population. Also, we added an additional question in the card sorting asking "What feature do you use the most on a/(any) college library website?", which eight participants answered “resource searching” and three participants answered “hours” (a participant answered both "searching" and "hours").
​
To analyze the card sorting result, we first calculated the number of similar categories, and then find out the categories with the highest occurrence. Next, we compare the category of the current website with the highest-occurrence categories of the card sorting result. The similarity was rated on a 1 to 5 scale, 1 being low similarity and 5 being high similarity. Different actions were taken based on the rating score:
​
-
5 - Kept the items in the same categories.
-
4 - Discussed the renaming.
E.g. Items in “Computer Help” were categorized under names such as “Computer”, “Technology Resources”, “Tech (hardware and software)”, and “Technology related stuff”. Since none of the names mentioned “Help”, we discussed to change “Computer Help” to “Computer & Tech”. -
3 to 1 - Tried to recategorized the items under more intuitive names.
E.g.“Interlibrary Loan” is under “Faculty-Toolbox -> Custom Support” on the library website. We recategorized this item under “Faculty-Toolbox -> Library Service” based on the names in the card sorting result.
3. IA Strategy
Regarding the information architecture strategy of the MATC library website, we focus on two main areas, which are the redesign of the organization system and the navigation system.
Organization system
The current website presents all the information it has on each webpage. As a result, users would either give up on looking for information or take a very long time to find it. Our strategy of reorganizing the information on the website is to utilize drop-down menus to avoid excessive information. It might take users one more step, but when users enter the site, they have a very clear and structured view that reduces the searching time.
Navigation system
​
The current navigation combines the MATC website's navigation system with the library's, which confuses users and makes it difficult for users to reach what they are looking for. Our group got frustrated when we realized how many irrelevant links are included in the navigation bar of the library website. Therefore, our main focus here is to remove all the non-library links from the navigation bar and separate the MATC website's shortcut into a drop-down menu on the top layer of the bar. We used color to differentiate the links of the MATC website and the library. We chose the full name of this college over its logo to avoid distraction from the library logo.
For the second layer of the bar, all the links are from the library website. Our strategy better differentiates the links from the main MATC website and the library, as well as makes it easier for users to navigate.
The top layer uses MATC's brand color, navy, and includes the shortcuts of the school's IT services.
The second layer uses MATC library's style and only includes links from the library website.
For the new top-level site map, we removed the unrelated external links from the MATC website. The navigation bar only includes frequently used library links without drop-down menus, and the top left section is changed to a search only section. In addition, the image carousel, which contains 11 non-clickable images and 6 clickable images, was removed. (We also decided to remove the image carousels on other pages because they are distracting.)
Top-level site map of our design
removed the excessive links.
Top-level site map of the current website.
For more details on our design decisions, please refer to p.13 to p.16 of our report. (Report link is located at the bottom of this page.)
4. Paper Prototype & Usability Testing
Paper Prototype
​
We first created basic wireframes based on our research and analysis, then we created a paper prototype for our usability testing. We chose to use a paper prototype as our testing tool so that the testers could focus more on the page structure rather than the UIs.
Paper prototype screens.
Usability Testing
​
Our main goals were:
​
-
Validating the time of completing tasks is significantly shortened.
-
Figuring out the confusion of the item category that we found from the card-sorting results.
-
Tracking the eye path for our target users to optimize the web page layout.
-
Verifying the redesigned website matches users’ intuitive decisions on navigation.
​
The testing took place in Madison College (MATC) with five participants, including three faculty members and two students, which are the main users for the MATC library website. We collected both quantitative and qualitative data.
​
There were seven tasks for the faculty, which were to find: “DVD resources” to play in class, “Tutoring schedule” of Truax Campus, “Linkedin Learning” link, “Avoid plagiarism tips”, “Online teaching resources”, “Blackboard” login, and “Event” of the library.
​
The six tasks for the student were to find: “Database” searching, FAQs of the library, Question submission of a computer-related question, “Tutoring schedule” of Truax campus, “Event” of the library, and “Citation help”.
​
Our key findings were:
​
-
The time needed to complete the tasks was reduced. E.g. We made the navigation bar more prominent in our prototype, and the time needed to find the library events was decreased from 2.5 minutes to less than a minute.
-
Finding tutoring schedules and LinkedIn Learning took the most time, but other tasks were all completed within a minute.
-
Some users failed to find tips to avoid plagiarism, FAQs, and citation help. We concluded that these failed tasks were mainly caused by poor categorization and naming.
-
Eye-paths seemed to be different from person to person, as well as on the actual website and the paper prototype.
-
Three participants related the “Find” in the navigation bar as the search feature for the whole website.
Paper prototype with blue sticky notes as the drop-down menus.
Conducting usability testing in the
MATC Student Achievement Center.
5. Improvements & High-fidelity Prototype
We made a few more improvements to address the problems we found, and we also made some adjustments to beautify our final design:
​
-
Moved "Avoid Plagiarism Tips" to "Research Help" section based on the card sorting result and the validation of usability testing.
-
Changed the name of "Computer Help" to "Computer & Tech" based on the card sorting result.
-
Changed the name of "?askalibrarian" to "FAQs" since participants of our usability testing had trouble figuring out what "?askalibrarian" stands for.
-
Moved the location of "Tutoring Schedule" back to the left-hand side of the webpage with enlarged font size and a star icon.
Note: Nobody from our preliminary usability test was able to find it when it is on the left side, inside the tutoring information box. Therefore, we moved it to the right with a bigger font size and a star icon. However, users during the usability test still could not find the "tutoring schedule" at first sight. We concluded it was because users' eye-sight usually go on the left (top to bottom) then to the right side of the webpage.
​
-
Optimized Home page Layout.
-
Optimized the IA layout of the Research Help page & Computer & Tech's icon.
-
Beautified the UI of the website.
Below are the screens of the current website (left-hand column) and our high-fidelity prototype (right-hand column). We can see that we reduced/hid a lot of information on the original pages.
Home Page
Computer Help / Computer & Tech
Research Help
Hours & Locations
Group Study Rooms
Faculty Toolbox
Book a Librarian
FAQs
Student Achievement Center
Reflections
We were lucky that our team member, Dan, has a connection with the MATC Library's staff. Although users are very important to the designers, the needs and some constraints from the stakeholders should be considered as well.
In this project, we had a hard time finding students and staff from MATC to fill out our survey. I thought that we could reach some users through Facebook groups, but only one respondent was contacted via Facebook. The others were all contacted by Dan when she went to the MATC library. If the redesign is to be implemented, we should collect a lot more survey responses, which might require some assistance from the stakeholders. In addition, we also need to increase the number of user interviews since two users are inadequate to represent two user groups.
​
Based on the usability testing on our prototype, we successfully reduced the time needed to complete the assigned tasks. I believe that with a few more iterations of testing and refining, the final prototype could certainly provide a much better user experience.