THE SOMERS LIBRARY
UX | UI
An easy-to-maintain responsive redesign of a library website
Project Overview
BACKGROUND
The Somers Library wants its users who are comfortable using computers to use their website as their primary resource for library information instead of calling.
They want users to be able to learn about all of their “non-traditional” offerings from the website.
And they need a system that will allow non-designer/developer staff members to add content in the future while maintaining the site’s organizational structure.
TOOLS USED
PROJECT TYPE
TIMELINE
ROLES
80 Hours
4 weeks
UX Designer
UI Designer
Responsive Redesign
Student Project
Figma
FigJam
Adobe Illustrator
Canva
Google Drive
Google Sheets Sync
MAIN TASKS
Reorganize the information architecture
Create repeatable and sustainable modules for all content
PROBLEM STATEMENT
How can we organize the Somers Library website so that users on any device can easily find what they need and discover all that the library has to offer?
And, how can we help this library maintain this site well into the future?
The Process
1
2
3
4
5
6
7
1
RESEARCH THE USER
Current Design Analysis
First, I took a look at the Somers Library website to identify the areas that may be creating barriers to users in accomplishing their goals.
(1) The catalog search field lacks prominence and clarity on what can be searched, and competes with the bright yellow e-mail signup below it.
(2) It’s not clear from looking at the listed hours whether the library is actually open at any given time; a user needs to also check the list of closings, and if it’s a Saturday, decipher the footnote.
(3) The Somers Library offers many useful resources that aren’t books, from cake pans to musical instruments, but very few are mentioned on the homepage, so users are often unaware that they exist.
(4) Some of the unique offerings that aren’t books are featured on the website, but they’re hidden under “special collections” under “Books & More.”
Overall, the page lacks consistent headings, spacing, and typography.
The mobile site looks entirely different from the homepage, which may be confusing to users.
KEY TAKEAWAYS
The current site is not responsive which may confuse users who are increasingly using mobile devices to access the site.
The current site lacks an organizational structure that can adapt to new content.
It is difficult to discover content, especially the kinds that one may not expect to find offered at a library.
The current site uses a copious amount of clipart.
After analyzing the current website, I wanted to see if there were common patterns and solutions on other library websites that I could apply to the Somers site.
Competitor Analysis
I collected screenshots from library websites that serve different areas of the country at different levels, from citywide to local, and made notes on what I think they do well.
In studying other library websites, I found that many libraries also offer a wide variety of things to do and borrow, but when they had a standardized method of presenting their offerings, I did not feel overwhelmed as a user.
KEY TAKEAWAYS
The sites I found the most successful were the ones with very clear breaks between sections and tags/labels on all content.
There are definite design patterns among library websites, chiefly that the search function is always somewhere near the top.
Many of the sites, like the Chicago Public Library, seemed to modularize their content in a way that may make updating content easy for the library staff.
Many of the library websites I looked to for inspiration were designed by BibloCommons.
Now that I had an overall idea of what I was aiming for, I wanted to dig deeper into the specifics of what users and librarians need from a library website.
User & Expert Interviews
I interviewed both library users and librarians to discover their respective goals when using a library website and where those goals align.
I interviewed 5 library users ranging from “I go there every day” to “I haven’t been in so long I’m kind of intimidated.”
I also interviewed 2 librarians, one from the county system that includes Somers, and one who works as a law librarian.
KEY TAKEAWAYS
Librarians and users agreed that the most important things on a library website are the catalog search bar and the hours.
The librarians both mentioned how an ideal website allows patrons to get basic information from there instead of calling with questions because then they have more time to serve the library patrons that really need their expertise.
Users have become more dependent on their libraries for free digital resources, like ebooks and movie streaming, since the beginning of the pandemic.
A number of my interviewees described a strong emotional bond they had with their local libraries- one even described it as a “second home” during her childhood.
With this research, I now had an idea of who the Somers Library website needs to serve and how it needs to be designed around specific technical constraints.
2
DEFINE THE PRODUCT
User Overview
With this research, I mapped out who this redesign needs to serve and who it could benefit.
PRIMARY USERS:
THE COMPUTER-COMFORTABLE USERS
Success Looks Like:
Easily find library information and access services online without having to call or visit.
Current Challenges:
It’s difficult to find basic information on the site, and it’s even harder to get an idea of all that the library offers.
SECONDARY USERS:
THE LIBRARY STAFF AS SITE ADMINISTRATORS
Success Looks Like:
More staff time helping the people who either aren’t comfortable with or can’t use the internet to find information.
Current Challenges:
Since there are few rules for how content is presented and multiple site administrators, it is difficult to maintain consistency and cohesion across all pages.
Constraints:
Any system that is put in place is likely to remain for a number of years and go through multiple administrators.
BENEFICIARIES:
THE PHONE-ONLY USERS
Success Looks Like:
Getting to speak on the phone with a librarian as soon as possible.
Current Challenges:
Since it is difficult to find information on the site, these users are competing unnecessarily with the computer-comfortable users for time with librarians.
KEY TAKEAWAYS
The primary users of the site are comfortable using the internet for finding information, and typically only call a business for information after trying the website first.
While there is a large retirement community in Somers, they are not the primary users of the website. However, they may still benefit from an easier-to-use design.
Librarians have limited time to help patrons, they want to be able to dedicate it to those that need it the most.
Somers is home to a large retirement community called Heritage Hills where “originally, at least one member of each household had to be at least 40 years old, with no one under 18 allowed to live in the development.”
Now having a general overview of the users, I wanted to get more specific about my primary user.
Persona
I created a persona based on my user interviewees to start defining the parts of the site that needed attention first.
Deb has gotten pretty good at navigating the Somers Library website but is frustrated that it takes so much work, and sometimes checking different sources, to find the information she is looking for.
KEY TAKEAWAYS
Deb doesn’t want to have to call the librarians with her questions- she’d rather be able to find answers for herself on the website.
Deb needs to be able to see what’s new and what’s going on at the library at a glance.
Deb uses the library for so much more than just borrowing books- for her, it’s also a community center, a workspace, a social support network, and place to learn.
Deb would have worked on this beautiful quilt that hangs in the Somers Library.
With a better idea of my user, I now wanted a better idea of how her goals fit with the goals of the library.
Project Goals
I created a Venn diagram to see where the user goals met the library’s goals, and what is possible within the technical restraints of the library.
The overarching goal of this redesign is to create some sort of system that allows the library to autonomously update and add content well into the future without upsetting the organizational architecture of the site.
KEY TAKEAWAYS
The site needs to be easily updated by library staff, not developers.
Any system that is put in place is likely to remain for years, so it needs to be able to adapt to the future needs of the library.
The site needs to provide a home for everything that the site currently offers and allow room within the navigational structure for new kinds of offerings in the future.
Libraries have always had to adapt to new technology and types of offerings.
Shown: A GIF from Reading Rainbow of LeVar Burton and some cool kids dancing while listening to records at the library.
Knowing that in this redesign I would need to find a home for everything on the website, I first had to figure out what “everything” means.
3
ORGANIZE THE INFORMATION
Site Audit & Sort
To find a home for everything on the Somers Library website, I started by going through every page and documenting what I found.
The first step was a site audit where I created a sticky for every feature on the site, color-coded by where they were located.
SITE AUDIT
The next step was to sort the stickies in a way that made sense to me. This helped me uncover areas where I needed to do more research to figure out where they should live in the information architecture.
SITE SORT
Site Map
Without being sure where some things should live in the navigation, I created a site map so that I could start testing the information architecture.
SITE MAP FIRST DRAFT
The biggest change I made to the architecture was adding the “More than books” section header, which can encompass everything the library offers, from video games to bird-watching kits, that aren’t books.
KEY TAKEAWAYS
The biggest question that came out of the site sort was where to place library services and the library’s non-traditional offerings, like cake pans.
Another question was what the main “call to action” of the site is, if there is one.
I would also need to figure out what content needed its own section on the homepage, and what could just live in the navigation.
This project started with a wifi hotspot that my mom’s friend had borrowed from the Somers Library. I loved that patrons could borrow items like this that one might not expect to find at a library, but I couldn’t find any information about them on the website.
With these questions, I turned to a treejack exercise to look for answers.
Treejack
I created a treejack survey where I asked participants to tell me where they would find certain items or services that I felt could fall under multiple headings in the navigation menu.
Participants also seemed to have trouble agreeing on where certain items belonged- with “Library Services” and “More Than Books” splitting the responses on a number of questions.
KEY TAKEAWAYS
The question of “where should the cake pans go?” was still unanswered after my treejack, which told me I might need to keep working on my menu headers.
The way offerings are shown on the homepage should make them interchangeable within the design- for instance, under “for kids,” librarians should be able to show a book, an event, and a digital service using the same layout.
Same.
While I was still unsure about my menu headings, I decided to push ahead, hoping that I would be able to get some clarity while testing my first prototype.
4
GUIDE THE INTERACTION
Wireframe Sketches
Now I could start sketching to work through some of my ideas before starting my prototype.
While sketching, I focused on how to include all of the content the library would want to feature while making it modular and interchangeable.
KEY TAKEAWAYS
I would create a modular card system to present each item featured on the homepage.
These cards would ask for the same pieces of information for each type of offering, to make it simple to add items to the site by the librarian administrators by just filling out a form.
The header would feature the catalog search bar and that day’s hours, while the footer would feature an expanded site navigation like the one on the current site.
Modular card systems and libraries go way back.
With my ideas on paper, I now wanted to make sure that users had multiple ways to complete a task on the site before mapping out my wireframes.
User Flow
I chose to map out the user flow for finding and reserving a cake pan since nontraditional items would require the most avenues for discovery.
For non-traditional offerings, a user like Deb will need to discover them first on the homepage, but may use the navigation or search to find them on a return trip.
KEY TAKEAWAYS
The things users would not expect to be offered at a library need to be featured on the homepage.
The card system will have to encompass both individual items (the t-rex cake pan) and larger categories of items (cake pans).
The county-level system is what currently tracks holds on books and movies, so the library may need its own hold system for items like cake pans and board games.
The “Dino-Mite” t-rex cake pan available at the Somers Library is actually pretty cute.
With my sketches and user flow, I could now start to bring everything together that I had learned so far.
Responsive Wireframes
I started with designing the wireframes for flexibility; the homepage can include a wide range of categories in any number while still maintaining its organizational structure.
DESKTOP WIREFRAME
TABLET WIREFRAME
MOBILE WIREFRAME
KEY TAKEAWAYS
The card system should allow the librarian administrators flexibility to add and move around content.
Users who want to browse the site can save content using a bookmarking feature.
Some things, like the “site map” in the footer are kept to help patrons transition from the old site.
I used real book titles with long names like this one to make sure I left enough space in each item card.
Now that I knew the basic structure of the site, I could now focus on how it should look and feel. Thankfully, my librarian interviewees had given me solid advice about that.
5
DESIGN THE INTERFACE
Mood Board & Style Tiles
Based on my librarian interviews, I learned that the interface should evoke feelings of calm rather than excitement; essentially reflecting the experience of being in the library building itself.
Since the Somers Library was built in the early 80s and the logo is in the “neo-Bauhaus” style that was popular at the time, I looked to that era and its graphic design for inspiration
MOOD BOARD
To make the logo more versatile I created a vector version using Adobe Illustrator and added two styles featuring the name of the library.
LOGOS
To evoke feelings of calm and quiet while sticking with the existing design assets, I used mostly lighter versions of the colors featured in the logo.
COLORS
I chose Urbanist as the font because it struck the right balance between readability and cohesion with the neo-Bauhaus style that served as my inspiration.
TYPOGRAPHY
KEY TAKEAWAYS
The goal of the interface design is to reflect the calm atmosphere of the library.
The color palette and the logo are kept the same because they fit well with the library’s identity and they’re familiar to users.
The typography was chosen for both readability and style; it looks close to the typography styles that were popular when the library was built.
“A library website should be more ’Mr. Rogers Neighborhood’ and less ‘Sesame Street.’ ”
- Westchester Librarian
With my style tiles, I could now build a prototype and start testing.
6
TEST THE ASSUMPTIONS
Affinity Map
I started testing with the hope that their feedback would tell me if my design decisions were successful and give me some direction on how to organize the navigation.
I tested the mobile version of the site with 7 users, and found a lot of similarities in their feedback, particularly on the interface, the interactions, and the navigation.
Testing the Interface
The design choices that I thought would be seen as fun and retro were actually coming off as cold and unwelcoming.
BEFORE
Because testers said that the site felt stark and unwelcoming, the heavy strokes were swapped for light translucent outlines and drop shadows to give the site a lighter and more welcoming feel.
AFTER
Testing the Interactions
The clever things I was trying to do with the bookmarks and buttons meant users couldn’t tell what they were for.
BEFORE
In the item cards, users shared that the bookmarks (top right) were not registering as bookmarks, and the buttons (bottom) were not registering as buttons.
AFTER
With both the buttons and the bookmarks, it became clear that the design choices I had made for purely aesthetic purposes needed to be sacrificed for usability.
Testing the Navigation
Testers suggested combining the frequently-confused categories while making accessibility features easier to find.
It turned out that ”Library Services” did not need it’s own header and could be combined with “More Than Books,” but that “Accessibility” merited its own place in the menu.
KEY TAKEAWAYS
The response to the prototype’s interface told me that I needed a more soft and airy look to help users feel welcome.
“Creative” interaction styles were swapped for those that follow more familiar design patterns.
Making accessibility its own menu item and putting all non-book offerings in their own category may have solved the issues I was having with the information architecture.
Testers also wanted to know why there is a picture of an elephant on the homepage.
With the help of my testers, I could now make priority revisions to the home page and plan out my next steps.
7
THE RESULT AND NEXT STEPS
The Result
DESKTOP
TABLET
MOBILE