Skip to content


University of Maryland Library Website

2015 - 2017

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

My Roles

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:

My role is the combination of UX design, development, and research.
  • Designed, developed, and shipped ⇗.
  • 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.
  • Contributed 20k lines of JavaScript, HTML, Java, and CSS code.


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

Learn More about Information bar redesign.

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: ⇗.

Info-Bar Redesign Info-Bar Hour Text
Info-Bar Redesign

2. Main Menu

Learn More about Main menu behavior redesign.

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).

HTML Prototypes: ⇗
Prototypes Code: ⇗

Try the new main menu drop-down here: ⇗.

3 options have been implemented as interactive prototypes for user testings.
Prototype 1 ⇗ / Prototype 2 ⇗ / Prototype 3 ⇗
Hover mouse to play gifs:

3. Library Hours Page

Learn More about Library hours page redesign.

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: ⇗.


Desktop user flow of hours daily and weekly page Mobile user flow of hours daily and weekly page User flow of hours daily and weekly page.

Desktop user hours weekly view Mobile hours weekly view Weekly hours view for desktop and mobile devices.

4. Left Site Menu

Learn More about Left site menu redesign.

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.

Visit Engineering and Physical Sciences Library or About.

left menu redesign
Redesign the left menu to improve user experiences.

left menu redesign
Reduced page load times in the new left menu.

5. Facet Design Improvements

Learn More about 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:

Facet demo. The new facet design.

6. Browse Page

Learn More about Browse page redesign.

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.

Visit the Maryland Maps browse page or the Database Finder browse page.

Old New
Old (left, non-responsive) vs. New (right, responsive)

Browse Page redesign sketch Browse Page redesign Browse Page Button redesign Browse page redesign, view live here: Maryland Maps - Browse Page ⇗


Research is the key to creativity.

These research projects are in collaboration with the Library SSDR.

1. Usability Testings

Learn More about 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.

1st Usability Report ⇗ / 2nd Usability Report ⇗

2. Exploratory Research - Bento Box Search

Learn More about 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.

Visit the Bento Box Search Project ⇗
Bento Box Discovery Poster ⇗

Bento Box Discovery Poster Showcase 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.

Website Information Architecture Map
Website completed information architecture map, view interactive version ⇗.

Thanks for Scrolling!

Special thanks to my team members ⇗ at the University of Maryland Library.