Ramsés Moreno


Accessible interface for searching library databases

University of Guadalajara

Interface of the web interface for book search


The University of Guadalajara had an outdated platform to manage the libraries’ database of books. System administrators did not want to touch any legacy code.


As an external contractor I was in charge of the redesign and development of a new interface, with the following objectives:

  1. Redesign the interface to follow the new design guidelines of the University of Guadalajara
  2. The interface should be responsive, adaptable to desktop, tablet and phone devices
  3. The interface should be accessible, following Level AA Conformance of the Web Content Accessibility Guidelines (WCAG)

Project Management

Requirements Gathering

After the project was signed, I continued with requirements gathering. As the result, I created an Scope of Work documento to be used as validation of the scope with the client to continue with the process.

A scope document
Scope of Work (SOW) Document

Design Process

Content Inventory

I was the only designer on the project. I started creating a content inventory with all current 20 screens, their descriptions and an initial analysis of areas of improvement about both design and code.

Content Inventory
Content Inventory


I had 3 interviews with a visual impaired user. I learned how they used computer and web interfaces, mainly with the Jaws software. I validated the importance of following W3C standards when developing web interfaces and learned about Web Content Accessibility Guidelines.


I used wireframes to create the initial design deliverables. In the wireframing phase, I decided the content and their hierarchy, leaving out a lot of non important elements of the old interface.

Simplifying the search screen
Search Screen

I removed most of the elements in the initial search screen to simplify the interaction. The old screen had some advanced function that were not frequently used, for example, if the search terms should be used only as adjacent words. I opted for a most common design pattern for search boxes, having just the search term field and the search button. Then I opted to add only one more field, the library where the search should be made, with default to All Libraries. I left a link to advanced search for power users

Advanced Search, Search Result and Book Detail

All the screens experienced a considerable reduction of elements to make them less cluttered. The wireframing phase was an excellent opportunity to propose the changes in that initial moment.

UI Design

I followed the University Of Guadalajara Web Design Guidelines to make the initial design decisions, but I had to discard some of the guidelines in favor of a more accessible interface.

Responsive interface layout
I designed a responsive layout based in the design guidelines.
Font Family

The design guidelines stated that the official font for websites was Open Sans, but according to accesible guidelines, it is recommended to use a font were pair of letters that may seen as mirrored, like d and b and p and q, should have a noticeable difference and not to be an exact mirror. That is why I opted to change the font to Basic font family. Other design decision related to fonts was increase the letter spacing, in order to reduce the possible confusion between the letter m, an the r and n letters together.

Basic Font sample
The Basic font family has a subtle difference between the "mirrored" letters d and b and p and q.

I designed the composition for all required screens, delivering desktop, tablet and phone variants.

Basic search interface screenshot
Basic Search

The basic search has a very noticeable call to action element: the "search" button. As explained before, the number of elements of this screen was reduced to a minimum, having only search box, where to search and the search button. Advanced search is option as as a clickable link.

Search result interface screenshot
Search Result

The search result has a noticeable visual rhythm formed by each result item, were the clickable title stands out from the rest of the item elements. The search term is maintained in the search box at the top of the list, leting the user to refine their search without the need to re type everything again.

Book detail interface screenshot
Book detail

The book detal, in desktop and tablet mode, has a two column layout for the textual information, pursuing a visual order all field values starts a the same point, the field names are dimmed, lowering their visual hierarchy. In phone view, the layout changes to one column.

Interface of the web interface for book search
The new interface for searching for books in the libraries of the University of Guadalajara.