Library Website Overview
As the largest university library system in the Washington D.C. - Baltimore area, the University of Maryland Libraries serve 37,000 students and faculty of the flagship College Park campus with its eight-library system and online collections.
- 200,000 Monthly unique users
- 23 Sites and applications
- 1.2 Million E-resources
- 2 Million Yearly sessions
- 4.6 Million Library collections
- 390+ Databases
I joined the Software Systems Development and Research ⇗ (SSDR) department of the University of Maryland Library as a Graduate Student Assistant in Summer 2015, and I:
- Designed, developed, and shipped www.lib.umd.edu ⇗.
- Worked closely with engineers and product manager to transform requirements to features.
- Built wireframes, low-fidelity mockups, and high-fidelity prototypes.
- Conducted user research, usability testings, and interviews.
- Researched and presented new technology solutions for the library system.
- Participated in the new responsive design overhaul and UI pattern creation.
- Worked 2-year in an agile team with two-week sprint, JIRA, and Git flow.
Design is not only intuition but also research, data, testing, and evolution.
These designs aim to improve the experience of the website.
1. Information Bar
Problem: According to Google Analytics data, the most used features are library hours, quick links, and site search function; therefore a responsive bar across the site is needed to combine and present these essential features and information.
Solution: Info-bar is redesigned 1) to minimize space usage in mobile, tablet, and desktop view, 2) to display long hours text in a single line, 3) to show larger buttons for mobile users, and 4) to align buttons and text.
Try the new info-bar here: www.lib.umd.edu ⇗.
2. Main Menu
Problem: Mouse hovering triggers the drop-down menu instantly and causes user mistakes.
Solution: First, I did a case study on hover menu best practices ⇗. Based on findings, I proposed and implemented three potential solutions as interactive prototypes. All three implementations have been tested and rated by a group of selected website audience (librarian and student). The final implementation is the option 1 (with pink background).
Try the new main menu drop-down here: www.lib.umd.edu ⇗.
3. Library Hours Page
Problem: Need to display weekly library hours data for eight Library.
Solution: 1) Implement highlighting and rearrange the library order to let mobile users find the target library quickly (without scrolling). 2) Transform weekly hours table to a single library view; therefore, in daily view: we show eight libraries' hours; in weekly view, we show one library's seven-day hours. 3) Add date picker as a pop-up for mobile users and static for desktop users.
Visit hours page: www.lib.umd.edu/hours ⇗.s
4. Left Site Menu
Problem: 1) the old left menu cannot be used on mobile devices. 2) the item indicators convey vague information to users (is this a sub-menu title or single item?).
Solution: Research and review existing responsive left menu solutions. 1) add an expandable button for mobile devices. 2) add dynamic indicators to sub-menu titles. 3) reduce page loads by adding expandable sub-menus.
5. Facet Design Improvements
Problem: Some site has a surprisingly long facet list, like this screenshot on the right (click to enlarge). This facet view aims to provide fast selections and filters; however, it became counterproductive once the list is too long to browse.
Designs: based on the problem and some quick discussions with stakeholders and users, I came up with some mock-ups for them to evaluate:
Solution: We chose one solution from mock-ups and iterated it to include the following features: 1) using a scrollable area to replace the long list with a fixed height. 2) utilizing screen area by expanding facet list to a multicolumn list.
This feature has not been merged to upstream yet.
Hover mouse to play gifs:
6. Browse Page
Problem: Display category list on both desktop and mobile devices.
Solution: 1) use panel-like design with collapse feature to let mobile users find category faster. 2) use different column number for different screen size; this feature is achieved by using CSS 3 multiple column layouts.
Research is the key to creativity.
These research projects are in collaboration with the Library SSDR.
1. Usability Testings
The first usability report evaluated the usability of the old non-responsive version of the library website to provide guidelines for the design and feature of the new responsive version website. This report helped us to devise and improve info-bar, the main menu, the left menu, and discovery component in the new responsive website.
The second usability report focused on website usability of mobile devices. This test gives the team feedback on improving site structure, reducing searching entry point, and info-bar button size issue.
Both tests reveal problems of site structure, which is proven to be vague and inconsistent. Some department pages contain duplicate information, and the website is not student-orientated.
2. Exploratory Research - Bento Box Search
Users find the list of resources and terms for finding information bewildering: book, journal, article, database, resource, catalog, worldcat, guide, website, google scholar, institutional repository, digital collections, archives, etc. What they really want is a single search box which will return a single, relevance-ranked result set across all Libraries’ resources and more.
We proposed and demonstrated a new way to present various of data in the initial search page in this poster.
Poster is presented at Libraries Research and Innovative Practice Forum on June 8, 2016.
3. Information Architecture Map
From user feedback and usability tests, the team decides to improve the overall site information architecture. The following map is a completed map of the existing site.