A library website redesign to make it user friendly
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.
I worked on this project as an UX Designer. I was responsible for the user research, content design, wireframing, and prototyping.
UNDERSTANDING USERS: SURVEYS
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.
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.
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.
Changes: Scheduling page layout, Room filtering function, View policy through pop-up window, Shrank search bar and moved filters to left of search bar
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.