Minor Redesign to the NNELS Website

The last time I really worked on the website, I did not change the look of the site at all, simply using the existing look and making it responsive. After some feedback and based on general good UX practices, I made a couple of mock ups on how to improve the site with some minor changes.

Phased Redesign

I did not want to do a full redesign or rewrite of the theme. I figure we would do that when we upgrade to Drupal 8 (whenever it happens).

Since the changes are generally minor, I thought it best to do it in phases. Making a couple of changes, letting users get used to them over the course of weeks or months, then making the next couple of changes. As a result, the redesign is split into multiple steps.

Phase 1

The first phase consists of very minor aesthetic changes that were suggested:

  • change background colour: make this a very dark blue or lighter grey
  • remove borders around recently added/featured book descriptions on front page

The result looks like this:

Since these are super small changes, by the time this is posted, phase 1 will probably already be done.

Phase 2

In the second phase, we will move search so that it is consistent across all pages instead of the front page being different.

  • move search so that it is using the same layout as all the other pages
  • consider revising the welcome blurb and Browse Collection sections; one option would be to remove the welcome blurb, replace with news feed

This is what the header and search area looks like on the other pages, so the idea would be to have the same thing on the front page to make it more consistent:

(Before I left, I managed to get us through Phase 2.)

Phase 3

Phase three introduces a top bar to the site. Right now, there are many things cluttered into the page header area, so to unclutter the header, we would introduce a new area to the site. Having a top bar is consistent with what most other sites do for their settings, login and language buttons. Most of the buttons will be more or less in the same place, just not in the logo header area anymore.

  • move colour contrast, language, login to top bar
  • optional: move colour contrast and language first, wait till phase 4 to move login buttons

Phase 4

Finally, we can consider moving the search bar to an even more prominent location, to the right of the header now that all the buttons will be in the top bar.

  • move search on all pages next to NNELS logo
  • optional: also move login buttons depending on decision in phase 3

Final Look

With all the changes done, the front page would something like this:

Hopefully, this will provide a more consistent user experience across the pages, and encourage people to look for books.


I recently went to take a look at the site and lo’ and behold, the site now (August 2018) looks much closer to the mockup I made:
screenshot of NNELS front page

Author: Cynthia

Technologist, Librarian, Metadata and Technical Services expert, Educator, Mentor, Web Developer, UXer, Accessibility Advocate, Documentarian

Leave a Comment

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: