OPEN LIBRARY

CLIENT

Open Library

TEAM

2 People, Product Manager, Myself

CONTRIBUTION

Research, Information Architecture, Wire-framing, Branding, Content Strategy

DURATION

March - July 2017

I was a volunteer designer working with a small team of other volunteers to re-design the Open Library website for desktop and to work towards a responsive experience for people on smartphones and tablets.  This involved initial research to understand the user base, information architecture for an established platform with many (sometimes extraneous) components and features, as well as wire-framing key pages, re-branding Open Library for versatility, and a gradual update to a more contemporary design.

 

BACKGROUND

Open Library is a non-profit where engineering and design teams are comprised of majority volunteers.  The website was put on hold for a while then revamped over the years by many different contributors with little documentation validating previous design decisions. This resulted in numerous inconsistencies and repetitiveness, i.e. three different About Open Library sections.

 

More recently Mek, an engineer and manager, was given the responsibility for the website and established as the point of contact for volunteers.

Even between the three About Open Library Sections, it was still a little unclear. As an overview here is a sample from a series of questions Mek answered for me to give more context as to how Open Library fits in the big picture.

Mek Survey

What is special about the Open Library (as a Library)?
We're accessible to the visually impaired
We lend to anyone, in every continent
We digitize our own works


Why was Open Library started?
Many online book websites (like GoodReads and Amazon) don't have (and aren't incentivized to make available) out of print material. The Internet Archive wants this content to be accessible
Many book cataloging services don't make their metadata publicly available. Open Library wants to empower the entire community (of libraries, researchers, developers, readers) to discover, cite, locate, and read books.


What do you view as the biggest opportunities for Open Library?
To help K-12 + higher education students access high quality educational content
To empower schools to curate and share their own reading-lists / curricula
To enable the visually impaired to access books
To help libraries pool their resources to reduce costs and reach more readers
To build a true library of the people: to involve readers in the process of funding, donating, and selecting works to digitize.

The Open Library Website in March 2017

 

THE CHALLENGE

Considerations

  • Incremental changes: While the final result of this design process may ultimately look radically different from the current site, we needed to introduce changes slowly and strategically for our current and loyal users.

  • Accessibility: We wanted to serve those who require enabling, such as the dyslexic & visually impaired. This should be reflected in language, markup, and visual components, following current standards.

 
Survey Notes
Survey Notes

press to zoom
Research Documentation
Research Documentation

press to zoom
Information Mapping
Information Mapping

press to zoom
Survey Notes
Survey Notes

press to zoom

Open Library's Service Triangle Overview - shared by Mek


Collaborate: (Building the World's Open Book Catalog (wiki))

Competitors / Analogies: OCLC, LibraryThing, Wikipedia + Wikidata


Our Strengths
We're completely open: anyone can edit and improve our data
Our community is somewhat active


Our Weaknesses
It's somewhat hard to edit
Most users don't care about metadata and get confused by options like "Edit" (or when they are shown books which don't exist)


Reading:

Competitors: Traditional Libraries, Overdrive + Hoopla, Bookstores + Amazon


Our Strengths
Big selection (millions of books) + not limited to 1 library (e.g. overdrive)
Every book we've digitizes is accessible for the visually impaired
We digitize works ourselves + we can accept book/$ donations to improve our collection


Our Weaknesses
There's some delay in making books available
Discovery & curation
Confusing + inconsistent presentation
e.g. read v. borrow v. books with no calls to action!
Our mobile reading experience is limited (e.g. no Kindle)


Personalization:

Competitors / Analogies: Goodreads (owned by Amazon), LibraryThing


Our Strengths
People love using our Lists feature
We have a ton of under-leveraged subject tags
Lists let us know what users want:
I "like" (and/or want it digitized) or "recommend" this book 


Our Weaknesses
Lists are not yet searchable
Users cannot yet "like" (i.e. "promote") lists
User cannot easily add categories to books
We don't show readers their checkout history (we could)

The next step in the research was understanding who the users really are in order to validate our decisions for information architecture, content and emphasis for the webpages. We created a survey to better understand our users intending to have a link for visitors to contribute their responses.

Understanding the Users: Hypothesis

(Note: We had little hard data on exactly who uses OL, the following represent our best qualitative guesses. Also, note that the categories can overlap.)

 

  • Readers: They use OL like a library, searching for books they want to read, using waitlists, checking out books, saving items on personal lists.

  • Researchers: They use OL like a book metadata database, using our API’s to download and analyze large amounts of book metadata.

  • Wiki Contributors: They use OL like a wiki, using the site’s editing features to add new info, correct existing info, and donate their time to improving OL.

  • Moderators & Admin: They use OL with privileged access to administrative functions, merging and cleaning data, managing users, etc.

  • Developers: They use OL as a code project, accessing the developer documentation and GitHub account, donating their time and smarts to improving the codebase.

Unfortunately the survey did not move forward into implementation as it was stopped by those higher up the chain who did not see the need for including a survey request on the website.  It was a lesson for the team around communicating design goals and process for approval before putting time and effort into an endeavor.

 

WIREFRAMES

One of our first projects was to consolidate navigation to the top-bar with the logo, search bar, account access, etc.  The website originally had buttons stacked upon buttons which belonged to a variety of categories.

We were unsure which categories users would expect to see featured; Catalog, Ebooks, Audiobooks etc.

Perhaps a few card sorting exercises will help us determine the best categories for our users which I would like to put into motion later on.

Homepage Low-Fi Wireframe
Homepage Low-Fi Wireframe

press to zoom
Homepage Low-Fi Wireframe
Homepage Low-Fi Wireframe

press to zoom
Homepage Low-Fi Wireframe
Homepage Low-Fi Wireframe

press to zoom
Homepage Low-Fi Wireframe
Homepage Low-Fi Wireframe

press to zoom

A few potential homepage layout directions referencing other media content websites like Netflix, Rotten Tomatoes and Spotify as well as current library/lending websites, .

The Open Library Website in July 2017

After a branding update to a more condensed logo more suitable for responsive design we are able to create a more concentrated header navigation featuring an enlarged search bar with filters and an Log-in and Sign-up action buttons.

Book Carousel Low-Fi Wireframes
Book Carousel Low-Fi Wireframes

press to zoom
Book Carousel Low-Fi Wireframes
Book Carousel Low-Fi Wireframes

press to zoom
Book Carousel Low-Fi Wireframes
Book Carousel Low-Fi Wireframes

press to zoom
Book Carousel Low-Fi Wireframes
Book Carousel Low-Fi Wireframes

press to zoom

We took a closer look at the carousels on the homepage, and the actions that users would expect to take upon seeing the cover of an interesting book.

The previous images of books in the carousels had round green icons with unclear meanings and no other options for actions than to click on the book image leading to the book page.  A few too many clicks when we knew users like using lists, often listing books they have previously read, making a visit to the book page an unnecessary step.

The Open Library Website in December 2017

The current Open Library homepage, after removing the round green icons on the book images and adding an action button just below the books.  We also updated the design of the arrows and background while staying with the blue and cream color theme rather than the outdated olive green.

Book Page Low-Fi Wireframe
Book Page Low-Fi Wireframe

press to zoom
Book Page Low-Fi Wireframe
Book Page Low-Fi Wireframe

press to zoom
Book Page Low-Fi Wireframe
Book Page Low-Fi Wireframe

press to zoom
Book Page Low-Fi Wireframe
Book Page Low-Fi Wireframe

press to zoom

Book pages are another aspect of the website currently being improved.  The wireframes above are exploring some options for the book pages, currently the main book page is a completely different layout to the book page for different editions of the same book. (see comparison below)

Current Book Page and Book Edition Page

 

DESIGN CONTRIBUTOR SYSTEM

While my involvement as a volunteer designer with Open Library was sporadic and with mixed results, and design directions that have yet to be implemented, I wanted to set up an internal system for contributors, particularly volunteers who can devote a little time every now and then.  It would be a dashboard for new and returning contributors to be brought up to speed on past and current projects.  It would also be a way for volunteers to reach out to one another with specific projects and requests.

I created a questionnaire for contributors as well as updated the Github repository for Open Library and the Design Page.  The goal is to make volunteering for this nonprofit adaptable, accessible, and scalable, as well as a way to empower it's contributors who all have a common goal for making information open to the world.