1 of 16

By: Kellie Stephens

Designing a Koha User Experience

Ft. the Self Checkout Module

Hi! I’m Kellie from the McKinney Public Library System in McKinney, TX

I attended the conference last year and met some of you in this room, but this will be my first time presenting and I am so happy to be h`ere sharing this with you!

Back in 2019 I joined the systems team at MPLS to help with customizations on the Front end.

Since I had a background in marketing and design from the private sector, I took an outsider’s point of view on this project.
But now I was introduced to this open-sourced system called Koha (you may have heard of it by now), which was unlike anything I’d worked with – but in my opinion – far better because it was so much more flexible – and with front end code which is my absolute favorite.

2. One of the first front end projects I was assigned was a pilot project beta testing our own version of a self checkout station, to be fully supported by the Koha self checkout module

a. A little intimidating to design something with that many eyes on it but challenge accepted.

b. Over the course of the last 4 years we've taken this project from one beta station at one of our branches to our system wide self checkout solution, and it really has been an ongoing project that we continue to improve.

c. In this time, we've done a lot of tweaking, customizing and stretching to get this thing to do exactly want we want it to do for our patrons.

d. We wanted the checkout to be an experience and not a burden – that we had full control over.

3. Today I want to take you through that journey of pushing the Koha module to perform functions that were important to us and our patrons, while also handling our exponentially growing traffic at the circ desk.

a. I'm hoping with this presentation I can show you a glimpse of what's possible in customizing your own Koha build, and maybe provide a little inspiration if you want to try your own build.

2 of 16

Fully self

Service

Branded to our library system

Support from an open-source community

Cuts the cost way down

Perform certain functions

In house Maintenance

Why Develop Our Own?

WHY DEVELOP OUR OWN??

1. It’s far cheaper than third party machines

a. Spinning up our own hardware was significantly cheaper than the old 3M tabletop units we were using (and could only afford a few of).

b. Not to mention we could save a lot of time and money if someone on staff (me and the systems team) could update it and troubleshoot as needed.

2. We could make it perform certain tasks

a. Because the Koha module provides a lot more wiggle room to edit the HTML/CSS and JS – we could add virtually whatever we wanted.

b. We could add our own features that most out of the box self checkouts don't include, like running programming ads when the machines are idle

3. Easier In-house maintenance

a. No more calling a 3M rep every time something went wrong, which was more and more often the older our machines got.

b. If we had an idea on how to improve it, we could implement it right away.

4. Empowers Patrons to serve themselves at checkout

a. Which frees staff up to answer bigger questions on the floor.

b. We debuted these right at the beginning of the contactless covid era, luckily the build was ready right in time for us to reopen and operate primarily on these machines.

5. Free Branding

a. We could control the look and feel so that it felt like us, and not a 3rd party vendor

b. This strengthens our image and plays into all other interfaces in our library and gives the self-checkouts a very clear and visible purpose.

6. We could utilize the open-source community!

a. Having the support of Bywater and the Koha community allowed us to get very creative without the worry of "breaking something“

3 of 16

This is the Koha self-checkout model out of the box:

1. On the top left is the first step of building the self-checkout. Each Self checkout machine has its own designated staff patron account in Koha that we created to keep each one logged into the self check module all day every day.

2. On the right is what you will see on the front end of the module:

a. Step one is an input bar that captures the patron's library barcode number and logs them in

b. then the next step of the process is an input bar that that feed the item barcode into the checkout table to actually check it out to the patron.

3. All of this is controlled in the Koha Systems preferences using the SCO module and has a Main User Block for HTML, a User CSS block for styling, and a User JS block for adding fancy functions, bells, and whistles.

a. I will say most of this is HTML/CSS magic, but the modal popups are done in JavaScript.

b. Out of the box, It's a very basic but highly functioning form, and I'm going to show you just how far you can stretch its appearance and functionality.

4 of 16

Included:

Editable HTML:

Input Box

+ Checkout table

Banner, Instructions, Ads,

and Contact info

This is our self checkout page when I met it back in 2019.

When Ed hired me and told me about this project, he referred to it as a "web app" and told me that using the dev tools and my CSS skills, I should be able to turn it into whatever we wanted..

a. Main influence on the size were the existing elements that I talked about on the last slide: the input bar, Button, and following checkout form. The starting idle page just shows the card number bar, no table until the user actually logs in.

b. OHH! And another influence on the layout would be our director's biggest ask, which was a space for programming ads that would scroll on this idle page as well as the checkout pages, giving more exposure to upcoming events.

2. Wouldn't it be cool if we flipped it though?

a. Since we had the plan to flip this vertically with 1080 x 1920px page dimensions, I cleaned out everything you see here but Koha's bones and started fresh.

b. Gave me more wiggle room to fit in the ads – as you’ll see in the demo, I chose the bottom of the screen and our tv screen sized ads, so the functional part of our "app" could take the top portion, front and center.

c. Kiosk Mode – this is running in Google Chrome so that we can trap them in this web app only, not give them access to the entire Koha OPAC

3. Scaling and Messing with CSS Margins – I blew up the existing login form, centered it, messed with overall page dimensions and margins to get it working in vertical mode.

4. Wording Changes – Used CSS to Change it from "Please Enter your card number" to a more welcoming message about the SCO station and introducing them to the process for checking out. Then again changed it on the form page to be more instructional (rather than the red bullet points here instructing the patron through the process.)

Then add hardware…

5 of 16

Vertical Touch Screen Monitor (NeoFlex Planar)

Mounted Mini PC (Zotac Nano)

3D Barcode Scanner (Symbol)

RFID Reader (Bibliotecha)

JUST ADD:

6 of 16

Scrolling Ads on Idle

Patrons can view and scroll through ads for upcoming events.

The Idle Page

When no one is actively using the self check-out, this is what you see.

This is technically a Koha Opac page, stuck in kiosk mode in Google Chrome – but looks an acts as its own web app as far as patrons are concerned.

Note the language change I mentioned I made with CSS above the input bar. This welcomes the patrons and lets them know the purpose of the station as well as the first step of the process

a. It’s also scaled up significantly from before to take up more space and look super intentional.

2. We got our ads and still left plenty of room up top for the actual functioning part of the self checkout

a. I took a lot of inspiration from retail self checkouts here

3. These ads help us boost underattended, new, and upcoming programs at point of check out, and between it being used by patrons.

4. We keep it to about 10 ads, 10 seconds apart so its legible and stays efficient as far as load times.

5. Since it's the same interface between locations, we have general ads that promote events and closures at both locations

6. At first this was just a list of HTML images, but over time we've worked to improve our little ad space so it's pulling a much more dynamic slideshow from Google slides using an iFrame.

a. This allowed us to expand the project to other team members to help out, so it wasn’t just on the systems team, the programming team also chips in without even having to access the Koha system admin side of things.

b. Allowed us to play around with more eye-catching transitions and animated graphics.

c. Since it’s a touch screen, patrons can even scroll now if you missed something, so many times patrons will look through these slides before proceeding to checkout. Thanks, Google!

d. ..which brings us to the next step...signing in to use the checkout to actually check something out..

7 of 16

Scan Library Barcode on the 3D Scanner

It will automatically load the checkout page upon detecting their card number.

8 of 16

Place an item on the RFID pad to check it out

Newest items show in green at the top, the rest fall below as they are listed.

Checking out an item

Note, again the language change on this step of the process

I changed it to be more instructional and tailored to our setup, letting them know to place their items one at a time on the RFID pad.
The Items that show up at the top of the table are the newest and are highlighted in green
Additional items are then listed in a table below

i. When multiple items are entered, a scroll bar will appear to view a very lengthy list – But our patron Darth Vader only wanted this one item today.

ii. In addition to checking them out, our RFID pad is also running Bibliotheca software that desensitizes the item barcode so that it doesn't ring at the gates when they leave

iii. RFID Pad has sound so it makes a BING! Sound for successful checkouts and a more aggressive sound if something went wrong – like they put to many items on the pad.

9 of 16

Check Account Status

Patrons can use the station to check their due dates, holds, and outstanding fees.

10 of 16

Repurposed Error Modals

Each popup has a targeted message based on what’s happening on their account.

Repurposed modals for Error messages

I edited our error notice popups using JavaScript in order to target each of them to a specific message and be super clear and eye-catching to patrons

a. This was to clear up each error and be less vague – if we can be as specific as possible about why the error is triggering, they patron has better luck at troubleshooting the error themselves without having to flag down staff.

b. It was also an attempt to be more noticeable and get patrons to look up at the screen and acknowledge the error, because before we had a lot more errors go unnoticed, and people were walking out with unchecked items.

c. Lucas was kind enough to meet with me on that and figure out how to traverse the DOM and target each notice separately so it can say different things with each error that is triggered

d. examples: This item is on hold for another patron, this item is checked out to someone else, cannot renew this item, etc.

11 of 16

Repurposed Print Popup

Into a bright and eye-catching last

step of the checkout process.

Repurposed modals for last step of the checkout process

1. The last step in Koha would normally be a popup asking if you would like to print a receipt, but I customized that too.

2. Since we no longer offer print receipts, I repurposed that print modal using JS to serve as a final "you're done, we'll email your receipt" type page.

a. Why? People were getting confused by how simple the checkout process was and kept scanning their cards again on the idle page expecting there to be more...Koha may be too efficient at this.

b. There is also a timeout in effect in the admin side of the module – after idle for 45 seconds at any step of the process, it will log them out to prevent someone using their account behind them.

c. However for this last step, I used Javascript to time them out even sooner – after 10 seconds.

12 of 16

Koha Staff Client >

Administration >

System Preferences >

Circulation >

Self Checkout Module

13 of 16

69.9%

26.79%

JJGL SELF CHECKOUT

HALL SELF CHECKOUT

3.29%

STAFF SIDE

96.7%

Of all circulation went through the Self Checkout Module

last year

CIRC STATS

$15K+

13%

$2K-

OUR TOTAL COST

TABLETOP UNIT

of the cost of our old machines

So..How’d we do?

1. Since we have each system logged in as individual Koha staff accounts, we can easily build Koha reports and pull stats on each individual machine and determine which are most used

a. If they need to be rearranged or decommissioned, we know which one to pull.

b. We also like to compare self checkout traffic to those done by staff – which is very few.

CIRCULATION TRAFFIC STATS

1. We’ve now been running this system as our main point of checkout for the last 3 years:

a. We have 5 active machines at our John and Judy Gay Branch and 4 at our Roy and Helen Hall location

b. In the last year at all locations combined; the self checkout stats account for a collective 96.7% of all circulation. Impressive.

c. JJGL accounts for 69.9% of that and Hall accounts for 26.79% of checkouts

d. Staff only had to checkout just above 3% of all circulation – usually this is either curbside calls which we have very few of these days or special overrides.

e. At both locations, the self checkout machine handle their very different patronage and varying flow of traffic just fine.

COST COMPARISON

2. All in all It saved us an estimated 87% on costs.

a. Our spin-up cost us just under $2k per machine

b. Our old machines cost us somewhere between $15k-$24k per machines (we’re estimating), not including any maintenance fees and parts.

3. To break it down:

a. We paid about $1k for the RFID tag

b. $400-$600 for the mounted PC

c. $75 for the 3D Scanner

d. $200 for the touch screen Monitor

14 of 16

Takeaways

Very well received by patrons
Maintainable and adaptable
Strengthens our image
Room for expansion

TAKEAWAYS

It’s well received

Patrons compliment it all the time

a. We get a lot of “That was Easy” compliments from older patrons as well as excited children that love to interact with it and check out their own books.

b. Because patrons can move through this process so quickly, we have more time on the floor to answer bigger questions than just checking out.

c. Patrons are happy that it's efficient and they can choose whether they want to interact with us

In House Adjustments

1. It’s adaptable to our ever-changing environment

a. If we want to tweak or fix something that might break with updates (that has happened exactly once), for the most part we can do that in-house.

b. As we think of new and better policies and procedures, we can tweak the checkout process too.

c. In the works: the ability to scan in with a driver’s license.

d. We are also working on the machine allowing batch checkout instead of one at a time.

e. If there’s something we just can’t figure out, we can submit a ticket with Bywater!

Strengthens our Image

1. Solidifies our branding and is cohesive with our other interfaces throughout the library.

a. But Its purpose is very clear, which helps it stand out among a sea of lab computers and OPACs.

Our Self Checkout suite can grow and expand as we do

McKinney is one of, if not THE fastest growing communities in the US right now, which means our potential patronage grows astronomically with each day.

a. Since it saves us so much time and money per unit, as we grow, the number of self checkout stations we offer can grow with us.

b. It’s easy enough to scrounge together the guts and spin up a new system quickly and budget friendly, we’ve done so very recently with hardware we had just lying around.

15 of 16

Suggestions

Use your browser’s Dev Tools

Dedicate a team

Take advantage of your

open-source community!

Spin up a test server

I don’t want to leave you without offering some suggestions:

USE YOUR BROWSER’S DEV TOOLS

You can experiment with changing things in your Koha build without committing to any permanent changes just by right clicking to open your dev tools

a. Find the correct class or ID tag for the element you want to change and playing with the stylesheets in the dev tools to see what happens.

b. The hardest part of customization is just locating the correct element tag

c. You want to avoid vague tags like bootstrap class tags, as this will affect EVERYTHING in Koha – not just the self checkout module.

d. Often-times I will use the dev tools to see what Koha prefers, then I will copy the entire CSS rule and paste it directly into the Koha module – 9/10 it is right on the money.

SPIN UP A TEST SERVER

You can host it on your city’s site like we did or just locally

You can start playing around for free before even going live with it
After you're live you can use the test server to make tweaks and improvements without breaking the machines while in use by patrons!

BUILD A TEAM FOR CUSTOMIZATIONS

Though this started just Ed and I, we included more people in this project over time, specifically to help manage the workload of switching out the ads on a regular basis

a. Having other eyes on the project helped improve it and helped us find more efficient ways to run it.

b. Front-line staff have spoken up with ideas for improvements that we have implemented – like the targeted error messages that Lucas helped me implement.

USE YOUR RESOURCES

Part of being in the Koha community is sharing and asking questions to other librarians, developers, and team members available on the slack channel

a. If something weird is happening in your build, you may not be alone, check the slack and Bugzilla to see if it’s something that’s already been addressed.

b. If you have a major problem you can't seem to solve, you can put in a ticket or meet with a developer to help you think through it.

c. They are seriously some of the friendliest and brightest people, and in my experience, they are more than happy to help you investigate and troubleshoot.

16 of 16

Questions?

kstephen@mckinneytexas.org

@Kellie Stephens

Slack: