Mockups OSU Solutions Landing Floormaps.png

OSU Edmon Low Library: Website Overhaul

Overview

The Oklahoma State University Edmon Low Library hired me to help revamp their outdated website to better serve students, faculty, and visitors. My role was to deliver a clean, modern design that prioritized accessibility and user-friendliness.

Client

Oklahoma State University Libraries
Team: Associate Dean of the Library, Department Head of Digital Resources & Discovery Services, 2 Developers

My Role & Duration

UX/UI Designer
January 2024 - Present

Methodologies

Competitive & Comparative Analysis, Sitemap, Card Sorting, Wireframes, Mockups, User Testing & Feedback

The Problem

The Edmon Low Library website had become outdated, cluttered, and difficult to navigate, hindering its ability to effectively serve students, faculty, and visitors. Redundant links, an inconsistent structure, and an overwhelming amount of information made it challenging for users to find essential resources like floor maps, branch libraries, and job opportunities. The design no longer aligned with modern web standards, leading to frustration and inefficiencies for its diverse user base.

Key Goals

Simplify Navigation: Create an intuitive structure that allows users to quickly locate essential resources.
Modernize the Design: Develop a clean, visually appealing interface that reflects current web design standards and enhances the library’s brand.
Enhance Accessibility: Ensure the website meets usability and accessibility standards to accommodate all users, including those with disabilities.

Competitive & Comparative Analysis

Since my team cited the University of Michigan Ann Arbor Library and UCLA Library as design inspirations, I conducted a C&C analysis to identify strengths, weaknesses, and best practices from these websites. This helped me assess how OSU Library’s website compares in terms of usability, navigation, and overall user experience. My goal was to identify opportunities for improvement and ensure our design decisions were informed by industry benchmarks.

Key Insights from Analysis:

Hero Section Improvements

Current OSU Approach: The OSU Library lacks a welcoming hero section with engaging text.
Insights: Both Michigan and UCLA libraries have a more structured and inviting hero section, with Michigan using a search-prompting message and UCLA including a welcome message.
Design Takeaway: Adding a hero heading could make the site feel more inviting and help guide users.

Library Hours Visibility

Current OSU Approach: The hours for the main library (Edmon Low) are clear, but branch library hours are harder to find.
Insights: Michigan successfully makes library hours more accessible with a "Plan Your Visit" section, while UCLA provides a link but requires an extra click.
Design Takeaway: Implementing a "Plan Your Visit" section with clearly structured branch hours would enhance usability.

Sitemap of Existing Website

Simplifying navigation was a key goal, and so to familiarize myself with the scope and structure of the website, I started my process by creating a sitemap of the current design. This process involved reviewing the website’s content, documenting how information was organized, and identifying redundancies.

View sitemap here

Sitemap Key Insights:

Discovered a very deep site structure, with critical resources buried under multiple layers of navigation.
Site redundancies added to the many layers.
Identified opportunities to consolidate content and improve the flow of information.

Reworking the Navigation: Cart Sorting Exercise

One major issue with the existing website was its navigation—it overwhelmed users with too many options, some of which were repetitive. Additionally, the dropdown menu format frustrated both my team and the primary users, who preferred a more intuitive approach.

To address this, we conducted a card sorting exercise with students, faculty, and staff to refine the placement of navigation items based on user expectations. Meanwhile, I explored new navigation structures to eliminate the cumbersome dropdown menu and create a more seamless browsing experience.

Card Sorting Exercise

Card Sorting Data

Cart Sort Key Insights:

Duplicated and unnecessary information was eliminated, and information was now sorted in a way that felt intuitive for users.

Wireframes: Laying the Foundation

To explore layout possibilities, I started with quick sketches of the landing page. Once I had a few ideas, I created wireframes in Balsamiq and shared them with my team for feedback.

The team liked different elements from Wireframe 1 and Wireframe 2, so I combined these aspects to create a more effective final design.

Key Feedback Takeaways:

From Wireframe 1:
✅ Hero image & search bar layout
✅ “How can we help you?” and prominently featured hours
✅ A dedicated “Ask a Librarian” section (wording may evolve)
✅ News & Featured Collections

From Wireframe 2:
✅ Events displayed in a vertical list for better readability
✅ “Featured Collections” placed next to the hours section to highlight another key library resource

By merging these elements, I ensured the final wireframe reflected both usability improvements and team preferences, setting a strong foundation for the high-fidelity mockups.

Wireframes 1, 2, & 3

Landing Page: Medium Fidelity Mockup & Feedback

I designed a medium-fidelity mockup of the landing page, incorporating key insights from the wireframes. The design includes the OSU logo, standard top navigation, and images provided by the library. I sourced icons from Google Material and designed the event icons to match those used on other OSU webpages. The “Library Services for” section was inspired by the main OSU landing page. We also explored text readability, debating whether dark gray or white text was more accessible, ultimately choosing dark gray.

To gather feedback, we shared the landing page with students, faculty, and library staff, hosting two virtual feedback sessions for additional insights.

Key Feedback Takeaways:

Accessibility & Readability – Many users found the dark gray text on orange difficult to read. Since we had tested white text as well, I revisited these sections to ensure optimal clarity.

The Solution: A Modern, User-Centered Library Website

The redesigned Edmon Low Library website offers a cleaner, more intuitive experience that aligns with modern web standards while addressing key usability issues. This transformation not only improves the library’s online presence but also creates a seamless digital experience that better serves students, faculty, and visitors.

Simplified Navigation

The new navigation structure eliminates redundant links and organizes content into clear, user-friendly categories. Users can now quickly find essential resources like floor maps, branch libraries, and job opportunities without unnecessary clicks.

Modernized Design

The updated interface embraces a clean, structured layout with improved visual hierarchy. The refreshed color scheme, typography, and iconography enhance readability and make the website more inviting. A prominent search bar and clearly defined sections guide users to relevant information effortlessly.

Enhanced Accessibility & Usability

The new design prioritizes accessibility, ensuring compliance with web accessibility standards (WCAG). High-contrast elements, clear typography, and logical content grouping make navigation smoother for all users, including those with disabilities.

Landing Page Solution

Adjustments made from user feedback:

For accessibility and cleanliness, white background where the orange boxes used to be.
To ensure the "Library Services for:" section's buttons stood out, we made the primary button a text button.

Problems & Key Goals Solved:

Modern, spacious layout with wide margins for a clean and uncluttered look.
Streamlined navigation enhances usability and helps users find key resources faster.
Clear information hierarchy ensures essential details are easy to find at a glance.
Refreshed visual design with balanced typography, white space, and an intuitive structure creates a more engaging and user-friendly experience.

New Navigation Menu

Insights from the card sorting exercise directly shaped our new navigation menu. Instead of a dropdown, each main navigation item now leads to its own dedicated page, where users can easily explore content that was previously buried in sub-menus. The exercise also helped us streamline the menu by eliminating redundancies and optimizing the placement of key items for a more intuitive user experience.

Old Navigation: dropdown menu

New Navigation: each main navigation item now leads to its own page.

Library Floor Maps

Outdated & Ineffective: The existing floor maps were visually unappealing and lacked essential navigational details.
Thorough Research: I toured the library to verify and update all information.
Enhanced Clarity:
- Implemented a color-coded system for departmental and study rooms.
- Used bright, easily recognizable icons for quick identification.
- Added dotted outlines around bookshelves for better visibility.
- Spaced out key areas (study spaces, computer area) to improve readability and wayfinding.

Old Floor Maps

New Floor Maps

Research Guides

Clearer, more prominent icons enhance subject recognition at a glance.
Streamlined navigation by removing the "College" section, aligning with user data and simplifying the interface.
Dedicated search bar allows users to quickly find specific research guides.
Improved visual hierarchy with refined typography, spacing, and a modernized layout for better readability.
More engaging design featuring a full-width hero image that draws attention to the search function and primary content.