Redesigning the Library: An Old Fashioned Approach

When tasked to redesign a library system website to be specifically tailored to the elderly, where do you begin?

We designed a simplistic website that is not only navigable, but also clean and easy on the eyes. We consulted websites most commonly visited by the elderly, and analyzed the underlying themes associated with those pages. Taking these themes, we then drew on our visual design knowledge to create the most accessible website possible for our target audience.

Our final prototype of the home screen, features four large, intentionally labelled buttons.

The Ideas

To better understand our assigned user group of those aged 70+, we researched what design aspects were relevant and necessary when designing for those in this group. Some of our discoveries included:

  • Large buttons to mitigate accidental, incorrect selection
  • Large fonts to increase readability
  • Little to no use of varied shades of blue, as it becomes harder to discern blues as you age
  • Reduction of page scrolling, as it can cause the user to feel “lost” on the page

A mood board was also constructed to understand the design of websites most often visited by the user group.

See sans-serif fonts, large text and buttons.

Some of the themes we gathered from the mood board included:

  • Large, sans-serif fonts
  • Large, well-labeled buttons
  • White text on a colored background
  • Presence of search bars

The Sketches

With our assigned age 70+ user group in mind, it was decided that the current Union County Library pages to be redesigned include:

  • Homepage — All users will see and use this page.
  • Book Search — Likely to be used to find a specific book they’ve been searching for, or to browse in hopes of finding a variety of new-reads.
  • Locations and Hours — Important for users who want to know whether or not a location is currently open, or the weekly hours for future use.
  • Get a Library Card — Important for users who are new to the library system and will need assistance in creating an account.

The team divided and each member sketched 3–4 designs of the selected pages and then reported out about their design decisions with the rest of the team. Feedback was collected about each of the design ideas and many were combined into a final, single sketch for each of the four pages. For the homepage, these ideas included:

  • A “What’s New?” book slider at the top of the page to showcase all of the new books that a user can find at the library.
  • Large, square buttons to mitigate confusion when navigating the homepage and to decrease user error when choosing buttons.
  • Absence of a hamburger button menu, as menus with many options can often be overwhelming and confusing. It was also decided that a menu pop-up could be confusing for many in the 70+ user group.
  • A “More Info” button to eliminate the need for scrolling, as scrolling can often be unintuitive for some people in the identified user group.
Some initial sketches of the homepage included a hamburger button menu and slimmer buttons.

These ideas were combined the form the final sketch of the homepage.

The final sketch included large square buttons with simple text labels.

The Prototypes

When we began creating our prototype, we had to decide on what colors and fonts to use for the page. Colors and fonts weren’t explicitly talked about during the sketching process so that became the team’s first area of concern while developing the prototype. We browsed sans-serif fonts and determined that Helvetica Bold would be the most readable font for our target group.

Our color scheme went through several iterations before we arrived at our final design. We initially started by using a light grey background and light green buttons, but found that there wasn’t enough contrast between the two colors to make the green stand out. After unsuccessful attempts to redesign our color scheme, we consulted Adobe Color CC and utilized their color wheel to arrive at our final grey-blue and green scheme.

The most important thoughts in picking our color scheme were:

  • Contrasting Colors
  • White text on darker background
  • Buttons standing out from background
  • Gestalt’s Law of Similarity
  • All buttons were colored green
  • All arrows were colored red

As we started translating our sketches into the prototype, we had to alter what we had sketched to make the prototype work with our color scheme. Our see all books page was one example of the prototype diverting from the original sketch.

The final sketch of the See All Books page sported a different title header and book switching buttons at the bottom.
The final prototype for the See All Books Screen with red book switching arrows on the sides.

Our redesigned progressed in the following way:

  1. The green arrow buttons on the bottom bar conflicted with the red arrow scheme we had established.
  2. The green arrow bar was removed and changed into red arrows on alternate sides of the displayed book.
  3. The lack of button at the bottom of the container created an awkward visual hierarchy because a user would be guided to an empty space at the bottom of the page.
  4. This led us to the realization that there wasn’t a clear and intuitive way to find more information on the displayed book.
  5. A see more info button was added at the bottom of the container creating a better flow of the page from top to bottom.

The Result

The final resulting designs stayed true to what our research told us we needed to tailor to our target audience, but ended up looking very different from what the original concepts described. The strengths of our prototype are that the pages are:

  • The site is very easy to navigate, with large buttons that are intentionally labelled to show exactly what someone might get out of pressing one.
  • Each page uses a contrasting color scheme to establish a figure/ground relationship between the dark blue background, green buttons and light gray text containers.
  • The text containers themselves create a proximity relationship with the objects inside it, letting you know that the arrows in the container will affect what book is displayed inside the box, rather than affecting any content outside the container.
Medium green, white and light gray stand out on the dark blue background.

The web pages were designed to cater towards the elderly, but after showing the designs to several people, many of them thought the website was geared towards the very young. This was interesting, because in a lot of ways, very young people and very old people have the same sort of needs when it comes to navigating the web, like large buttons for reduced motor skills and large descriptive text that can be easily read and interpreted.

The feedback we received on the designs was varied. Many people found it difficult to read the white text on the light gray and green backgrounds, while others thought the contrast was perfectly readable. Some viewers were confused because it wasn’t obvious that they could press the logo at the top of the page to go back to the home screen.

Others were thrown off by the books we chose to display in the prototypes. As it turned out a simple search of “old books” not only provided the books that older people might have read for fun when they were young, but also books that younger kids would have to read in an educational context today.

To Kill A Mockingbird may have come out in the 60s, but students still read it today.

If we had time to make a second version of the prototype, we would be more intentional with the selection of colors to have them contrast as much as possible, and have better labelling for buttons that don’t fall into a similarity relationship with the rest of the buttons on the site.


In Conclusion

This was the first time any member of the team had designed anything with these types of guidelines and constraints. A lot of the time, we would make decisions simply by looking at a design, and if it felt wrong, we would try something else until one of the ideas worked. When we first started to create the design, we didn’t think the prototype would end up looking like it did at the end, but after coming up with ideas, throwing some ideas out, and combining many ideas together we reached the design we have now, and it seemed work.

Lacey Gavala, Jacob Mendelowitz, PJ Onusconich

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.