CASE STUDY · 2026
Website Design
Framer Development
Interaction Design
E-commerce UX
(01)
PROJECT OVERVIEW
CLIENT
Bookshelf
YEAR
2026
ROLE
Design & Framer build
DURATION
10 Days
(02)
Every project runs through the same focused stages, so nothing important gets skipped.
Phase 01
Concept & story
Shaping the idea of a handpicked, human bookstore: no sponsored slots, no endless scroll, and every book chosen by someone who has read it.
Phase 02
Interaction design
Designing a draggable 3D shelf, covers that tilt on hover, a look-inside preview and a three-question reading quiz that shuffles the books.
Phase 03
Framer build
Building every interaction natively in Framer, with genre shelves, a full shop page and responsive layouts for desktop, tablet and phone.
(03)
Design explorations, layouts and visual directions that shaped the final product.
(04)
Online bookstores tend to look the same: long grids of covers, star ratings and recommendations driven by algorithms. You lose the best part of a real bookshop, picking a book up and reading the first page before you decide.
For an independent store, that sameness is a problem. Its value is the taste of the people who choose the books, and a generic grid hides it.
The goal
Bring the feeling of browsing a physical shelf online, and make discovering the next book feel personal and fun.
(05)
Bookshelf puts the books themselves at the centre. The home page opens on a pile of 3D covers you can hover to peek inside, and the bestsellers sit on a shelf you can drag, pull forward and open.
Key features
A draggable 3D bestseller shelf with a look-inside preview
Five genre corners: Thriller, Romance, Sci-Fi, Fantasy and Self-growth
A 30-second reading quiz that shuffles the shelf and opens your match
A shop page where every cover tilts and opens to its first page
A weekly newsletter with one handpicked book
(06)
(08) BUILT WITH
