ShelfMatch
ShelfMatch is a card-based book-discovery app prototype, designed in Figma to help readers explore recommendations and save books they want to read.
Brief
Design a book-discovery experience for a busy student who finds long recommendation lists overwhelming.
My contribution
Individual project for the Interaction Design course. I worked on the user flows, visual design, interaction design, Figma prototyping, and Lottie animation.
Outcome
Completed a Figma prototype covering book discovery, filtering, saving and selected feedback states.
Project grade: 100/100.
The concept grew from my own reading habits and experience using book-discovery apps.
A reader signs up or logs in, picks favourite genres, then browses and saves books from cards and explores by filter.
- Sign up or log in
- Choose genres
- Browse and save books
- Explore with filters
- View results
Early user-flow exploration.
Final screen overview
Choose a chip in any of the three groups and the results screen restates the active filters above the books, with a clear-filter control.
The three filter groups
Genresromance Moodsangst Trendingbooktok favorites
More than a book cover
ShelfMatch explores a quick, visual way to discover books, with book details providing context beyond the cover. My design intention is for readers to learn what a book is about before deciding whether to save or dismiss it. The prototype recording demonstrates saving, dismissing, and opening a saved book’s details from the saved-book row.
Recording of the Figma prototype: browsing cards, saving with the heart, dismissing with the cross, and opening saved-book details.
Button and error feedback
Continue looks inactive on an empty form and turns high-contrast with an arrow once it is filled. An incorrect entry turns the fields red and shows a text message.
Decisions in the final prototype
- Genre, mood, and trending filters for browsing.
- Inactive and active button states that show when a form is ready.
- Text error messages paired with red field states for incorrect log-in details.
- Brief confirmation messages when a book is saved or dismissed.
Reflection
ShelfMatch taught me how to turn an app idea into an interactive interface, with attention to usability and feedback. Next, I’d like to develop the remaining screens and interactions into a complete experience, with the longer-term aim of turning the concept into a working app.