AADL Self-Checkout Kiosk

UX Research, Ux Design, UI Design

Our client, Ann Arbor District Library, came to our team with their self-checkout kiosk which was outdated, hard to use, and was causing many problems for patrons, including high failure rates. My team was tasked with a complete overhaul of the design, including user research, UX design, UI design, and user testing. Our final deliverable is currently being implemented.

 
 

 
 

The Brief

With a vibrant community of patrons and situated in a college town full of University students, Ann Arbor District Library serves a vast array of community members in everything from informational materials to community events and services. With the existing self-checkout kiosk interface, patrons are unable to efficiently and effectively check out library materials, leading to a need of assistance or avoidance of them altogether. Patrons often prefer the self-checkout kiosks, due to independence and speed, and so a re-designed interface was needed to enable patrons to complete their desired tasks.

My Role

Project Manager & Design Lead

Project Goals

  1. Without asking for additional assistance, enable users to complete their desired check-out tasks with the kiosk

  2. Improve the current interface flow to increase efficiency, completion and satisfaction among patrons

  3. Allow users equal opportunity to use the kiosk with enhanced accessibility

 

 

PHASE 1: User Research

Existing design

Upon approaching the kiosk, the user is greeted with a blank screen and no evident calls to action. Once they scan their card, they are brought to the main screens where they can scan and view items, but again communication and calls to action fall short. Finally, the printing flow is easy to miss and there is no evident success message upon finishing.

 
Existing gif 2 cropped.gif
 

Methods

The primary purpose of conducing research was to identify the existing usability problems with the self-checkout kiosk which prevent patrons from achieving their desired tasks. We determined common pain points associated with the self-checkout process and identified what patrons hope to accomplish with the kiosk. This helped us understand best practices regarding kiosk interface design in order to improve the efficiency, accessibility and usability of the kiosk.

 
Research methods.PNG
 
Competitive analysis

Competitive analysis

Heuristic evaluation

Heuristic evaluation

Analysis

We developed an affinity diagram to better understand the pain points users have with the existing interface.

 
Affinity diagram 2.PNG
 

We identified the following four themes:

 
 

Personas & journeys

Based on our research findings, we created three personas and their corresponding journeys to represent our wide user demographic.

Design requirements

We developed our design requirements based on our research findings. Our requirements center around four main themes: convenience, independence, physical and process. Below are the requirements of highest priority.

Convenience

  • Streamline kiosk interactions

  • Keep interface screens to a minimum

Independence

  • Clear, consistent messaging and language throughout the interface

  • Instructions on how and when to scan card and items

  • Indications of error states

  • Indication of user currently signed in

Process

  • Maintain functionality of scanning items

  • Maintain ability to view items out, requests and fees

  • Add renew functionality

  • Adhere to the AADL visual brand guide

 
 
 

Phase 2: Design

We began by exploring ideas through quick sketches. Here, we ideated freely and without restraint.

Based on our various ideas, we chose one concept which we felt best met our requirements and created a paper prototype.

 
 

We conducted a round of user testing with our paper prototype, finding difficulties around terminology and task completion. We iterated our our design to fix found issues and created a mid-fidelity digital prototype.

 
 

After another round of user testing, we integrated findings into a final digital prototype. This final iteration included visual design based on the AADL brand guidelines.

 
 

Our final design consists of four main interactions:

The first screen in the user flow serves to welcome the patron and instructs them to scan their library card (via words and the placeholder graphic). There are instructions detailing how a user can pull their card up on their phone, if they forgot it. With this screen, Karen now understands what to do first and Melinda knows why her sons card doesn’t work.

The first screen in the user flow serves to welcome the patron and instructs them to scan their library card (via words and the placeholder graphic). There are instructions detailing how a user can pull their card up on their phone, if they forgot it. With this screen, Karen now understands what to do first and Melinda knows why her sons card doesn’t work.

The re-designed printing flow begins when the user presses  Finish  on any of the main screens. A pop up appears asking the user to choose the kind of receipt they want, and then finish. Users are also given the option to include previously checked out items on their receipt. Since the new flow always brings users to choose between receipt options, Jacob now doesn’t forget a receipt, as he is prompted to choose one upon finishing.

The re-designed printing flow begins when the user presses Finish on any of the main screens. A pop up appears asking the user to choose the kind of receipt they want, and then finish. Users are also given the option to include previously checked out items on their receipt. Since the new flow always brings users to choose between receipt options, Jacob now doesn’t forget a receipt, as he is prompted to choose one upon finishing.

The four main screens of the interface consist of  Current Items  where users can scan items,  Items Out  where users can view already checked out items and renew,  Requests  where users can view and modify requests and  Fees  where users can view incurred fees from late items. With these pages, Jacob can now both scan his new items and renew ones he already has out.

The four main screens of the interface consist of Current Items where users can scan items, Items Out where users can view already checked out items and renew, Requests where users can view and modify requests and Fees where users can view incurred fees from late items. With these pages, Jacob can now both scan his new items and renew ones he already has out.

The final screen in the user flow is a success message displayed once the user has completed their check-out process. This page serves to inform the user that they were successful, and are all finished with the process. Because of this screen, Karen now is confident that she checked out successfully, instead of wondering if her check-out worked.

The final screen in the user flow is a success message displayed once the user has completed their check-out process. This page serves to inform the user that they were successful, and are all finished with the process. Because of this screen, Karen now is confident that she checked out successfully, instead of wondering if her check-out worked.

 
 
 

Phase 3: Validation

Method

To validate our new design, we tested the existing interface against our re-designed interface between subjects in a lab setting. We recruited subjects to reflect the age range and technological literacy of our personas.

SUS 2.PNG

Procedure

  1. Introduction and preliminary questions

  2. Tasks, in scenario form, using either the existing or new interface

  3. End questionnaire using SUS and our own questions (shown below)

Metrics

  1. Time (in minutes) to complete necessary tasks

  2. Number of successfully completed tasks

  3. Feelings of independence after self-checkout process

  4. Overall convenience of self-checkout

 

Findings

Analysis of the validation results showed that our design was, in fact, more successful than the existing interface. The box plots show that the SUS scores and median were higher for the new interface, and the current interface has a wider range. Based on the SUS questions, we can tell subjects felt more independent using the new interface and felt it was more convenient to use. Based on the bar graph, subjects took more time to complete 4 out of 6 tasks on the current interface. This indicates users were more easily able to complete their desired tasks with the new interface. Additionally, it shows there was more hesitation and uncertainty when using the current interface.

Box plots of the SUS scores for the new vs existing interface

Box plots of the SUS scores for the new vs existing interface

Median time to complete tasks for the existing vs new interface

Median time to complete tasks for the existing vs new interface

 
 
 

Final Design

The final prototype can be found here.

Our new design meets all design requirements and better enables patrons to achieve their desired tasks with ease and feelings of independence.

 
Hi-fi gif cropped.gif

Cover photo mockup courtesy of https://www.anthonyboyd.graphics/mockups