Select Page

Branding | Interactive Design | Process Book | Signage | Website

Ritter Library
Wayfinding

Baldwin Wallace University Ritter Library logo with brown and gold colors

CASA Blue

Pantone: 2139 C
CMYK
: 57, 36, 14, 29
RGB: 90, 112, 140
HEX: #59708c

BW Orange

Pantone: 166
CMYK
: 0, 70, 100, 0
RGB: 242, 99, 34
HEX: #f16321

BW Russet

Pantone: 463
CMYK
: 13, 54, 88, 33
RGB: 122, 74, 24
HEX: #7a4a18

BW Green

Pantone: 5767
CMYK
: 33, 18, 75, 25
RGB: 141, 146, 79
HEX: #8d924f

BW Brown

Pantone: 476
CMYK
: 57, 80, 100, 45
RGB: 61, 45, 31
HEX: #3d2d1f

BW Gold

Pantone: 7406
CMYK
: 0, 18, 100, 0
RGB: 255, 206, 52
HEX: #ffcc33

CASA Red

Pantone: 2035
CMYK
: 0, 99, 99, 20
RGB: 204, 2, 2
HEX: #cc0202

CASA Gray

Pantone: 404 C
CMYK
: 55, 49, 53, 18
RGB: 113, 109, 103
HEX: #716d67

Type Study for Ritter Library Wayfinding: Oswald Bold
Type Study for Ritter Library Wayfinding: Oswald Regular

Project Statement

The Baldwin Wallace University Ritter Library Wayfinding system enhances the library’s navigation through an IRB-approved research process and strategic implementation. The project addresses challenges such as floor naming and visual consistency. A complete wayfinding strategy features distinct colors from the Center for Academic Success and Achievement (CASA) and the University’s brand kit for each floor—orange for the main, blue for the top, green for the ground, and brown for the entry area.

Redevelopment of fire maps, directories, and room identity signage such as the student lounge, quiet study, classrooms, study rooms, and tutoring spaces boost identification and navigation by creating over two dozen custom icons, preventing cognitive overload within Adobe Illustrator.

Alongside the signage, the development of a kiosk further implements wayfinding, allowing users to schedule a tutoring session appointment, book a study room, meet with a librarian, view the library catalog of print and ebooks, and locate spaces within the library. Utilizing Bootstrap, a website documents the library’s progression from IRB Testing to final installations.

User testing throughout the project sparks ideas and changes to improve the wayfinding of each floor. A series of signage mockups and eye-tracking glasses are utilized to see if the color coding, custom icons, sizing, and signage placement within the space are practical before final versions are approved and installed by University Relations.

Development

IRB Testing

One researcher will stay with the participant and ask the questions. The other researchers will observe the study a few feet behind on the computer. The researcher will ask participants to complete a few typical questions using Ritter Library’s physical space. Scripts for the specific tasks have been developed by the BW staff and faculty advisor for previous studies.

Procedure:

    • Two researchers
    • Participant asked questions to complete the task

Process:

    • Welcome participant and explain the testing session
    • The participant signs a consent form and completes a demographic survey
    • Researcher calibrates eye-tracking software
    • The researcher asks questions and takes notes as the participant completes tasks within the library

Task Questions:

    1. Where would you go to pickup a book?
    2. Locate the restroom.
    3. Suppose you had a tutoring appointment; where would you go to sign in?

IRB Testing with Eye Tracking Glasses: Locating Book Pickup

Pre-Study Takeaways

Researcher Notes:

    • Establish distinct shapes and colors for each location to create a unique identity
    • Assign a unique visual character to each region
    • Utilize sightlines effectively for wayfinding
    • Design simple, intuitive paths that are easy to navigate
    • Incorporate landmarks for orientation
    • Avoid overwhelming with excessive information
    • Place signs strategically at decision points
    • Offer wall maps and printed materials for user guidance

Participant Notes:

    • Use the front desk, cafe area, and directory for better visibility (areas most participants check first)
    • Consider using brighter colors for signage to attract more attention
    • Place signs at decision points to guide participants effectively
    • Consider incorporating a map to enhance navigation and provide clearer directions

Signage

Ritter Library Walkthrough:

    • Identify critical decision points
    • Discuss signage substrates and sizing for implementation
    • Address inconsistencies in floor names and introduce cola or-coded system for each floor
    • Collaborate with existing and developing signage to ensure seamless integration
Original entrance to library

The main entrance to Ritter Library
May 2023

Working with University Branding:

    • Adhered to existing University Brand Guidelines for signage decisions
    • Made choices on color coding and font selections in alignment with the established brand guidelines
    • Ensured the signage design conformed to the university’s visual identity standards
    • Prioritized consistency for a cohesive look on each floor:
      • Top Floor: CASA Blue
      • Main Floor: BW Orange
      • Entry Area: BW Russet
      • Ground Floor: BW Green
Initial concept of Ritter Library directories with color coding each floor

Initial Concept of Ritter Library’s
Main Directory Board

Early drawing of the Top Floor of Ritter Library

Early Development of Top Floor Map

Drawing New Floor Directories:

    • Identified discrepancies in the current directory boards
    • Recognized existing boards were outdated
    • Worked to clarify new room numbers and configurations
    • Addressed the need for up-to-date information on the directory boards
    • Undertook corrective measures to ensure the boards reflected the current information
Development of the Top Floor directory's map and signage

Process of Creating the Top Floor Directory

Icon Development:

    • Addressed the wayfinding concerns by developing two dozen icons for quick understanding
    • Intentionally designed icons to lighten cognitive load for users
    • Focused on improving visual communication for easier comprehension
    • Strived to create a more user-friendly experience by incorporating icons alongside text
Accessible Restroom

Accessible Restroom

Book

Book

BW Archives

BW Archives

Cafe Area

Cafe Area

CASA Logo

CASA Logo

Charging Station

Charging Station

Classroom

Classroom

Computer Lab

Computer Lab

DVD Icon

DVDs

Elevator

Elevator

Graduate Study Room

Graduate Study Room

Information Desk

Information Desk

Librarian

Librarian

Open Study Area

Open Study Area

Periodicals

Periodicals

Printing & Scanning

Printing & Scanning

Quiet Study Area

Quiet Study Area

Student Lounge

Student Lounge

Study Room

Undergraduate Study Room

Vending Machines

Vending Machines

Producing Mockups:

    • Created initial designs that were tiled and printed on office printers
    • Assembled the printed tiles by cutting and taping them together
    • Facilitated a visual preview of the concepts in the spaces
    • Conducted several revisions to assess the size, placement, and accuracy of information
Cutting a mockup for Ritter Library's glass panel

Cutting a Mockup for Entry Area Glass Panels

Enhancing Accessibility:

    • Updated fire maps to reflect the current library layout
    • Added locations of fire extinguishers and the AED to the updated maps
    • Expanded the use of braille signs to mark permanent spaces
    • Customized braille signs to align with Ritter Library’s wayfinding system
Addition of color to braille signage

Main Floor Restroom Mockup

Kiosk

Gathering Resources:

    • Study Room Reservations
    • Scheduling a CASA appointment
    • Appointment with a Librarian
    • Drop-In Tutoring
    • Baldwin Wallace University’s Library Catalog
    • Frequently Asked Questions

Coding the Kiosk:

    • CSS Styling
      • .box class
        • Background color, text alignments, border radius, position, and overflow behavior
      • Button Hover Effects
        • Correspond to links for appointments and reservations
    • JavaScript
      • Navigation
        • Prevents default link behavior when the dropdown menu is activated
        • Changes hamburger icon appearance for the menu list and close button
Mockup of kiosk wireframe

Preview of Ritter Library Wireframe

Screens of the kiosk

Ritter Library Kiosk Screens

Kiosk Features:

    • Bootstrap v5.3
    • Includes five interactive screens
    • Six resources for visitors to register and schedule appointments
    • Floor maps and corresponding directories
    • FAQ section with a list of common questions from the Ritter staff

UXUI Testing

Testing the Kiosk:

    • Collected user-testing with graphic design students
    • Created several surveys
      • Pre-study questions with a media consent form
      • User experience questions
      • Post-study questions
    • Collected data on user response time
Testing the kiosk's effectiveness with students

User-Testing Kiosk with Students

User Experience Test Questions:

    • Ask the participant to go back to the home screen after completion of each task
    • Recorded the amount of time to complete each task:
      • Reserve a study rooms
      • Schedule an appointment with CASA
      • Make a librarian appointment
      • Find today’s drop-in tutoring schedule
      • Search for books in BW Library Catalog
      • Access FAQ section

User Experience Questions

Website Development

Preview of the hero graphic of Ritter Library Wayfinding

Website Features:

    • Bootstrap v5.3
    • One page site
    • Preliminary IRB testing conducted for Ritter Library’s wayfinding
    • Comprehensive research and findings gathered from the research phase
    • Plans outlined for implementing the library signage
    • Data on improving user navigation within the library

Main Elements:

    • Event Listeners & DOM Content
      • Uses listeners to know when the webpage is fully loaded
    • Toggle Scrool Top Button
      • Picks the scroll-top button using document.querySelector
      • Creates a function toggleScrollTop to show or hide the button based on scroll position
    • Sticky Header
      • Keeps track of the last scroll position with a variable
      • Adjusts the header’s position during scrolling
    • Image Gallery
      • Displays installations in Ritter Library as a grid
      • Filter options are presented in a list, allowing users. to categorize installations by floor
      • Each installation item consists of an image, title, and a lightbox for an enlarged preview

INSTALLATIONS

Before & Afters:

Here is a look at a few renovations to Ritter Library, including installing nine new directories and additional room signage, including the entry area glass panels.

Before After

Top Floor Directories: Before & After

Before After

Entry Area Glass Panels: Before & After

New Kiosk

View the final installation of Ritter Library’s new addition of an interactive kiosk featuring floor maps, resources, and options for students to schedule appointments.

Ritter Library Kiosk

View the Installed Kiosk
Installed Kiosk placed in Entry Area

Kiosk Installed in Entry Area of Ritter Library

Bootstrap Website

Ritter Library Wayfinding

View the official website.

View the Entire Timeline Ritter Library’s Wayfinding

Thank you for viewing…

Ritter Library
Wayfinding

Branding | Interactive Design | Process Book | Signage | Website