THE BOOKSTORE
PROJECT
Designing a Digital Map for Curious Readers
Client: In-house passion project
Scope: UX research · UI design · Web development · Content strategy
Deliverables: Responsive website with map integration and city-based browsing
Stack: HTML · SCSS · Vanilla JS · Leaflet.js
Live site: thebookstoreproject.com
The Idea Behind the Pixels
The Bookstore Project didn’t start as a brief. It started as a love letter to bookstores. Independent, character-filled, human-scale bookstores. The kind that still smell like paper and have handwritten recommendations tucked between the shelves.
As avid readers, travelers, and web designers, we noticed something odd: despite the abundance of travel apps, blogs, and city guides, there wasn’t a beautiful, trustworthy, curated space for finding bookstores abroad or in your own city.
So, we set out to build that space ourselves.
USER EXPERIENCE
We work closely with our users to understand their real-world needs and design experiences that feel intuitive, purposeful, and delightful. Every interaction on thebookstoreproject.com is shaped by empathy, curiosity, and a commitment to making book discovery easy, local, and personal.
The Design Thinking Process
We approached the project not just as designers or developers, but as users.
Step 1: Define the Experience
We kicked off by identifying user personas:
- The Traveler who wants to discover authentic spots off the tourist radar.
- The Local Book Lover is looking to explore their own city differently.
- The Collector who treats bookstores like museums.
From there, we created a shared goal:
Help users find, explore, and feel connected to independent bookstores with zero friction.
Step 2: Form Follows Feeling
Design is not decoration—it’s storytelling. Our challenge was to tell a compelling visual story without overwhelming the experience.
So we asked: What should this website feel like?
We landed on three keywords:
Curated. Calm. Curious.
That meant: no clutter, no flashing banners, no endless scrolls. We wanted to create a calm digital environment that feels as delightful as walking into a real bookshop.
UI Decisions That Matter
🗺️ A Map That Is the Experience
Most map-based websites use maps as a feature. We made it the main event.
- Using Leaflet.js, we designed a minimalist interactive map that displays bookstore locations in each city.
- On hover, pins animate subtly—inviting clicks, not demanding them.
- We styled the map tiles to feel custom and editorial, avoiding default aesthetics that scream “techy” or “tourist app.”
Each city has its own space, making the experience feel personal and local.
📸 Cards With Character
Each bookstore is represented by a simple, clean card, featuring:
- A photo (real and carefully selected)
- The name of the bookstore
- Its neighborhood
- A link to its Instagram or website
The visual hierarchy was intentional:
- Photo first → curiosity
- Name second → recognition
- Neighborhood → orientation
- Link → action
We treated each card like a zine cover—compact, informative, and a little poetic.
🧩 Content as Design
We didn’t just fill the UI with dummy data. We handpicked bookstores and wrote microcopy with personality.
For example, instead of saying “View More” we use:
“See the shelves”
Instead of “Back to the city,” we say:
“Return to the map”
Tiny details like these create a more immersive and brand-consistent tone.
