NYPL Best Books & Staff Picks

An image of the Staff Picks Landing Page

The New York Public Library offers many librarian-curated lists. Annually and Seasonally, a group of librarians creates the Staff Picks and Best of lists. Part of our task was to make a fully Accessible web application where these lists could be searched, sorted, and filtered.

An image of a variety of layouts
Design artifacts laid out in Sketch representing mobile, tablet, and desktop screen lists and single items.

One of the challenges faced was building a website application that could reliably function without JavaScript. Additionally, the app must be fully operable by keyboard or assertive technology. Please see live example links and the initial concept designs and experience design work in the images below.

Prototyping and Wire Framing

My initial wireframes outline the structure of the end-user view. These gave substance to the initial concept and allowed the team to discuss the core facets of the application. The app had to be WCAG 2.0 compliant and be functional if JavaScript was disabled. These mockups allowed us to discuss semantics, design, and behavior.

An image of the mobile layout in wireframe form
Early stages of our application design. The above represents our working mockup of the web app's mobile version.

We used the web app Moqups, which allowed the team to add comments, anticipate possible functional issues, create content guidelines, and solidify the semantic structure. Our prototyping tools allowed us to rapidly make decisions and come to a consensus about features and functionality.

an image of mobile view wireframe
This wireframe provides an example of the application's "expanded" state and the team's notes, comments, and questions surrounding functionality.
Staff Picks Landing Page
This image demonstrates a full-size wireframe, along with specifications, notes, and comments.

Component Layouts

An image of a variety of layouts for key components
Each of these small-screen layouts meets the overall project requirements. Capable of handling different kinds of data.

With a mindset focused on Progressive Enhancement, my task was to create core components for various screen sizes and conditions.

an image of an artifact in the portfolio item
an image of an artifact in the portfolio item
an image of an artifact in the portfolio item

Some relevant links for Staff Picks 2018 can be found below: https://www.nypl.org/books-music-movies/recommendations/best-books/staff-picks Best Books for Kids: https://www.nypl.org/books-music-dvds/recommendations/best-books/childrens Best Books for Teens: https://www.nypl.org/books-music-dvds/recommendations/best-books/ya