Library Card Services Guide
An interactive guide for obtaining and using a library card with the Parchment Community Library.
The Project
The Parchment Community Library was looking for an interactive guide for their library card services to post to their website. Patrons were frequently requesting information on what was needed to obtain a library card, who qualifies, types of library cards, and the benefits of having a library card. The client was the director of the Parchment Community Library and served as the Subject Matter Expert (SME). The director requested that the guide be clean, minimal and easy to navigate on a a laptop or cellphone. The Parchment Community Library provides services to a diverse community, and the tool used needed to be accessible to wide audience. The target audience of this guide are citizens that live in or near the Parchment District and are interested in obtaining a library card to participate in Parchment Community Library Services. The project was created in Articulate Storyline 360, while Figma and Mind Meister served as storyboarding tools. UnDraw provided a range of illustrations to make the slides more eye-catching and allowed for the branded colors to be incorporated into the characters.
The Process
Style Guide
To begin, I identified branding features on the Parchment Community Library website. It was important to integrate the PCL logo, which was added to the opening slide, and the key color codes. The colors of the Parchment Community Library were a light blue (#24A8E1) and white (#FFFFFF). Two subtle colors used was also yellow (#FFCC42) and black (#000000). The mentor icon needed to be neutral, not denoting a specific gender or ethnicity, to be more inclusive. After the branded colors and mentor icon were obtained, I created a style guide in Figma to include all of the visual elements that represented the Parchment Community Library.
Action Mapping
The action map identified 3 goals: Identify what the patron needs to provide to obtain a library card based on various parameters (age, location, affiliations), what items can be borrowed with a library card, and how much patrons save. Using Mind Meister, I made a central goal for the entire project, and then extended the 3 more specific goals from the center. To provide more detail on how the project was going to support those goals, next level topics were added to the 3 specific goals. The next level topics were useful in exploring ways information could be relayed to patrons.
Storyboarding
Text-Based Storyboard – After identifying the specific goals of the library card services guide and drawing up an action map, I provided a text-based storyboard to the director to provide a framework of what the design will look like. The storyboard included slide headings and what would trigger movement to the next slide. The text-based storyboard also included an overview of the mentor icon, or Ask the Librarian, which serves as additional assistance to users. The director wanted to have contact information available at any point in the tutorial portion of the guide, which was integrated into the mentor icon.
A visual storyboard was then created using Figma to provide the client with an idea of what the final product will look like. This included specific images that were used throughout the project, such as the mentor icon, unDraw characters, and buttons. It was important that there was consistency throughout the project to ensure the project was user-friendly and easy to navigate. Buttons and text needed to be easy view from a cell phone and both colors and images needed to remain minimal to avoid compressing text.
Describe your image
Describe your image
Prototype
I transferred the images and content from Figma into Articulate Storyline 360 to build the project prototype. This project used a total of 4 separate scenes to organize content into categories: introduction and user tutorial; question series to identify the type of card the borrower needed; using the library card and borrower privileges; and conclusion to summarize what the borrower needed and opportunity to retake the course or exit. Each scene is comprised of multiple slides that were linked with continue, return, and home buttons to allow the user to move throughout the guide with ease. Layers were also added to reveal content and hide related content, including the Ask the Librarian mentor pulldowns. An image of the project's scenes is provided below.
A range of triggers was used. A set of triggers in each slide altered states of buttons and images, changing their color when users hovered over. Triggers were set for buttons to allow users to progress in the course or return to previous slides if needed. Buttons were also linked to external content, such as the Parchment Community Library website. In the initial tutorial slide, a trigger was created to move a curser icon along a motion path to show the user what to click on if they need additional guidance from the Ask the Librarian Icon or if they need to return to the home page. An example of these triggers are provided in the image below.
After creating the project in Articulate Storyline 360, the entire project was published to Review 360 and shared to the client to review and provide feedback on each component of the guide. The client was able to assist with adjustments to text, images, and timing of triggers. The client shared the project with 2 staff members that had not viewed any piece of the project prior to provide a perspective similar to a patron. After collecting feedback from all reviewers, I made the adjustments and sent a more refined product to the client. The client reviewed the project one more time with their 2 staff members for final adjustments.
The final project was published to the web and uploaded directly to Amazon Web Services (AWS) Cloud Computing. Uploading to AWS provided HTML coding that can then be embedded into the Parchment Community Library website. After obtaining the HTML code, I sent this to my client to be incorporated into their website.
The Impact and Reflection
This project had a meaningful impact by increasing accessibility to library resources and creating a more engaging, user-friendly experience for patrons with varying levels of familiarity and comfort with digital tools. By incorporating interactive elements and designing with diverse user needs in mind, the program supports independent learning and reduces barriers to information.
Developing and launching the project on the Parchment Community Library website provided me with an opportunity to create a program that would be used by a diverse audience. I enjoyed connecting with the client and exploring the needs of their patrons. I was utilized a number of interactions in Articulate Storyline 360, including states, layers, and a wide range of triggers. I will continue to obtain feedback from PCL staff and patrons on usability and potential improvements.