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.

dinosaur_level

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!