Barbershop Books

A culturally responsive book recommendation tool designed to help caregivers and educators discover stories that reflect children’s identities, spark joy, and inspire a lifelong love of reading.

Client collaboration, product requirements, wireframing, prototyping, design system, high-fidelity mockups

Barbershop Books is a nonprofit that inspires Black boys and other vulnerable children to read for fun through culturally responsive literacy programs.


As part of my internship with Develop for Good, I co-led the UX design of a new web application to provide personalized,

bias-free book recommendations. We defined product requirements, designed onboarding flows, created a culturally responsive design system, and built a high-fidelity prototype featuring a quiz-driven recommendation engine and community-shared book lists.


The prototype allows caregivers and educators to curate engaging book experiences, while providing Barbershop Books with a scalable tool to support their literacy mission. The client praised the design as both mission aligned and practical for implementation, making it a key asset in their ongoing community partnerships and fundraising efforts.

600+ curated children's titles but no easy way to discover them.

Despite a rich library of diverse books, Barbershop Books lacked a digital tool to connect the right stories to the right readers.

1 – Product Manager
1 – Design Manager
1 – Product Lead
6 – UX/UI Designers (Develop for Good cohort)

3 – Developers

10 weeks (Summer 2025)
Prototype handoff for client integration with WordPress & future API expansion


Overview

The

Challenge

Research

& Insights

User Flow

& Ideation

High-Fidelity

Designs

Reflection

My Role

Team

Timeline & Status

Summary

Product Designer

Lack of Representation

Most book recommendation tools overlooked Black boys and other vulnerable children, leaving their cultural identities and interests invisible.

Parents and teachers had no simple way to discover relevant, high-quality titles, making it harder to guide kids toward joyful reading.

Barbershop Books’ passion for culturally responsive literacy needed to be translated into a functional, accessible digital tool.

Caregivers Unsupported

Mission-to-product gap

Goal

Our goal was to translate Barbershop Books’ mission into a joyful digital tool that empowers caregivers to discover meaningful stories and positions the nonprofit for long-term impact and growth.

We began by assuming children would be the main users of the app. Through weekly client meetings and market research, we realized the tool would have the most impact when designed for caregivers and educators. The adults guiding children’s reading journeys.

After conducting 10+ user interviews, we realized caregivers want:

We defined 5 core flows to capture how caregivers would interact with the tool. For the case study, I highlighted the 3 most impactful flows:

Before moving into polished visuals, we created low-fidelity wireframes to explore layout options, test information hierarchy, and validate flows with the client. Working in grayscale helped us focus on functionality over visuals, making it easier to iterate quickly.


With our flows validated and wireframes aligned with the client, we moved into high-fidelity deisgn. We developed a cohesive design system that balanced playfulness and accessibility incorporating Barbershop Books’ mission into every detail, from color palette to typography to custom illustrations.

  1. Book Quiz → Simple, culturally responsive questions that drive personalization.

  2. Recommendations → Dynamic lists tailored to preferences, with like/dislike feedback loops.

  3. Explore Page → Community-driven discovery of shared book lists.

Understanding the Users

Key Insights

User Flows

Low Fidelity Wireframes

Key Screens

Impact

Feedback

Takeaways

Happy Client!

Sign up & Quiz

Dashboard, Explore, List Creation

Design System

Book Quiz

Recommendations

Explore Page

Stories that reflect identity

Quick, bias-free discovery

Joyful and accessible design

*All animated components were drawn by hand using vectors!

This project provided Barbershop Books with a mission-aligned that transforms their curated library into an engaging tool for caregivers. It offered a clear path for digital growth, polished designs to support fundraising, and a joyful, accessible experience validated by both client and peer feedback.

Our final presentation was well-received by both the nonprofit and the Develop for Good team. Despite challenges with team turnover, we delivered a clear, professional demo and effectively explained both the process and technical details. Reviewers praised the functionality, polished UX/UI, and our ability to communicate the project’s goals with confidence and clarity.

Areas for growth included reducing filler words, simplifying slides, and leaning on “show, not tell”.

  • Learned to design with mission alignment, ensuring every feature supported Barbershop Books’ purpose.

  • Discovered the importance of prioritizing the true users, caregivers and educators, rather than initial assumptions.

  • Built skills in collaboration, iteration, and accessible design systems balancing playfulness with usability.

SS

Create a free website with Framer, the website builder loved by startups, designers and agencies.