ux

Tag: ux

Bootstrapping an emergency library backup site

TL;DR: I Bootstrapped lib.jjay.cc, a Library backup site with the links to online resources, hosted on my personal webspace with an official-ish domain name.

—

Over this past weekend, the John Jay College network went down. It was pretty serious: no one off-campus could access the main College website for a while, and even when that went back up, the Library website was down for about half the weekend. Yikes!

I had done two very lucky things earlier in the month:

I’d bought jjay.cc on a whim. I’d proposed that the John Jay web department buy it as a shortlinker, and when they showed no interest, I bought it myself ($10, why not!) and have been using it as a way to shortlink Library content. (More on customizing Bit.ly later.) It looks official-ish, and no one has to know it’s on the same webspace as my other goofy websites.

I owe a shout-out to Val Forrestal, who once gave a talk at METRO about setting up an emergency library site after getting hacked. I’d always thought, hey, I should do that sometime, just in case. And then, on Saturday, the flurry of emails about the campus-wide network issues seemed dire, and it was time. So I whipped up the Lloyd Sealy Library Emergency Backup site at lib.jjay.cc:

library backup site screenshot

With a second page for the database A-Z list:

database a-z list

How I made the site

I made a basic Bootstrap template. “Bootstrapping” just means copying and pasting various parts of the Bootstrap framework. I used the navbar, panels, and tables. What’s nice is that everything is already styled and mobile-friendly. I only had to work on two HTML files.

The on-campus network was still functioning, thank goodness, so I VPN’d in to copy the HTML from the normal library site. No need to do anything new when all the code’s already done. EZproxy was also intermittently inaccessible, but luckily, students can also use their library barcodes to log into databases that CUNY subscribes to. We noted that fact on the backup site.

I use Dreamhost as my web host and domain registration service. I created a subdomain, lib.jjay.cc, and used my usual FTP login with Transmit to upload the files. I also uploaded a restrictive robots.txt file so that this backup site would never show up on Google.

It took me under an hour to set it up. We publicized the backup site on social media and got a few grateful responses. We were in touch with the John Jay webmaster about changing the link to the library on the main college site, in case IT told us the network issues would take much longer to resolve. In the end, we just waited it out. And now we’ve got a backup site, should anything go wrong with the network or our servers. (Knock on wood.)

Takeaways: make a stripped-down version of your library website and keep it somewhere safe, somewhere you can access it on- or off-campus. And if you don’t mind spending an extra $10/yr, it might be worth it to buy an official-looking but unofficial domain name, just in case.

Library website usability testing: sample scripts

If you haven’t done a usability test on your library’s online services in the last 12 months, you’re overdue! Web trends and user expectations change at a fast rate, as do the many parts of a library’s resource ecosystem. Before rolling out the new Lloyd Sealy Library website in December, I conducted a usability test on the beta version of the site in November. The feedback from students and faculty was helpful in refining parts of the site that weren’t as usable — in areas that were already of concern to us and in places we didn’t know were problematic.

There are a bundle of resources out there for usability testing, but not many example scripts specifically for library websites. Below are the scripts I used for students and faculty. Note that this is tailored to John Jay College’s Lloyd Sealy Library website, so some tasks might not be phrased the same way or even performed on your site. At the bottom of this post, I’ve included some notes about this usability study and my approach.

Read more

Sketchy mocks

In designing the new Lloyd Sealy Library website, I used Balsamiq, a sketchy wireframing tool, to plan page layouts, information architecture, and user flows. I like the sketchiness particularly. Too often, group-approved design gets bogged down in colors and fonts, but charmingly drawn mocks like these free your conversations from the details so you can focus on the important elements of user experience.

Here’s a real mock I used to design a page on a forthcoming project (click for larger):

fake mock

 

I use the desktop software ($79), but there’s also a cloud-based web app ($12+/mo), which is amazingly well done. There are some very nice touches, like the kinds of items you can drag ‘n’ drop to create your mock, the auto-filltext that appears when you type ‘Lorem,’ and the ‘What should I make for dinner?’ option in the Help menu (really). It’s not the speediest tool, but I have found that added friction allows time for you to really consider what you’re designing. Perhaps William Morris phrased it best: “You can’t have art without resistance in the materials.”

Related reading: Bethany Nowviskie, “Resistance in the Materials” (2013)