Top
 

Library Website Redesign

Redesign of a library's website to improve user experience on the features of room renting and event searching

 
 
 

About the Project

This is a class project for course Information Architecture and Interaction Design. The project aimed at redesigning the site of Voorheesville Public Library to provide a better user experience to library visitors on both desktop and mobile device.

My Role

We worked as a group of 4, and I was responsible for conducting user research, paper prototyping, wireframing, and high- fidelity prototyping.

 

People love libraries.

Then why not loving library websites?

VPL-challenge.png

Current Experience

 
Homepage5.png
 

We tried to identify what problem a user would be facing with a selected task flow on the desktop website. On the homepage, there is a navigation menu on the top and many side links on the left side, which may cause confusion and decrease efficiency for users to find the information they need. So, how to better organize the menus on the homepage and increase the findability of a certain feature?

 
 
UserFlow.png
 

Understanding Users

 
 
flat-faces-icons-circle-18.png
“I usually go on the school library website to find a required book I need to read for my course, or maybe search for an article to help me with my research paper.” —Jennifer
 
 
people-4.png
“My kids love going to the story hour at our local library. They are sick of the story I tell and I’m like, fine, maybe I should stop telling the stories from my Grandma’s generation.” —Beatrice
 
 
people.png
“Some of my neighbors have told me that they had too many used books at home and they felt like these books could be in better use. Why not having a used book donation using the library’s meeting space?” —Ivy
 
 
 

Design Insights from User Research

  1. Some items, previously identified as content pages, are more practical as features.
  2. The website should have a clean and professional look.
  3. Text elements should have a bigger font size to be able to be seen and clicked easily.
 

Competitive Analysis

 

Five library websites containing goals and features that we wanted to see reflected in our own website were chosen. 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. After going through and comparing our sites using eleven dimensions and further analysis of these dimensions, we were able to draw nine findings that will influence our website’s design.

 
 
Competitive.png
 
 

Major Insights from Competitor Websites

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

Structuring Content

In order to increase the findability of features, we conducted card sorting to let the users decide the organization of 43 content menus. An information architecture was constructed after the card sorting, and we developed 6 tree testing tasks to evaluate the usability of the information architecture. Some more findings were uncovered to prompt more ideas on a final site map.

 
Cardsorting.png

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. 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 information architecture.

 
TreeTesting1.png

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 testing tasks. We created six tasks along with a few follow-up questions for the eight people we surveyed. The results were concluded based on the success and failure rate of each task to identify the structure of information architecture. If a task had high success rate, that task flow was considered to be fluid, and vice versa. Several revisions were made on the task flows that had high failure rate and a final site map was established.

Updated Site Map

 

An updated site map was constructed based on the card sorting and tree testing results. The side links were removed and the content menus were reorganized into the top navigation menu on the homepage to reduce redundancy. By reevaluating the information architecture, a more effective site mapping was created for an initial prototyping step.

 
FinalSiteMap.png

THE DESIGN

VPL photo.png

Paper Prototyping

With the final site map, the competitive analysis findings, and the user’s mental model in mind, we came up four major design solutions to redesign the website.

  1. By reorganizing the navigation menu on the page based on the site map, the findability of a certain feature could be increased.
  2. Dropdown menu could be utilized to substitute with the side links in order to provide more space and make the page more visually appealing.
  3. Instead of opening a new page, use hover function to display selected content.
  4. Using filter function to help users select options would effectively maximize site space and increase flow efficiency.

We then created two paper prototypes, one for desktop and one for mobile. We created one task for each prototype and define the task flow before we conducted the test. Each of us conducted two user tests. Pre and post questions were documented to provide findings for our redesign. Recommendations on how these prototypes should be improved were discussed after all user tests have been completed.

 
 

Desktop

DesktopPaperPrototype.png
 
 

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

Artboard 5.jpg
 
 

Mobile

 
MobilePaperPrototype.png
MobilePaperPrototype Copy.png

User testing task: You find that 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 November 23 and share it with your friend.

 

Desktop

 
Wireflow_Desktop.png
 

Mobile

 
WireflowMobile.png

Final Prototype

Back to homepage or view other work below