Search

Librarian Design Share

inspiration for library creatives

Open Search
Tag

look and feel

Library Website Redesign: An Interview

This isn’t a common Librarian Design Share topic, but one of the biggest design projects a library can undergo is the redesign of their website.  I am fortunate to work with two individuals who recently led redesign efforts at the Muhlenberg College Trexler Library, and I met them to discuss their process, priorities, challenges, and advice for other library’s attempting this endeavor.

Introducing

DSC_4331_5 (1).jpg
Brittany Robertson, Library Technology and Digital Experiences Librarian
Cunningham_Staff_Headshot (1).jpg
Nicholas Cunningham, Public Services Assistant

 

 

 

 

 

 

 

 

What inspired the website redesign?

Brittany shared that the redesign was inspired by assessment of the user experience.

“We knew that our site was difficult to navigate based on information from surveys and interactions with staff and faculty.  Our site was also dated, and we needed to update the underlying infrastructure. We could see from Google Analytics that most of our pages weren’t getting a lot of traffic.”

old website.PNG

Brittany and Nicholas shared with me the steps that they took to redesign the website, which, by the way, took 1 year from start to finish and “I’m not sorry that the full redesign is over,” Brittany said, “but it’s important to see the website as an ongoing project, needing continuous improvements.”

What was your process?

  1. The library’s web applications team initially decided to do the website redesign – it consists of several  individuals from each library department. However we created a design subcommittee (4 people, one from each department) so that design conversations were inclusive but the work could progress forward.
  2. The web applications team participated in an initial brainstorm about “what we wanted to accomplish with the new site.”
  3. By considering the needs of different types of patrons “the subcommittee came up with a couple of ideas for layouts, and engaged in a couple of rounds of feedback and editing.”  Layouts were shared with the full web team and then each department.
  4. A design was chosen and each member of the library staff helped to organize and review content.  “It’s a big site, and we’ve come up with the plans of a maintenance schedule so that all the content is reviewed annually.”
  5. We completed one round of assessment with students.  The assessment process (a series of tasks to be completed by the student) was reviewed by the IRB.  Changes were made to the website if students had consistent trouble locating information.

What were the main changes to the site?

Brittany and Nicholas described the changes they made to navigation, which was their first priority.  They determined that about seven menu items is ideal for successful navigation in order to “get patrons to where an item might be.”  They hope that if a patron can intuit where a piece of information would be based on headings then they would find it successfully. They altered site navigation design so that it resembled the design of other library platforms, including OCLC discovery and EBSCOhost databases, making navigation familiar and easier to use.  Similarly, consistent use of color scheme helped to tie all library interfaces together.

How did you stay organized?

They used agendas, taking minutes during meetings, and spreadsheets of tasks that they checked off as they were completed.  The hardest part? “Remembering what decisions were made and why,” Brittany said, “…we did struggle with that a bit.”

The final result – and the future

The website is visually appealing and ready for another round of user experience assessment, which will be completed later this year.  You can take a closer look at the navigation and content by exploring trexler.muhlenberg.edu.

new-website.png

Brittany is currently thinking seriously about accessibility – and implementing the accessibility changes that she’s already worked hard to design.  She recommended consulting W3 for accessibility guidelines and noted that she does want to test the final result with a screen reader.  She has worked hard to make sure that users of all abilities can navigate the site successfully with techniques such as shortcuts to skip navigation so that the entire menu isn’t read before the user can move on to the main page content.

Advice for Others 

When I asked them for advice they might give to others seeking to redesign their library website, Brittany and Nicholas emphasized flexibility and communication.

“Don’t get tied down to one idea” – Nick

“Get anyone who wants to come up with an idea to do it– but it is really hard to get people to come up with ideas.” –Brittany

“Whatever plan you set for the redesign process, chances are you’ll have to modify it/make it longer and there is nothing wrong about that.” – Brittany

“Creativity is a challenge” – Nick

And finally…

“Have a set date to go live.  Otherwise projects tend to drag on endlessly. “ –Brittany

0

Branding Your Library

We librarians tend to make a lot of help sheets and signage to assist patrons as they use our resources.  That’s really what Librarian Design Share is about, right?  But even with best intentions, we don’t always fully think about the way our publications as a whole look and feel to our patrons.

I think Librarian Design Share would be remiss if we didn’t talk standardizing the look of your library’s publications, or branding, if you will.  Brands can highlight something unique about your community (perhaps it’s near water or you’re known for an historical event), your library (maybe you have an awesome stained-glass window or a spiral staircase), or it can be based on something more abstract, like colors, shapes, or even text.  We based our library branding on the pretty rainbow of colors our bound journals make on the shelves.  Everyone has bound journals on their shelves, but there’s something about the color arrangement and the mass amount of them that make the way they look in our large, light-filled space memorable. Here’s our general publication header that can be copied to any document:

new brand

Whatever standardization you decide upon should happen across the board–from all the pieces of paper that a patron might see in your library to your web presence. This is our website’s look:

8-6-2013 12-10-59 PM

I thought my library was well on the way to doing this, but a quick audit of our documents online and on our slat wall exposed at least three previous brands that are still in use on our handouts.

old brands

Yikes, you know what my new project is…

Think about it terms of your favorite store: their shopping bags have the same look as their store signage as their website, right? So should our libraries.  It’s about making things more consistent in the minds of our users. More simply, it’s about showing our users that we care enough to keep things updated, neat, professional, and easy for them to digest.

If you have great examples of a branding campaign you’ve created and implemented at your library, we’d love to see them! Consider submitting them to our site and sharing them with your colleagues.

2

Look and Feel Constraints

As librarians we’re often designing websites, handouts, and publicity materials that have to conform to certain institutional design standards. Whether you’re in a library that requires its logo on every brochure or at a university with very specific font and color branding, you’ve no doubt felt the constraints that an established look and feel can have on your design creation. Here are the boundaries we work within:

Veronica

The college I work for is in the midst of a branding evaluation, meaning that at some point in the next few years we’ll likely have a revised logo, colors, and font that will be standard on all of our print and web publications. For the time being, here’s what we use:

homepage-screenshot

  • A fixed-width web template
  • Variations of gold and two types of blue to match our college colors
  • A very intricate logo
  • A standard header that takes up a good portion of the screen

Our web team is working hard to prepare for the changes that this branding evaluation will likely bring to the college’s virtual presence. Like me, the web developers hope that our new university template will be responsive, rather than fixed width, and that the college header will be much smaller. My hope is that we modify or eliminate the standard logo in favor of a simplified text-based brand. I understand the need for color constraints, so I’ve tried my best to work within the colors of the college.

To make up for the space taken by the college header, I’ve tried to keep the library header small, although I’m planning to revise it to take advantage of some of the wasted space in the middle and make the header menu more visible. I’ve also tried to make the search area and announcement slider the main focus of the page. I’m not sure how successful I’ve been, but it’s a start.

How do you work within web template constraints?

April

I work at a large university hospital with a specific department that concentrates on maintaining our brand so that it is not diluted or misconstrued among our thousands of employees and our international audience. Our brand standards call for a certain set of colors and fonts that should be adhered to when creating designs, even those that are used in-house.  Complying with these standards (see below) has been my biggest challenge when designing publications.

3-26-2013 1-40-10 PM

One of my first charges as a new hire was to redesign our General Info page (that you’ve seen here).  My first draft looked pretty similar in design to what you’ve seen, but the colors were my favorite lime green, grey, and orange, the fonts didn’t conform, and I neglected to add the institutional logo.  My supervisor quickly showed me the brand standards on our intranet, and I modified my design to incorporate theirs by carefully replicating the CMYK numbers and adding in other elements.

It’s not always easy, as I find the standards limit my creativity at times, but because I now understand and respect the reasoning behind the standards, I’m trying to follow them more closely in everything that I create.

1

Blog at WordPress.com.

Up ↑