A children's bookstore that feels like a magazine, not a warehouse
A curated digital children's bookstore — 22 screens, a signature page-transition language, and 68 end-to-end tests.
Solo · brand, design, full SPA & tests
1.5 weeks
2026
- 22 screens with role-based routing
- 15-rule architecture template (149 LOC max per file)
- 6-phase page-transition system (GSAP + React Router)
- 68 Playwright E2E tests across 3 device targets
- 3 locales, 900+ localised strings
- Mock-first — designed and tested with no backend dependency
A children’s-literature bookshop has a split audience and a split job: parents buy, children are the reason. The store has to read as editorial — closer to a magazine than a catalogue — without losing the plumbing a real shop needs underneath: search, filters, cart, checkout, account. The design question was where the editorial voice earns its keep, and where it steps aside for the reliable mechanics of buying a book.
The catalogue is the real shop, so it opens fast and filters hard. One template drives every listing — filter by age, theme and language, read straight from the URL, so any filtered view is a shareable, bookmarkable link. Lazy-loaded covers keep the grid quick even when the catalogue runs long.
Every book gets the editorial treatment: sample spreads, reader age, theme and language up front, and a clear path to the cart without making anyone wade through marketing copy. The decision is parent-led, so the page earns trust before it asks for anything.
Collections are the magazine inside the shop: hand-picked, themed groupings refreshed on a cadence, each with its own landing page and voice. This is where Rivel stops feeling like a store and starts feeling like something you’d browse on a slow morning.
- 01
Foundation · brand & architecture
Visual language, the 22-page IA, and a 15-rule architecture template.
- 02
Storefront & catalogue
Listings, filters, book detail, and search — the core shopping loop.
- 03
The transition system
A 6-phase GSAP page-transition where the navigation itself becomes the curtain between pages.
- 04
Commerce, i18n & tests
Stripe checkout, 3 locales / 900+ strings, and 68 Playwright specs across three devices.
Let’s build yours.
If your product lives or dies on how it feels to move through, we design the motion and the merchandising together — so the experience itself becomes the reason people stay and come back.