Riverton: Design Solutions
All changes were prototyped on unpublished pages, presented to the librarian, discussed and revised as needed, and approved before being implemented.
Home Page Priorities
Discussions with the librarian led to the following ranking of information and activities:
News/Announcements, when needed (hidden otherwise)
Finding library books to read/Catalog access
"Question of the Week" activity (this is a regular activity with prizes and can generate emotional connection)
Doing Research, organized further by grade, subject, and research tools
Library Hours
Teacher Resources/links
Library Presentations
Everything else
Blog
Information about the Librarian
Contact information
Mission Statement
Book donation
Link back to Riverton School site
Suggest a book
#1-4 are primary. #5-7 are for secondary personas. These need not go "beneath" 1-4 and have small enough data to fit in a side bar in the desktop UI. #8 items can be relegated to the bottom of the page, in the footer, or solely in the navigation menu.
Figure 1: Early wireframe of basic layout
Site Map
The website is deliberately very flat, with all pages accessed from the home page or navigation menu, except direct research links. Tinted boxes are external to the Riverton site and open in a new browser tab.
Follett pages are connected to each other from the Follett UI.
Figure 2: Site map
Visual Considerations
A general white/blue/gray color scheme was selected for contrast and vibrancy, given the young audience.
For the very young students who have not yet mastered reading, imagery is added to help navigate and provide color to the general interface for a friendlier feel.
Fonts for student areas are generally larger and bold for easier reading
Links and buttons are large for easier selection, both on desktop and mobile.
Home Page Design Results
For desktop and tablets, the home page uses a general 4-column design, with primary data spanning 3 columns and column 4 used for the sidebar items.
All sections have some kind of graphic in the upper left corner of the "strip".
When there is not any news to announce, the News You Can Use section will not be shown.
The "Find a Library Book" section begins with a search form for which I wrote code to allow the search buttons to submit directly to the Follett searching function, saving a click and removing the least used parts of the Follett interface. Note the use of "Search Everything" instead of using the term "keyword" which is jargon to young students.
Figure 3a: Desktop/Tablet home page (some sidebar content still in progress)
The Browse link beneath the buttons goes to the excellent Destiny Discover interface previously mentioned (the browse parts of Destiny Discover are very good, but the search is still a little odd).
In the "Do Research" section, the three rows of grades (K-1-2, etc.) go to three sub-pages (as shown in Figure 2) with specific resources for the grade and for the "band" of grades. NOTE: these sub-pages are in progress. Visually, the buttons for the rows are meant to reflect some aspects of the students, getting progressively "cooler" and more complicated.
Figure 3b: Closer look at the primary area of the home page
On phones, a single column is used, with the columns of a row stacked on top of one another as appropriate. This means the sidebar items are interspersed with primary data, which is reasonable since they are shorter than primary sections and easier to simply scroll past while not abandoning the needs of secondary personas who may be more likely to use phones to, for instance, check library hours.
Figure 4: Mobile home page
Menu Navigation
Not all of the information on the home page requires entries in the navigation menu. For instance, the Question of the Week doesn't need its own page, nor do any of the sections of the sidebar. The Mission Statement and Blog do not appear on the home page at all. While the blog would normally be something I would want to advertise more on the home page, the librarian does not update it often enough yet.
The desktop menu items are all always visible. On mobile, the "hamburger menu" (see Figure 4) makes the menu items appear. Otherwise, their contents are identical.
Figure 5: Navigation menu
Reorganization of "The 1000 Links"
The design of the home page has already incorporated a number of sections of the "1000 links". The rest are organized under the "More book links" and Do Research sub-pages. Each of these pages has a similar 3-column layout with either 3 sections or 6 sections, as shown in Figures 6 and 7.
Figure 6: links page layout, 3 sections
Figure 7: links page layout, 6 sections
This concludes the new website design for the Riverton School Library. Implemented changes have been well received by Riverton (see the librarian's January 2, 2018, blog post "A Whole New World"), with discussions ongoing for future changes.
You know the right questions to ask in terms of understanding the people who will use the website.
-- Amy Penwell, Librarian, Riverton School, Riverton, NJ