Dropdown states for adding books to shelves - ShelfJoy

Hey Dribbble 👋,

This shot is about dropdown states I designed for adding books to shelves for ShelfJoy. The dropdown allowed the user to multi-select shelves and add a single book to many in just one go. The dropdown had 4 states:
- 1️⃣Idle state - where a placeholder label prompts the user to select a reading list to add a book to one or many shelves from the options
- 2️⃣Clicked / Selecting state - where the user can select one or multiple shelves from the list once clicked on the dropdown's idle state
- 3️⃣Selected state - where the user can see what shelves the book has been added to. The format of multi-selected shelves was imagined to follow the format of {shelf_name_1 , shelf_name_2 , .... , shelf_name_n}
- 4️⃣Clicked / Selected state - where the user is looking at the selected shelves and can also select more

Unfortunately, we never got around developing this and stuck with our one-click "Add to Reading List" CTA which just adds the book to your "Reading list" - which is just one shelf that comes pre-made with your profile on ShelfJoy. 📚🔖

Here's a quick example of how a shelf looks like with "Add to Reading list" CTA along all the books in that Shelf: 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

More by Sankalp Sinha

View profile