Branding | Illustration | Kiosk | Process Book | Signage | UXUI | Website
Ritter Library
Wayfinding
![Ritter Library Logo Color Baldwin Wallace University Ritter Library logo with brown and gold colors](https://sophiacatherine.org/wp-content/uploads/2023/11/RitterLogoColor.png)
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
![Oswald Bold Type Study for Ritter Library Wayfinding: Oswald Bold](https://sophiacatherine.org/wp-content/uploads/2024/03/Ritter-OswaldBold.png)
![Oswald Regular Type Study for Ritter Library Wayfinding: Oswald Regular](https://sophiacatherine.org/wp-content/uploads/2024/03/Ritter-OswaldRegular.png)
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:
-
- Where would you go to pickup a book?
- Locate the restroom.
- 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
![Ritter Library Entrance Original entrance to library](https://sophiacatherine.org/wp-content/uploads/2024/03/0512Entrance.png)
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
![Original Concept of Drectories Initial concept of Ritter Library directories with color coding each floor](https://sophiacatherine.org/wp-content/uploads/2024/03/LibrarySignageConcept0523.png)
Initial Concept of Ritter Library’s
Main Directory Board
![Top Floor Drawing Early drawing of the Top Floor of Ritter Library](https://sophiacatherine.org/wp-content/uploads/2024/02/TopFloor.jpg)
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
![Process of Top Floor Directory Development of the Top Floor directory's map and signage](https://sophiacatherine.org/wp-content/uploads/2024/03/WayfindingTopFloor0621.png)
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](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Accessible_RR.png)
Accessible Restroom
![Book Book](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Book.png)
Book
![BW Archives BW Archives](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_BW_Archives.png)
BW Archives
![Cafe Area Cafe Area](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Cafe.png)
Cafe Area
![CASA Logo CASA Logo](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_CASA_Logo.png)
CASA Logo
![Charging Station Charging Station](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Charging.png)
Charging Station
![Classroom Classroom](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Classroom_Gray.png)
Classroom
![Computer Lab Computer Lab](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Computer_Lab.png)
Computer Lab
![DVD Icon DVD Icon](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_DVD.png)
DVDs
![Elevator Elevator](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Elevator.png)
Elevator
![Graduate Study Room Graduate Study Room](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Graduate_Study.png)
Graduate Study Room
![Information Desk Information Desk](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Information_Desk.png)
Information Desk
![Librarian Librarian](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Librarian_Quest.png)
Librarian
![Open Study Area Open Study Area](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Pencil.png)
Open Study Area
![Periodicals Periodicals](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Periodicals.png)
Periodicals
![Printing & Scanning Printing & Scanning](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Print_Scan.png)
Printing & Scanning
![Quiet Study Area Quiet Study Area](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Headphones.png)
Quiet Study Area
![Student Lounge Student Lounge](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Student_Lounge.png)
Student Lounge
![Study Room Study Room](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Srudy_Room.png)
Undergraduate Study Room
![Vending Machines Vending Machines](https://sophiacatherine.org/wp-content/uploads/2024/02/Directory_Vending.png)
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
![Mockup for Ritter Library Cutting a mockup for Ritter Library's glass panel](https://sophiacatherine.org/wp-content/uploads/2024/03/0705EntranceMockup.png)
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
![Main Floor Restroom Addition of color to braille signage](https://sophiacatherine.org/wp-content/uploads/2024/02/MainFloorRestroom-e1709603592380.png)
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
- .box class
- JavaScript
- Navigation
- Prevents default link behavior when the dropdown menu is activated
- Changes hamburger icon appearance for the menu list and close button
- Navigation
- CSS Styling
![Ritter Kiosk Wireframe Mockup of kiosk wireframe](https://sophiacatherine.org/wp-content/uploads/2024/03/RitterKioskWireframe.png)
Preview of Ritter Library Wireframe
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
![User Testing Kiosk Testing the kiosk's effectiveness with students](https://sophiacatherine.org/wp-content/uploads/2024/03/UserTesting.jpg)
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
![Ritter Computer Mockup Preview of the hero graphic of Ritter Library Wayfinding](https://sophiacatherine.org/wp-content/uploads/2024/03/RitterComputerMockup.png)
Ritter Library Home Page
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
- Event Listeners & DOM Content
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]( https://sophiacatherine.org/wp-content/uploads/2024/02/TopDirectoryBefore.png )
![After]( https://sophiacatherine.org/wp-content/uploads/2024/02/TopDirectoryAfter.png )
Top Floor Directories: Before & After
![Before]( https://sophiacatherine.org/wp-content/uploads/2024/02/EntryGlassPanelsBefore.png )
![After]( https://sophiacatherine.org/wp-content/uploads/2024/02/EntryGlassPanelsAfter.png )
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
![Ritter Kiosk Installation Installed Kiosk placed in Entry Area](https://sophiacatherine.org/wp-content/uploads/2024/03/RitterKioskInstallation.png)
Kiosk Installed in Entry Area of Ritter Library
Bootstrap Website
Ritter Library Wayfinding
View the Entire Timeline Ritter Library’s Wayfinding