Collapsible FAQ

A little piece of work which I’m fairly happy with is this collapsible FAQ for our new WiFi page. It’s just some Bootstrap.

Closed:

Open:

It took a few variations to figure out the best layout for it. Originally I had screenshots from a Mac, PC, iPhone, iPad, and Android phone. Then I downsized and dropped the iPad. It’s listed first here since it’s the most common iOS for our users.

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.

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: Request a Study Room Form

I’ve received permission to blog about my work on our library’s new website. We kicked off this project on May 5, 2015. Later I’ll write more about what we’ve been up to till now. For tonight, let’s look at the Request a Study Room Form.

Features:

  • If you enter a card number which doesn’t start with 21517, you get directed to a Whoops! page.
  • If you are a ***** card holder, you can then make your reservation. You may not request any date in the past, further than 30 days out, today, or on any day the Library is scheduled to be closed through the end of 2018.
  • Shows the Library’s hours when you go to enter your time request.
First Screen

First Screen

The form is built using JotForm as introduced to me by Andromeda Yelton. The theme is customized by me to match our new website’s design aesthetic which is built on top of Bootstrap. JotForm allows me to create a highly customized theming, conditional logic, and filter submissions to the appropriate person. This particular form is only going to our reference department, so that is straight forward. I have additionally customized the submission form email so our logo is in the header. JotForm’s customer service is also top-notch. I was having trouble getting the conditional logic to work the way I wanted it to and their responses were fast.

If you're not a resident, you see this message.

If you’re not a resident, you see this message.

We’re pretty strict with who can reserve study rooms in advance. They’re a really hot commodity. The conditional logic here looks for the first few numbers of the card and if it doesn’t match our system, you get the above message. The wordsmithing is my own, but will likely be improved by the Head of Reference later.

The calendar limits what a user can do.

The calendar limits what a user can do.

If you get through the screening process, you now see the reservation form. Initially, I had wanted the form to be hidden based upon conditionals, but the “Whoops!” message showed up even before you got to the end of the line. So I broke this form into three sections: library card number, Whoops!, make a reservation request. This worked out beautifully. I then hid the back/next buttons so people couldn’t “escape.”

Anyways, the calendar here shows that you can’t reserve for today (CSS trick) nor can you book more than 30 days out per our rules. It’s a pretty sweet setup. The weakness here is that I can’t limit you from requesting a time when we’re closed. The workaround method is that when you get to the time, a little hover shows up with the Library’s hours.

Once the form is submitted, you are told that you’ll receive a response by tomorrow. On the staff side, you get the little submission form which shows all the in-take information. We then make the reservation using an Outlook calendar.

Story Bible Website Development Project: 2

Last week, I wrote about a project I’m working on for myself. Since then, I got answers back to some of my questions, so I eliminated the USP plugin. The $40 pro version would let me submit multiple posts from the same form, but it would not reload the form without completely reloading the full page. That’d be annoying for what I’m working on.

While doing my research, I got a tip about Caldera Form. It would give me these abilities:

  • Create a custom form with ease
  • Submit the new content as the content type (page, post, custom) that I wanted
  • Would reload the form without reloading the entire page
  • Accepts multiple submissions from the same form

I’m happily testing it out though I did find some limitations:

  • Has limited support for taxonomies and categories (which is important so the post goes to the right place)
  • Support is going to cost you 
  • When I hit submit, the success message comes back with some odd gibberish and the form’s fields still have the content in them. When I checked, I can see that the post did in fact publish

Now it’s back to submitting a ticket to their WordPress.org forum and hoping for a response. Other forms I considered but avoided are Ninja Forms and Gravity Forms.  I chose not to go down that road since it cost money.  Things I read while evaluating Caldera Forms: 

Final thing I started looking into last week: using Encyclopedia/Glossary/Wiki plugin instead of Knowledge Base CPT. I’m checking out this plugin since it will auto-link text in other pages/posts/custom which include a word in the lexicon to the lexicon page.

This is where I’m leaving off this week. I hope you find some value in learning this background knowledge of how I’m developing this WordPress site.