Decker Library

File Under: Digital, Website, UX/UI, Development.

This redesign of the website for MICA’s Decker Library was a way to explore web strategy, design process and development techniques. Done through an advanced web design course, the project required me to synthesize not just the aesthetics of the site but the structure and organization, the user experience, a consistent visual language, and the front-end development of it. In order to do so I conducted interviews, created personas, analyzed similar sites, created a new site organization and map, developed tiered page hierarchies, and then designed and developed it. Below you can find much of the process that led me to the design solution I created.

Take a look at a working prototype I developed here.

And take a peak under hood in the github repository here.

decker library site screens

Development

To develop the prototype site I used terminal command line tools. Workflow was automated using gulp, and packages tracked using bower. It was hand-coded in HTML, CSS and javascript. The design and code takes advantage of a bootstrap framework, and to some degree media objects. Click on the images above to view live prototype pages.

Personas

I interviewed 10 students and teachers and 2 librarians to get a sense of who uses the library and how they go about using it. From the information collected, I created 3 different personas that interact regularly with the library website: the casual user, the power user, and the librarian, and identified what they use the site for, what pain points they had, and what they wished could be incorporated.

jessica

Jessica Librarian
From a librarian's perspective the biggest issue that people come in and ask about is not being able to find something because the catalog is separate from the website and thus creates confusion. News and Exhibition info is lost as a sidebar, and they spend a lot of time curating those things. Checkout is completely separate from the website. Often teachers give out misinformation about how to find something. Jessica would like more consolidation of pages because keeping up with updates is difficult with the vast number of pages. She also pointed out that the Search the Catalog button on the mica.edu page is a misnomer because it links to the MICA Account page, not a search.

doug

Doug Casual User
Doug doesn’t use the library nor the website much; he finds both to be unpleasant experiences. For him even just finding the catalog is hard and search capacity is limited. He mentioned that one of the things he’s frustrated with most is that the interlibrary loan form is not easy to find/in an accessible place. For him the World Cat website is easier to use. Doug also thinks there is too much stuff on the decker home page and too many results in search.

michael

Michael Power User
Michael uses the library a lot. To prepare for a trip Michael has to print out individual book listings to find all the books he wants because the list option only prints out the titles. Michael would like the catalog to search the World Cat so you don’t have to go to another site if you need a book from another library. One of the ways he finds material in the physical library is by looking at the books next to the book he is checking out and wants a suggested book box that functions the same way. For Michael the information hierarchy is flat, the checkout numbers aren’t super visible. Also the ebooks are mixed into results and he would like a way to turn those off easily.

new york public library competitive analysis
ucla competitive analysis
stockholm library competitive analysis

Competitive Analysis

I researched many libraries in order to get a good grasp of how other library sites functioned, what they looked like, and what features were strengths or weaknesses. I scored them all on the functionality and information architecture of their homepage, search result page, and a single item page. I also rated their aesthetics and overall experience. I noted pros, like prominent search bars, and cons, like obfuscated call numbers, as well as an overall summary of how I felt.

Current Site Map

current site map

Redesigned Site Map

Redesigned Site Map

Site Map

The library actually consisted of two sites, a large, copy heavy piece of the mica.edu site and then the catalog search. It was confusing to a lot of the users that I interviewed. There was also a lot of duplication: pages that were actual duplicates and pages that essentially had the same information. One of the librarians pointed out that because of the number of pages and how deep the site went, content was often out of date and sometimes it was easier to just create something new rather than search through the labyrinth of pages to find it. I went through all the pages and created a current site map, noting which were duplicates and analyzing the structure of it all. I took into account the information from the personas and the competitive analysis, as well as groupings that made sense for navigation, and worked to simplify the organization into better and easier experience.

design mocks

Design Directions

We were strongly encouraged to use the MICA branding, typefaces and colors. I created three variations of a design that met the needs of the different personas and worked within the framework as defined by the page descriptions.

search result page description
homepage description
content page description
my account page description
single book page description

Page Descriptions

Instead of creating wireframes, I created information architecture for the website using a tiered system of page descriptions. The descriptions allowed me to create a hierarchy on each page and inform the design and priority of different elements. It also helped reduce clutter on the mobile sites.

desktop design
mobile home page
mobile book page