Image Finding

Not centered

Today one fundraiser ended so I was free to change out the header images on our website and social media accounts. This turned out be a tough challenge for our website. My general topic was “flowers, spring.” I hunted around my favorite public domain image sites. Over the course of an hour, I checked nine images. The final one made it up though it’s not exactly what I wanted. Conditions for the frontpage image:

* Wide enough
* Not too dark
* No white background (text is white)
* Not too busy
* Image can’t be centered since the search box and text is there
* Bottom right center has to be dark for the text
* If focused on a single object, it can’t be centered

Since I decided to do a last ditch promotion of the Big Library Read, I tried to find a nice pie image. There were some good ones to choose from, but they didn’t fit the conditions above.

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.



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 Email Layouts


The only thing that mattered to me today is setting up two different email designs for the weekly events email. Above is a sneak peek. I just sent the newer design off to three reviewers to see what they think. The new one is mobile-first, reduced images, and more playful. I reviewed MailChimp’s inspiration site for ideas before trying something new.

The email design might get rejected for not including summaries of the events. That was a concern the last time I ran the weekly email and was testing designs. This week’s email has 20 different events in it. They get long fast. I’m trying to tighten them up while still being bold and readable. We’ll see how it goes over tomorrow when they see that design…

On a good note, my boss complimented me on yesterday’s Need to Know emails about the new publicity workflows. A+ to me.

DDoS Left Me with TinyURL

I noticed immediately something was up when I couldn’t load Twitter. As the publicity manager, it made things a little annoying at work yesterday since I had some tweets to send out. However, it really got my goat when I was forced to use TinyURL for a short URL instead of Bitly which was apparently also a victim of the attack. It did bring to the forefront an idea I’ve had for years: get our own custom URL shortener. I already have an idea of what I want it to say. It’s a secret for now until I see if I get approval for it. Anyways, here on my glorious (ha!) flyer, you can see the impact of the DDoS attack:

Courtesy of Darien Library

Courtesy of Darien Library

Yesterday’s production items also included an author poster, creating a FB ad, and making a handful of digital signs. Then I kicked Outlook on desktop repeatedly as it ate my first weekly events email that I’ve sent out in a few years. By eat I mean that it randomly added a hard line breaks into two blocks. Since the email design is based on columns, this set everything else under it to wiggle sideways in confusion. I tried duplicating a working block into one of the bad spaces. That was fine. As soon as I changed the text, it acted up. Then a lovely tech support lady from MailChimp spent an hour helping me. She couldn’t get it stop happening either.

Ah! I have lots of plans for this email. I’m guessing that by Christmas it’ll look entirely different.

Finally, I had a one-on-one. Their original item they had asked for tech support wasn’t available, so I taught them how to use another device instead. The main thing I took out is that I love having a phablet. It’s big enough to see!

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.


  • 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.


While doing some research for a work project, I came across the Darien USGENWEB Project page. I noticed that the library’s address was incorrect and attempted to reach out to the coordinator listed on the bottom of the page. When her email bounced, I contacted the county level coordinator. There I learned that Ms. Steel had passed away. I was surprised to then be offered her former position. I checked with work and I, on behalf of the Library, am now the Darien Town Coordinator.

It looks like there are lots of opportunities for me to continue Ms. Steel’s work. I hope to do her honor as the site is updated.

Summer Reading 2015 Website: WIP

Courtesy of Darien Library

Courtesy of Darien Library

The above is a work in progress. This is our third year of using Evanced’s Summer Reading software. What I’ve done so far is clone last year’s site and then made adjustments for this one. You can view last year’s theme below. I was in the process of starting to dismantle its interior when I remembered to take the screenshot. So forgive the out of alignment aspects.

Courtesy of Darien Library

The text here should say Gamer instead of Star — Courtesy of Darien Library

Regarding this year’s theater design, I wanted to have a curtain that could be lifted with a click of a button. Alas, it was not meant to be. I could probably have done it if I had full control over the site. Unfortunately, it’s table-based and all I can do is some CSS manipulation. Below is what I believe is this year’s default theme.


I’m having trouble with our design because it’s breaking in Firefox. I’ve tested it in multiple other browsers (including IE) and it looks on fleek. Firefox has been my nemesis for years in this regards. However, I am using Firefox’s 3D model of the divs to help me pinpoint the different parts of the page are on the site. I’ve completely swapped the original two columns so it can get confusing. Also there isn’t a master stylesheet but approximately 50 tiny ones.

Hopefully by this time tomorrow I’ll be able to share the completely redesigned site!

The Library Touchscreen Kiosk

Last October, my boss surprised me by telling me about a giant touchscreen he had purchased for a kiosk. This monstrous 24 x 42 inch screen (I think that’s the same model) would go on our main level. The software a vendor had upsold him on arrived first so I was able to dig into that. Later the kiosk arrived. While I worked on and off on the design of the kiosk, my colleague Alex and my UX intern used the touchscreen to check out the new generation gaming consoles. It was excellent for that! I have some ideas that in the future I’ll convince my boss to let me throw up something really fun on it for special occasions.

The kiosk sitting in the UX office.

The kiosk sitting in the UX office.

I need to scan some images from my work sketchbooks to complete this entry, but for now, let it be sufficient to say that I had no idea what I was doing. I tried finding inspiration by Googling photos and videos of non-ugly and non-financial kiosks with no luck. While this is my second time at the touchscreen rodeo of designing (the other was in college to speed up the workflow of money transactions at my retail store), my creative chakras were blocked. So I started taking photos of kiosks and maps that I saw in public. One by my orthodontist, the mall, Grand Central Terminal, at the Philadelphia Convention Center at Midwinter, and later at various airports as I went to Annual this summer. None of them suited my needs. Now I’ve been fascinated by kiosk design for a long time. I always like to touch the screens and find out what happens.

The First Design
My first iteration was done in the program my boss had purchased. It used Flash for the kiosk. It had lots of interactive buttons that I had to go through and test. I found the manual online and learned how to use the software. However, testing anything required that I go into live test mode. I quickly realized that it took 12 seconds for each screenload. However, I wanted to make good use of my boss’ investment in this software. After several more attempts of reaching out to the company, trying to find someone else who was also using the software, I confessed my frustrations to my boss. He didn’t even blink. He told me to just code it myself.

Note: I don’t have any accessible screenshots of my first attempts at home with me, but it was *very* close in design to the final version that I released to the public.

Creating the 3D Maps
I got it in my head early on that I needed to make 3D versions of each floor of the Library. So I opened up Floorplanner and imported in the cleaned up architect’s floor plans that I had made earlier in 2013 for the Google Floor Plans project. The process was a little time consuming as I learned how to design from the plans. However, I made good use of the time invested by then teaching a workshop to patrons on how to use the software.

The Second Design & the Calendar

Ugly but easy to understand.

Ugly but easy to understand.

One of the MUST HAVES was to include an events calendar in the kiosk. Since I was back to coding this by myself using Bootstrap as suggested, I drew up the extremely ugly and rough version that you see above. At this point, this is basically wireframing out the final design as I worked on layout and got input on the content. It was painful to hear anyone say they liked the design when it was so ugly.

The next backbreaking aspect of working on this kiosk was to try and import our Google calendar. My boss has made these giant custom digital signs which list today, tomorrow, and this week’s events. I grabbed the code from that and massaged to go in the right column of the screenshot above. There were some hurdles there since the code I got from Github wasn’t the same as the live code, but eventually I got that settled. However, my real issue is that I wanted each event title button to drop down to reveal a description and the date/time. This would work fine for the first event, but not in the second. I gnashed my teeth, wailed, and tried to recruit my programmer friend to help in exchange for doing some research work for him. No deal. I finally had to send it to my boss with yet another confession that this just wasn’t working.

Currently the working version of the kiosk does not have an events calendar since we needed to roll it out more than we needed the events in version one.

The Third Design
I decided that I could no longer handle the appearance of the kiosk code. So I took several hours to go sit in the admin conference room (a change of scenery!) and looked through app designs. I have several sketches at work that I made from this, but none were used. This would be because after all this work, I realized, hey, I’m spending so much time fussing over something when I can spend $5 and just buy a template and GET THIS DONE. So I did so. I’m really fond of sticking left sidebars (as you can see on my other website), but I have no idea what that design is called. Fortunately, I found a cheap responsive template that I liked on Creative Market.

App inspired designs

Now before anyone gets upset that I used a purchased template — it still took a lot of elbow grease to get it into shape for my kiosk. The template provided the general layout and responsiveness I needed and freed me up to work on the content. And until this week, I did not realize that the current kiosk design is almost 100% identical to the one I tried to make back in design one.

Return of the 3D Maps
I threw in my 2D version of the maps into the third kiosk design. Catching coworkers, I’d drag them in and ask for input. They were okay with the 2D but it could be better. Also note: since these floor plans were from the Google Maps project, there was no furniture in them.


A few weeks ago, I was suddenly hit with insight that the kiosk would look better with 3D maps. So I went back to Floorplanner, added furniture to the designs, and then exported out the new 3D versions. Before I finalized this though, I contacted the director to confirm the location of the kiosk so I could orient my maps in that direction. Once the 3D maps were in hand, I added them to the kiosk for more feedback. The response was overwhelmingly positive. So I went to the next step — “handpainting” the maps in Photoshop. Floorplanner by default shows the walls in grayscale, so I wanted to liven it up. The time to paint each level was approximately two hours.

The dinosaur lives!

The dinosaur lives!

After that, I then added labels.

"There's a lack of color here..."

“There’s a lack of color here…”

I asked my colleague for advice and he said, “For these old eyes, make each label a different color.”

Surprise, more buttons!

Surprise, more buttons!

The final version of the map with the restrooms highlighted:

Restroom highlighted.

Restroom highlighted.

Bonus Content
With the template I choose, I had a beautiful right column which I could add preview images and fun bits of text. So one day very recently, I ran about the building taking photo of staff at their public facing desks. Then I hit upon the idea of adding staff “fun facts” to the Ask a Librarian page. I made another round asking who had moved the furthest to be here, who was a lifelong resident, and other fun factoids.

Javascript Behind the Scenes
Anyone who follows my tweets will realize that I struggle with Javascript. However, it was absolutely necessary for the completion of this project. I had to do the following:

  • Change out the big level picture to reflect the highlighted destination
  • Turn off double clicking
  • Turn off long press

Other Code and Options
I showed my boss the kiosk at this point. He requested that I make the kiosk refresh to the homepage after 30 seconds. I tripled the timeout to 100 seconds since people may be studying a map. He also asked for a screensaver to prevent burn-in. The one I tossed together from some photos of the building with the message “Welcome to Darien Library. It’s all for you (our motto).” on the bottom. I’ll make a better version later since I was pressed for time last Friday to get something done.

Since the kiosk is ran on a Windows 7 computer, we had to do some tweaking of the kiosk. My colleague Alex helped with this and moving the kiosk upstairs (along with our building engineer!). The machine tweaks included:

  • Turning off the login screen.
  • Adding Kiosk Mode to Google Chrome.
  • Setting the website as the default in Chrome.
  • Having the computer turn off five minutes after we close at night.
  • Flipping to screensaver mode after 10 minutes of inactivity.

Reception and Feedback

Check out the people in the background. I actually took photos with people in them!

Check out the people in the background. I actually took photos with people in them!

On Monday, we got the kiosk to the first floor. I was of course, wearing a skirt, but the base makes a great seat. Alex and I had a time getting the power and ethernet cables in place, but I sat prettily underneath this huge screen while using velcro ties for the cable management. Immediately after I had moved away from the kiosk, two little girls about 8 years old came peeping around the corner to look. My boss and I encouraged them to look. One girl asked if it was a giant iPhone. He laughed and said yes. The girls realized quickly that the screen is HIGHLY sensitive and it does not allow multi touch. After a few minutes of playing my gentle questions of “what do you think?” the girls called it “So cool.”

The second patron to look at it ended up taking a photo. I’m not sure why — because it’s new or because she wanted a photo of the map of the second floor. Then today I observed a mother and her daughters poking at it. The girls kept tapping on a photo in the right sidebar. Unable to help myself, I asked “What are you expecting it to do?” The girls thought it should open up a bigger picture. Meanwhile their mom thought it’d open a slideshow since her daughter’s photo had recently been taken in the building.

This looks scarily like the very first design I did.

This looks scarily like the very first design I did.

Next Release
I have been careful to stress to everyone that this is version one of the kiosk. Now you know that this was really the third design. It took 8 months to bring the kiosk to the public due to a plethora of other projects, obligations, and technical issues that I needed to work out.

I won’t share quite yet what the next version will incorporate aside from an events calendar, but I look forward to getting my hands back into the code!