Create your own Shelves (ShelfJoy) + Attached mockups

Hey Dribbble 👋,

This shot from the Shelf Editor I worked on while working for ShelfJoy at @Wingify . Since the beginning, the crux of our platform was around shelves which are basically lists of books that people might want to read, have read or are reading. Or the lists could be as wild as something related to their interests like science, astrology or David Beckham. 🔬👩‍🚀⚽

We never wanted the shelves to feel like a typical list which could be boring and usually contains meta-data. Hence we thought to design the shelves to feel more like an article or a blog post. The vision was such that when you're reading through the shelf someone has created, you feel like they're taking you through their physical shelf while giving you the gist of the books that are in that shelf, just like in real life. 📖🙂

In order to do that, we designed an editor that not only helped users to add books to shelves very easily but also add their comments/reviews in addition to reacting with emojis. The whole flow to add books/comments/reactions and publishing the book were as follows 📚💬🦄

(Please refer to the additional screens attached for reference)

1️⃣. Write a title of the shelf inside the input field with placeholder "Title of your Shelf"
2️⃣. Write a description of the shelf just below the "Title of your Shelf" input field (optional)
3️⃣. Add related tags so others can find it easily on the platform using the input field with the placeholder "Add Tags"
4️⃣. Upload a related cover or add from Instagram
5️⃣. Add books by using the "Add Book" search field which is the 2nd card on the page
6️⃣. Add your comments using the input field "Add your notes here" inside the book card you just added
7️⃣. Use one of the 7 emojis to describe how you felt while reading the book or after reading it (if this is your to-be-read shelf, you can ignore the emojis)
8️⃣. Add as many books you want alongside adding comments and reactions
9️⃣. Publish the shelf by using the "Publish" CTA that's placed on the bottom bar of the page.

This was a ton of fun to design, iterate and build with fellow developers back then! To get the gist/experience of the Editor, feel free to sign-in to ShelfJoy and click "Add a Shelf". Also, here's a quick example of how a shelf would look like when published: Example shelf: Best realistic books on the Afghan & Iraq war

---
Press L to show some ❤

Find me on the Internet: Portfolio | Blog | Facebook | Twitter | Instagram | LinkedIn