Case Study: Neighborhood Library
As part of the Google UX Design Certificate Program, my third project was to design a way for neighborhoods to ensure that everyone has access to books. So I designed an app and responsive website for a nonprofit neighborhood that I named Naberly. Continue reading to see how I took this project through the design process.
Product
Naberly is an organizational network of neighborhood libraries. The website allows users to start their own library. And the app is used to facilitate book exchanges and track the general location of books. The app also provides a map of libraries and books nearby.
Duration: December 2021 - April 2022
Overview
Problem
Book readers want to discover books in neighborhoods that interest them and potentially start their own neighborhood library.
Goal
Design an app and responsive website that encourages users to share/exchange books and engage with others in their community, track the general location of books, and start their own libraries.
Role
UX designer designing an app for neighborhood library book exchanges through every aspect of the ‘EDIPT’ design process.
Understanding the Users
My user research began with conducting interviews and creating empathy maps to understand the users I’m designing for and their needs with respect to accessing books in their neighborhoods.
Two key user groups were identified through my research. One group pertains to adults, particularly parents, wanting access to books about diverse characters written by diverse authors. The second user group refers to people who want to start their own neighborhood library book exchange.
Imani
Age: 35
Occupation: Interior Design
Imani is a part-time interior designer. When she’s not working, she spends most of her time with her kids - who are in elementary school.
She and her kids visit a little free library every weekend. She loves reading science fiction and biographies. Her kids love to read fantasy and short stories.
Pain Points
Availability
Information about book availability is unknown
Diversity
Available books like diverse characters and authors
Management
Lack of ability to manage available books and logistics
Engagement
Make book exchange experience engaging with others
Competitive Audit
I performed a competitive audit on four direct and indirect competitors to determine their strengths and weaknesses as well as to identify gaps and opportunities for my product.
Each competitor had their own unique features. BookCrossing offers a tag & track feature that allows users to see where books have been as they're exchanged. Both BookCrossing and PaperBackSwap had a huge community presence, however, they both had poor visual design. And accessibility was a strong suit for both Little Free Library and OverDrive.
Based on my analysis, I decided my product would offer a book-tracking system in addition to an easy-to-follow book exchange process. I also wanted my product to offer a sense of community with fun and engaging features the foster diversity and inclusion.
User Flows
Two user user flows were created to align with the two key user groups identified earlier. The first one illustrates the book exchange process, and the second one shows how users would start their own library.
Wireframes
As I transitioned from paper wireframes to digital wireframes, I decided to use tabs to separate the list of books and guests. This looks more visually appealing while also adhering to Gestalt principles on similarity and proximity.
The list of books is what is available at that library. In the 'Guestbook' tab, library visitors can leave a message about their visit.
Tapping on a book card opens a screen with book details including a journal with comments from previous readers.
Usability Study #1
For my first usability study, I had participants test both user flows in the low-fidelity prototype. Below are key insights that came from the study. I then updated the low-fidelity prototype to address the insights.
Process steps need to be separated onto different screens for users to easily complete
The store icon alone is not sufficient enough for users to get to the store
The register library screen needs to have intuitive interactive features
Refining the Designs
Usability Study #2
Participants tested the high-fidelity prototype in the second usability study, which revealed the findings below. I then made modifications to the prototype based off these findings.
Users want to take a book by selecting it from the list of available books
Users need more icons to assist in viewing content and they need consistency in how icons are use
Users need better guidance on the library registration process
"Exchanging Books" User Flow
Check in to library
View available books
Take a book
Leave a book
"Start A Library" User Flow
View steps for starting a library
Purchase registration and materials
Register library into the network
Responsive Website
After designing the Naberly App, I went on to design a responsive website by going with a mobile-first approach. In understanding that websites are more informative than apps, the focus of this website is more on how to start a neighborhood library. Users can purchase materials from the Naberly store and register their library into the Naberly network.
The design system for the app was carried over and expanded for the website. And more interactive and animated features were added in transition from the smaller to larger website, such as hovering over images to view more information.
Accessibility Considerations
Visually-Impaired
Libraries can add the “Brill Braille” badge to their info page indicating that they have books written in braille
Language
Libraries can add the “Bilingual Bin” badge to their info page indicating that they have books written in other languages
Color
The color scheme of the Naberly neighborhood library app meets accessibility levels
Takeaways
I learned how to incorporate Google’s Material Design Kit in Figma, which helped speed up the process of creating mockups and a high-fidelity prototype
Impact
The app offers a sense of community and engagement at the center of book exchanging
One quote from a study participant:
“This app seems fun to use and would encourage me to read more.”