Overview

For this project I collected data and feedback not only from the customers using the library catalog website, but also from the employees who interact with the catalog on a daily basis to perform work tasks. Additionally, the library catalog platform provides limited access to the server side code, so I had to adjust my research and planning to work with what was possible with client side code (HTML, CSS, JavaScript).

 

Tools Used

  • MailChimp (Communication with Research Participants)
  • Balsamiq (Wireframes)
  • Optimal Workshop (Online User Testing: Surveys, Wireframe Click Tests)
  • Photoshop (Mock-ups/Interface Designs)
  • InVision (Interactive Prototypes)

 

My Research, Planning, and Design Process Timeline

November 2016:

  • Two open discussion sessions with employees.
  • Researched other systems using the same platform to observe any useful features not implemented in current interface.
  • Wireframe Development

December 2016:

  • Survey #1 with research participants.

February 2017:

  • Development of Mock-ups/Interface Designs, Interactive Prototypes, and Usage Scenarios.

March 2017:

  • Meeting #1 with library catalog committee (employees).
  • Wireframe Click Test #1 (Groups A & B) with research participants.
  • Meeting #2 with library catalog committee (employees).
  • Feedback collected from library catalog committee (employees).
  • Wireframe Click Test #2 (Groups A & B) with research participants.

April 2017:

  • Meeting with Librarians as Learning Leaders (employees) and interactive prototype demonstration.
  • Wireframe Click Test #3 (Groups A & B) with research participants.

June 2017:

  • Testing of the library catalog on the staging site.
  • Survey #2 (Groups A, B, & C) with research participants.
  • Survey #1 (Group D) with all employees in organization.
  • Internal mobile device testing.

July 2017:

  • Open (live) testing of library catalog staging site with general public.

August 2017:

  • Launch of new library catalog interface.
  • Inclusion of feedback link in sub-navigation for additional comments (1 year observation).

 

Wireframe and Mock-up/Interface Design Examples

Homepage/New Search:

 

 

 

 

Advanced Search:

 

 

 

 

Search Results:

 

 

 

 

Record Display:

 

 

 

 

Login:

 

 

 

 

User Account: