VPL Redesign

A library website redesign to make it user friendly

About the project

This is a class project. Four User Experience design students in Pratt Institute conduct redesign of Voorheesville Public Library website from Aug, 2016 to Dec, 2016. The goal of this project was to eliminate redundancy and thereby streamline navigation while catering new website to user needs.

What I did

I worked on this project as an UX Designer. I was responsible for the user research, content design, wireframing, and prototyping.

This is the current website of Voorheesville Public Library.


Observation, Interviewing, and Questionnaires

To fully understand users of Voorheesville Public library’s website, we started with user research. Surveys were conducted and recorded both online and in person by using observation, interviewing, and questionnaires

4 Findings and Recommendations

From 4 observations, 8 interviews, and 26 questionnaires, we shared several common findings from our surveys and listed how we will respond to these findings in our redesign

Persona and Scenario

Once we felt we had an understanding of our users, we each created personas and scenarios to embody a library goer in each designated age range.


Five Websites to Compare

We conducted competitive analysis to learn from others. We chose five websites containing goals and features that we wanted to see reflected in our own website. As far as site layouts went, these institutions most embodied the look and usability that we hope to create in our site while still providing a variety in feature choices to consider.

Eleven Dimentions to Compare

In order to better compare these websites, we use eleven dimensions to compare including:
Informative home page, Types of navigation, How the page is organized, Choices in labels, Location of search feature, Readability, Depth of content, Appearance or color choices, Length of homepage, Calendar choices, Social media location.

Nine Findings from Comparison

Create an informative homepage displaying featured events using clear navigation
Display subcategories when a user hovers over a category
Make filter functions available
Locate social media icons at the bottom of the page
Use blocking and fonts to create hierarchy
Provide a variety of media outlets to draw interests
Be aware of font and color scheme when considering readability
Distinguish labels with similar wording and avoid redundancy in links
Make search function accessible on every page


In order to remove redundancy and eliminate excessive content while clarifying navigation and thereby cutting search times, we create a new site map by using card sorting and tree testing with Optimal Workshop.

43 Cards for Card Sorting

We consulted the “More” index on Voorheesville website and used this list as a starting point from which we condensed, omitted or added upon as was necessary or appropriate resulting in 43 cards. We then use Optimal Workshop as a tool to recruit participants.

Card Sorting Result

We surveyed 10 people who grouped our cards into an average of seven groups. We used these seven groups, and the most common or similar labels in our first version site map.

First Version Site Map

We group information in the site into 4 categories including 7 groups. We invented title of each group and category to make the information in it easy to be found in tree testing.

6 Questions for Tree Testing

There were a few cards that were obviously not as easily placed by our users, and we made these items the focus of our tree test tasks. We created six tasks along with a few follow-up questions for the eight people we surveyed.

Tree Testing Result: Task 3

50% participants failed in this task, their mental model to find “Interlibrary Loan” is to go to “Catalog” menu

Tree Testing Result: Task 4

50% participants failed in this task, their mental model to find “Support the library” is to go to “Contact us” menu.

Revised Site Map

We consulted the paths users chose and used the findings to update our site map.
We move “Interlibrary loan” in to “Catalog” menu.
We break “The library” menu and keep “Contact us” and “About” menu, while remove “Stay connected” menu.
We move “Support the Library” into “Contact us” menu, while move social media links, “Hours”, “Address and Directions” into “Homepage”.


Have the revised site map, competitive analysis, and user’s mental model in mind, we created two paper prototypes, one desktop and one one mobile, to do the usability test of our redesign. We designed one task for each prototype and define the task flow before we conducting the test. Each of us conducted 2 user tests by using the prototype and asked questions after each test.

Desktop Task and Pages

On the day before Thanksgiving, you have a group assignment due. You want to schedule a meeting space in VPL for group discussion. Schedule a meeting space on November 20 for one hour and check their room policy.

Desktop Recommendations

Mobile Task and Pages

You find you have a day off on November 23. Your friend recommends you to find an interesting event held in VPL and join together. Find an event that interests you on Nov 23 and share it to your friends.

Mobile Recommendations


Desktop Version

Changes: Scheduling page layout, Room filtering function, View policy through pop-up window, Shrank search bar and moved filters to left of search bar

Mobile Version

Changes: Homepage layout, Add “see more event” button, Add changing month tab on calendar


In this class project, we focused on the information architecture of Voorheesville Public Library website so that most of user research we have done were aimed at create meaningful information architecture for this website. The future design of this website should be focused on more website features, workflows, and also visual design by using user research and other research methods.