New Library Website: Card Sorts

Previously, I discussed the navigation and faqs for the new website. This time we’ll go over the card sort process to organize those FAQs. I had approximately 50 questions to organize in a semi-logical way. The questions could loosely be arranged into groups. For e.g. all the website account questions went together. All the fax related questions were made to be together too. So that is the first hierarchy which I grouped things under. These headers had to then be grouped in a few different sections. The particular page we built uses tabs to direct you to more specific information.

https://www.darienlibrary.org/faqs

Courtesy of Darien Library

I recruited three people to help with the card sort. Each header was written onto strips of index cards. I also brought a stack of blank ones so that new categories could be added. Each session was approximately 30 minutes. It was a little tough not offering commentary, but I did ask them questions about what they were thinking as they went along. As you’ll see, one person’s card sort was so perfect that I pretty much lifted it entirely for the website itself. Another person didn’t quite get the exercise so their help wasn’t quite as useful. The other repeated, “Keep it simple” multiple times as she worked. Once things were sorted and organized, I’d then ask them about the phrases. Was there a better term that could be used? I believe three headers were changed thanks to this exercise.

Questions
This is for the FAQ page as gathered from staff feedback on the most common questions they answer for patrons. On the new website, I need to organize these questions into common categories. Your task is to do the organization in this workshop. This is called a card sort. Two other people will also do this activity.

Why do you put X into that category?

Should anything’s title be changed?

What would you call these categories?

Photos

Card Sort 1 Courtesy of Darien Library

Card Sort 1
Courtesy of Darien Library

For the first card sort above, I met with our longest term staff member (40 years now?). She was working on the reference desk at the time, thus our limited amount of room to work.

Card Sort 2 Courtesy of Darien Library

Card Sort 2
Courtesy of Darien Library

The above card sort produced my favorite results. You’ll notice that I used the same category titles that was suggested. This person practically did all the work for us!

Card Sort 3 Part 1 Courtesy of Darien Library

Card Sort 3 Part 1
Courtesy of Darien Library

The results of this card sort (image above and below) was looking for fewer main categories and wanted greater simplicity.

Card Sort 3 Part 2 Courtesy of Darien Library

Card Sort 3 Part 2
Courtesy of Darien Library

New Library Website: Navigation and FAQs

Navigation
Our website’s main navigation was decided primarily in a staff meeting. My boss coded it live, dropping into the files to change terms and order on demand. It was quite impressive — and you could see it on the faces of the staff. We then discussed which icons to use. I was late for the meeting since I had a one-on-one pre-scheduled, so I don’t know how the meeting was introduced or set up.

We then spot-checked it with some patrons to see if it made sense what we called things and how items were grouped. The comment I heard repeatedly was, “Oh. If I just look at this and read it, I can see exactly how it is organized.” This isn’t exactly Steve Krug’s Don’t Make Them Think, but patrons were quite excited about seeing the pattern.

Courtesy of Darien Library

Courtesy of Darien Library

The navigation on our new site is entirely different from the old. Our new site is mega menus and added different ways to think of the information. For example, we have under Services, pages designed for specific patron types/needs: business, parents, teachers & schools, students, job seekers, and home-bound. On the old site, the main nav was My Account, Catalog, Events, Services, Kids, Teens, Community. Then you’d find some sidebar menus to go deeper. The new site goes for landing pages. I wrote the content to be brief as possible and then if needed, direct you to a deeper level page.

FAQs
The FAQs page was born in that big staff meeting. I wasn’t sure about it. If we did our job right, we wouldn’t need to have this filler page. I had even recently read a tweet by someone big name in information architecture proclaiming that stance. But staff insisted it was a wise move. The concession I wrangled out was that we not call it FAQs in the top menu but spell it out. I’ve been on the internet for a long time, but FAQs aren’t as popular of a term as it was in the early 2000s!

https://www.darienlibrary.org/faqs

Courtesy of Darien Library

I needed information to put together the FAQs page. So I sent an email out to staff asking them to put the questions they hear most often under their department name in a shared Google Doc. I let staff know that they didn’t have to bother reading what other departments wrote, I’d do the weeding of duplicates myself. It took a little prodding, but I got the responses. :-)

If you ever work with me, you’ll see that I live and die by bullet points, so I made nice little bulleted lists and organized the questions a little bit. Then I struck them out as I answered them in the FAQs. If I had a question, I’d write down what confused me and then date it. When I was done with a department’s section, I’d then email them for clarification on what they had meant.

Then began the work of answering the questions and weeding out ones which didn’t apply to the website. I hope I used friendly language to get to the heart of the question while also not being too intimidating. For e.g., for the question of “Why do I have a fine on My Account?” I wrote:

Oh no! We’re sorry to hear that. Fines are caused by three things:

  • Item not returned on time
  • Item is lost or returned missing a part (like a CD)
  • Item is damaged (this is a replacement fee)

The Library attempts to keep you aware of when your items are due by:

  • Offering a checkout slip which lists the due date
  • Sending you email reminders
  • Listing your checked out items on your website account

If you need a receipt of what you checked out, please see the Welcome Desk.

Stats show that the FAQs is one of the most popular pages on the website. This confused me a bit until I realized that it’s the help link on the account login page. So far I’ve only had to go in to add more information to the page once since June 1st. However, just because we had a lovely batch of questions answered doesn’t mean it was easy to figure out how to organize them! In my next post, I’ll write about the card sort process.

New Library Website: Feedback Form and Inspiration

Inspiration
I’m still not feeling up to doing the full write-up, but here are some shots of the final library websites I choose to inspire our current design. How many do you know? I mounted these onto a huge corkboard and displayed them at our visual design meeting. My colleagues got distracted by Skokie’s website and really honed in on that design. I choose these websites after completing the last feedback and “hopes and dreams” interviews.

inspiration_01

inspiration_02

inspiration_03

Feedback
As you can see in the image below, those interviews yielded nine pages of notes. That is 228 specific comments. I know who made which comments, but I hid the column from the team indicating who precisely wanted it. The spreadsheet is a Google Sheets, but I locked the hidden column so no one else could see it. I choose this route to give our colleague reviewers a sense of privacy so they would speak candidly. At no point did our team encounter an issue where they specifically needed to know who wanted something done. Instead I would stress the points which were repeated as being an area which we needed to address.

feedback_on_original_and_hopes

I printed out copies of the feedback and passed them around the table for review. The columns were:

  • Priority
  • Category: Website, Catalog, Demographic Info, Website & Catalog, General, Website & General
  • Type: Dream, Easy, Repeat, Requirement
  • Comment
  • Elaboration
  • Notes
  • Assigned To
  • Status
  • Department

I then color coded it somewhat to show what were of immediate concern (red). Offhand, I know that the new site addressed concerns about a single home for events and giving people a way to indicate interest in events. Otherwise, I’d have to sit down and see how many of the dreams we responded to.

Photo in the Newspaper

Photo by Amy Laughlin

Photo by Amy Laughlin

Not my best work ever made in the hectic weeks ahead of the website launch, but the photo plus the photo manip is my handiwork. :-)

Other potential backgrounds was various racetracks, the Sochi Olympics, and other temples. The image I used is by Sam Valadi under CC BY 2.0 with the main change being mirroring it and using just the top portion.

Courtesy of Darien Library

Courtesy of Darien Library

LJ Article on the New Website and Catalog

Library Journal wrote a great article about our new website and catalog. They interviewed my boss and I’m happy to say that the article focuses on the real star of the show: SOPAC3, the catalog.

SOPAC 3 eschews bibliographic record-level search, instead using its own works-level concordance. When patrons conduct a search, rather than retrieving pages full of separate, individual records by format—To Kill a Mockingbird the book, the audiobook, the ebook, large print, or e-audiobook, for example—each title is displayed as a single record, with clickable tabs enabling users to check the location and availability of each format.

“I think what this whole project has really confirmed for us is that works-level catalogs are what lay beyond the event horizon, and that the bibliographic record, as a top-tier discovery entity, has outlived its usefulness in a digital, multi-format age. The work record is our path forward,” explained SOPAC developer John Blyberg, Darien’s assistant director for Innovation and UX.

Source

I’m immensely proud of the work John and James did with the catalog. I’ll be doing some write-ups about the process of the website site of things (John built it himself instead of using a readily available CMS) at some point. The last few months have been really focused on the new site so I’m pretty drained and tired. Launching it was only the first step. Maintaining it and keeping it well-organized on the backend will be an on-going process. My write-ups may be a little slow to appear since Michael Schofield and I are working on our book on service design.

New Library Website Launches Tomorrow: The Numbers

Courtesy of Darien Library

Courtesy of Darien Library

I’m fairly exhausted right now so I can’t put down too much right now. However, some behind the scene stats:

  • 4 years and 11 months in the making — since my hire date
  • 12 months and 27 days of active development work
  • 4 people to build it
  • 10+ staff members to add events and booklists
  • 75+ pages at launch
  • 100+ events at launch
  • 50+ booklists at launch
  • 15+ UX meetings
  • 6 public training classes
  • 6 user tests in the past two months
  • 300+ emails over the past year on this project
  • 55+ staff photos on the website
  • 165 staff photo samples
  • 300+ total staff photos taken

Official New Website Announcement

Courtesy of Darien Library

Courtesy of Darien Library

This is it! We’ve told the world about us and what we’re doing. Check out the frustratingly small preview image of our new catalog. My boss told me about book recommendations now being baked into the works level (that’s right — works level! Thanks, James for getting this together). He hadn’t finished uttering the words when I spun around in my chair and slammed my fingers to the keyboard to check it out. Then I ran about the building showing my coworkers. Our new catalog is magical.

Pro-tip: it’s very awkward to fangirl anyone to their face, but I really can’t contain my delight with the catalog. The new website is cool, but that catalog…!

The press release from Darien Library

Darien Library is pleased to announce the forthcoming launch of its new website on June 1, 2016. The new website is designed to be a user-centric portal to library events, services, and materials. The new website will launch with SOPAC3, Darien Library’s ground-breaking new catalog system.

The new website overlaps with the catalog and provides a feature-rich patron account experience that includes integrations with the website’s event calendar. Users will be able to register and RSVP for events and keep track of their library activities from their profile screen. The system now also seamlessly includes both physical and digital checkouts on the account page, giving users the information and tools necessary to manage all of their circulation activity. Users are given direct control over their checkout histories and will now have the ability to maintain a wish list of items from the catalog they may want in the future. Numerous other features have been introduced, such as integration with Darien Library’s eCommerce system, Envisionware, so that users can now check their account balance in addition to their fines and fees.

The new system introduces linked accounts. Linked accounts allow family members to link to other family members’ cards so that they can, for example, conveniently see what their children have checked out without having to log in separately. This is a feature that was designed and introduced as a result of direct patron feedback. We believe this will make the web experience for parents and caregivers much easier.

Darien Library has adopted a completely new paradigm when it comes to the new catalog interface. SOPAC3 abandons the bibliographic record level search and uses its own works level concordance at the discovery layer. From a user experience perspective, this is a game changer because it organizes all content types for a title into a single record. No longer will a user see one record for a book, another record for large type, a record for each ebook vendor, and yet another for audiobook. They will see one result with a simple, easy-to-use interface to select the format of their choice. E-Content from Overdrive and Bibliotheca (formerly 3M) can be checked out or placed on hold directly from the catalog with a single click. Work views feature a “look inside” option for previewing titles as well as embedded audio excerpts. Integrated book recommendations are powered by Zola Books’ “Bookish Recommends”.

The website has been designed to be clean and responsive so that it may be viewed on mobile devices. The new website has been in planning for several years and in active development since October 2015. Design decisions were influenced primarily by direct member feedback. The User Experience department at Darien Library wants the new site to feel natural, be a pleasure to use, and become a seamless companion to the library experience.

New Library Website: Staff Photos Finished

I wrote earlier about learning how to set up lighting for our staff photos. After about 30 hours of work in taking the photos, sending them to staff to select their best shot, retake some photos, process the photos, and finally upload them to our staging server. Here is the fruit of that work. You’ll be able to see it in full size very soon.

The stated objectives of this project was to take photos which share a common background to look more uniform on the site. I decided that people should be more or less in the same pose.

Courtesy of Darien Library

Courtesy of Darien Library

Lessons Learned
I set up the photo studio alone, so the lighting is best for my own skin tone. This didn’t always work so well on others. Some photos turned out orange. I’d drag the main light back and forth to try and lessen the effect. After I attached the laptop to the camera so my colleague could see the photos as they actually are, I was able to straighten this out a bit. However, I still had to do some color balancing to fix orange casts on some photos.

At my current age, I’m still wrinkle-free so the lighting fell smoothly across my cheek. For some colleagues, the lighting spilled across their face to highlight their smile lines in an unflattering fashion. Perhaps I shouldn’t confess to this mistake of mine, but it was a serious issue that had to be lessened in Photoshop afterwards. I have a strong belief in treating others’ photos the same way I’d want my own to be handled: if it’s unflattering, don’t post it.

The same pose does not work for all people. I had people lined up so their toes pointed in one direction, rotate their heads to another, and then move their eyes to the camera. This pose did not always show people to their full advantage. I won’t correct this now, but there are a few people whose photos I’ll retake post-launch in order to do better by them.

I was hoping for a tool that would make it easy to batch resize and crop the final photos for the web. No such thing exists it seems. So I took several crops of my boss’ photo and sent it to him to choose the one he liked best. Then I set up guidelines in Photoshop (top of head, chin, left edge of face) from that. When I pasted in a new person’s photo, I’d freehand resize it till it fit those dimensions. This worked in most cases, but the tilt of some people’s heads or their fluffier hair may have thrown this off-kilt. In those instances, I tried my best to accommodate and make the photo work for them.

Finally, I could not tell the final results of the photos until I saw them all together today. Then I reopened some files and made final adjustments: contrast, vibrance, color correction, curves, and levels in order to create a pleasing equilibrium across the photos. Some people’s photos look wonderful on their own, but when paired with others, they needed a little more oomph in some way.