I rebuilt a hostel website around the questions guests ask
A 48-bed hostel in Belgrade, opened by friends of mine. The old site showed the rooms in photos; the new one answers guests’ questions before they book and passes the dates, guests and room on to the booking system.
119
URLs: 17 page types in seven languages. The old site’s sitemap had 86
92 → 97
home page accessibility score in Lighthouse
14
reviews checked word for word against the platforms. None of the old site’s 12 quotes matched exactly
0 → 4
booking details the site passes to Cloudbeds: language, dates, guests and room. The old one passed none
The site hasn’t launched: the second-version demo is hidden from search engines, and the hostel’s domain still runs the old site. There are no results yet — below are the old site’s baseline metrics, which I’ll compare against.
Whose projectMine: I built it on my own initiative; the hostel didn’t commission it
The hostel48 beds: six dorms and an apartment, a coworking space on the top floor. Opened by friends of mine in 2023; I was with them at every stage
WebsiteMy friends built the first site themselves on the Duda website builder. In 2026 I decided to help them and improve it all: the new one is custom Python code, with no site builder or framework
My roleProduct, decisions and sign-off are mine; the code is written with Claude Code to my briefs
My part
Research
An audit of the old site, the baseline metrics, a review of 25 hostel websites and a check of what Cloudbeds can do.
Website
Structure, copy in seven languages, the room filter and comparison, the group room plan, design system, logo and icons from the designer’s source files. I wrote the phone-first layout, the generator and the Netlify functions with Claude Code to my briefs and signed them off myself.
Facts
The fact file, checking reviews and ratings against the platforms, and routes from the transport map.
I build websites now and then. If you need one like this, email max@kottov.net and I’ll tell you whether I can take it on.
01 · Start
Nearly everyone arrives on a phone, from ads on Instagram and Facebook
I took the baseline before the redesign: 30 days of Microsoft Clarity data to 16 October and three months of Google Search Console data to 13 October. Four Meta ad campaigns brought about 8,000 of the 9,574 sessions: someone sees a post, taps it and opens the site inside the social app.
Phone
94%
of sessions are on a phone. 84% of page views happen inside the Instagram and Facebook in-app browsers.
Depth
1.32
pages per session. Active time: 13 seconds of a 52-second visit.
Speed for real visitors
8.7 s
until the main content appears (LCP). Layout shift 0.34; 12% of sessions hit JavaScript errors.
Search brings almost no new guests · Search Console, July — October 2026
268 of 317
clicks from Google in a quarter came from searches for the hostel’s name. For “hostel belgrade” the site ranks seventh and gets fewer than one click per hundred impressions.
What else the audit of the old site found
Facts contradicted each other
Kitchen from 7:00 and from 8:00, luggage until 21:00 and until 23:00, laundry €8 and €5 — it depended on the page.
One booking link
All 86 pages sent guests to the same Cloudbeds URL, with no language, dates or chosen room. Guests had to enter it all again.
Ratings without a date
The home page showed 9.2, 4.7 and 9.1. The platforms now show 8.7 on Booking.com, 4.5 on Google and 8.7 on Hostelworld.
Markup
Exactly one H1 heading on only 28 of 86 pages. 755 of 2,486 images had no alt text.
02 · Before and after
First screen: a photo of a room and three platform ratings, with the date form a little further down
Phone screenshots: the old site on 1 November, as guests see it, with the cookie banner at the bottom; the second version of the new one on 5 November 2026. The home page opens with a photo of a dorm with a balcony — I brought it back from the old site — and the Booking.com, Google and Hostelworld ratings with review counts. Below come the photo tour, a WhatsApp button and the date form with the “from €10” price. The booking button appears at the bottom edge once you start scrolling and hides while the form is on screen.
Before · home
After · home
Before · rooms
After · rooms
Before and after
Old site on a website builder
86 URLs in the sitemap, seven languages
every button uses the same booking link
review quotes nobody checked
facts differ from page to page
a single H1 on 28 of 86 pages
→
New site in code
119 URLs: 17 page types in seven languages
new pages: events, getting here, a before-you-arrive guide
booking receives the language, dates, guests and room
14 reviews found on the platforms, quoted in full
facts from a single source, disputed ones flagged
one H1 per page and alt text for every image
all 87 old URLs from the old site’s source lead to the new ones
on phones, buttons at least 44 px, fields at least 52 px, filters without swiping
03 · Answers
Every common question gets its own block or page
My redesign brief set out five guest scenarios: choose a dorm, find a women-only room with an en-suite bathroom, move between pages without losing the dates, learn the price and cancellation terms, and work out what to do when arriving late. The site map follows from them.
Guest’s questionWhere the answer is
“Who sleeps in the dorm, and where’s the bathroom?”
→
RoomsA card for each of the six room types: who sleeps there, how many beds, the size, where the bathroom is. A filter and a comparison table
“How do I get here from the airport?”
→
Getting hereFrom the airport, the railway station and the bus station: bus and trolleybus numbers, stops, and buttons for Google, Apple and Yandex Maps
“There are thirty of us — will we fit?”
→
GroupsA plan of the 48-bed house spreads the group across whole rooms, and the request goes to WhatsApp as ready-made text
“Can I live and work here for a month?”
→
Coliving and coworkingThe top-floor coworking space is open around the clock. Pick 7, 14 or 30 nights and booking opens with those dates
“What’s on in the evening?”
→
EventsNine kinds of evening with photos and posters: live music, films, a treasure hunt, a rooftop barbecue. Announcements go on Instagram
“Can I cancel my booking?”
→
Before you arriveThe two rates and what each allows, a guide built from the trip dates, late arrival and luggage storage
“Is there a lift?”
→
FacilitiesThe house floor by floor: there’s no lift and the floors are linked by stairs — and guests see this before booking
Site map · new pages
Choose and book
Home
Rooms
Reviews
Photos and house tour
Facilities and prices
Longer stays and groups
Coliving and coworking
Groups
Events
Volunteers
About the hostel
Arriving and house rules
Getting here and what’s nearby
Before you arrive
House rules
Kitchen rules
Official information
Privacy policy
Site map
Plus a “not found” page in every language. Wherever possible, page URLs match the ones Google has already indexed for the old site, and the remaining old URLs redirect to the new pages.
Room card. Who sleeps there, how many beds, where the bathroom is, the size. The “Lower bunk” button goes straight to that Cloudbeds category: a lower bunk costs a little more than an unassigned bed.
Comparison. Mark two or three rooms and the table shows only those.
Getting here. From the airport, the railway station and the bus station: lines and stops. The routes were checked against the transport map on 22 October, and the date is on the page.
Groups. Enter the number of people and the plan on the right spreads them across whole rooms. Nothing goes to a server: WhatsApp or the email app opens with the text already written.
A week or a month. Length of stay, arrival date, guests and room, and Cloudbeds opens with those details. The site doesn’t make up long-stay prices: Cloudbeds shows them, or the team sends a quote.
The house, floor by floor. Where the coworking space, lounges and cinema room are. There’s no lift, and guests learn this before they book.
Evenings. Nine kinds: photos from past evenings and posters. The posters come from a template in the site’s colours — one 4:5 file for both Instagram and the page.
04 · Booking
Dates picked on any page reach Cloudbeds
The hostel took bookings in Cloudbeds before and still does. What changed is what the site sends there. One function builds the booking link, and the site adds everything the guest has already chosen.
Dates and guestson any page
Roomor a lower bunk
Languagein the link path
Cloudbedsstraight to free beds for those dates
Language
In the path
Cloudbeds ignores the language parameter and opens in English. Only the path works: /ru/reservation/. Cloudbeds has no Serbian, so the Serbian version leads to the English one.
The trip
Remembered
Dates, guests and the room are stored in the browser. Someone picks dates and three guests on the rooms page, goes to events, then to the Russian version — and the booking links already carry those dates and three guests.
Group
9+
Up to eight people can book online. From nine, the form offers a group request instead of Cloudbeds.
Inside Instagram and Facebook · 84% of page views
Here the form warns up front that booking will open in the browser and explains what to do if nothing happens: tap “···” and choose “Open in browser”.
Why booking isn’t built into the page
Embedding is a paid Cloudbeds option
A booking window on top of the site is part of the Premium Embeds package, which the hostel doesn’t have. Cloudbeds retired the old iframe embed in early 2026.
The code is ready
One build flag switches the window on. If the Cloudbeds script doesn’t load within 4 seconds, the button works as an ordinary link.
05 · Facts
Not one figure that can’t be checked
Opening hours, prices, room sizes, walking times and ratings live in one file, and pages in all seven languages take them from there. Every fact has a status: checked, disputed or unknown. The site shows disputed facts marked “being confirmed” and leaves unknown ones out.
How it looks on the site
Kitchen 8:00–22:00 · being confirmed. Sources differ, so until the team confirms, the label sits next to the hours.
Breakfast and parking prices aren’t published, so the site doesn’t name them and suggests asking the team.
Event dates stay hidden until the hostel starts keeping a schedule. Announcements go on Instagram.
Ratings come with the platform, the number of reviews and the date checked.
Walking times and transport lines were checked against routes on 22 October.
Reviews
14
reviews on the site, all found on Google and Hostelworld and quoted in full. Of the old site’s 12 quotes, six don’t exist on the platforms at all, four more were stitched together, padded out or paraphrased, and two from Booking.com can’t be verified.
Ratings by category. Hostelworld data as of 23 October. The lowest score, 7.4 for atmosphere, is on the page too.
First-version AI assistant · how it was designed
It was meant to answer from the same fact file as the pages
Only from the fact file. If something wasn’t there, it would say it didn’t know and give the WhatsApp number and phone.
Disputed facts would come with a caveat. For kitchen hours and luggage storage, it would suggest checking with reception.
The server, not the model, would build the booking link. The model would name the dates, number of guests and room; the server would check them and build the Cloudbeds link. This was done in code but never deployed to the demo.
No personal data. The conversation would stay in the browser tab and never be stored on the server. No more than 20 questions per 10 minutes from one IP address.
Why the second version doesn’t have it
On the first-version demo the “Ask the hostel” button went up on 23 October, but the assistant never worked: the model key was rejected, so it replied that it was unavailable.
In the second version it’s replaced by an “Ask us on WhatsApp” link to the reception number. The link sends nothing by itself and doesn’t promise an instant reply. The assistant’s code is kept in the project archive.
06 · Build
A Python generator, one stylesheet and one script, no frameworks
The site is built as static pages: there’s no database or admin panel on the server, and pages are served as ready-made files. Each of the seven languages has its own text file with shared keys. If a translation is missing a line, the build stops and names it.
data: facts, evenings and reviews in separate files
the QR code for the printed kitchen rules is generated at build time, with no outside services
site icons and social previews in seven languages, generated from the designer’s vector logo
non-breaking spaces in Russian and Serbian
In the browser
one app.js: the trip, booking links, filters, comparison, gallery, forms to WhatsApp
one styles.css, mobile first
more than 50 analytics events marked up; I’ll add the analytics tags together with the cookie consent banner
the page a guest is about to open loads in advance, and moving between pages is smooth
animation switches off with the “reduce motion” setting
an “offline” page in seven languages: if the connection drops, a guest who has visited before sees it instead of a browser error
Netlify
static files, headers, 301s for old URLs, a 404 in every language
Instagram feed through its own function: images are served from the site’s own domain, so the guest’s browser never contacts Instagram
weekly Instagram token renewal and storage in Netlify Blobs are ready and waiting for the account to be connected
Design system
Warm paper, white cards, dark green buttons, lime used sparingly. Montserrat for headings, Noto Sans for text. Colours, spacing and corner radii are tokens in one document, so a new page can’t bring its own colours.
In the second version the logo comes from the designer’s vector source files, in its green variant; the site icons and social previews are built from it too.
The cabbage
The brand mark is a cabbage. The logo’s leaves unfold when it comes into view, dark sections get a wavy leaf edge, and a cabbage with eyes blinks at the bottom of the page. The leaves of the logo also stand for the staircases in the house.
All the animation runs without libraries and switches off when “reduce motion” is on.
126
pages, 404s included, checked at widths of 320, 390 and 1100 px — nothing spills off the screen
0
broken links, images or anchors across all 126 pages
87
old URLs from the old site’s source lead to the new pages
44 px
the minimum for buttons and filters on phones; input fields start at 52 px
Requests on the home page
88→21
Old site versus the second version.
Home page weight, MB
1.8→0.9
The old site: 1.7 to 1.9 MB.
Accessibility
92→97
Lighthouse score out of 100. Three points are lost on the grey labels in the “Arriving” block on the home page: contrast 4.24 against the required 4.5.
Lighthouse 13.5, mobile profile, one laptop, three runs of each home page: the old site on 1 November, the second version on 5 November 2026. I don’t compare the speed score: in the lab it jumps from run to run. I’ll compare field data after launch.
Timeline
16.10
A snapshot of the old site and a review of 25 hostel websitesThe first demo: every page in seven languages.
17.10
Evenings and the cabbage animationThe events page and leaves that unfold on screen.
21.10
CloudbedsPrices and category IDs for all six room types, and a test of embedding booking in the page.
22.10
Redesign, page by page18 work sessions on a shared design system, one per page. In the evening, an end-to-end check: 114 pages at five widths and five guest scenarios.
23.10
AI assistant, Instagram feed, the house floor by floorPlus social previews in seven languages.
25.10
Animated logo and a migration auditThe last release of the first version.
27.10
Self-hosted fonts and a site map pageThey missed the first-version demo and went into the second.
02.11
Second version: phone firstAll 17 templates in seven languages: larger buttons and fields, filters without swiping, a short first screen, a collapsible footer. No AI assistant — a WhatsApp link instead. A separate demo URL; the first version is untouched.
03.11
Logo from the designer’s source files, an “offline” pageSite icons and social previews in seven languages, page prefetching and smooth transitions between pages.
How I built it
I wrote the code with Claude Code to my own briefs. What to build, which facts go on the page and which pages to sign off — those calls were mine.
Each page was built in its own session: a brief, a check in the browser and a list of what to confirm with the hostel. The second version went the same way: a separate pass over each template on a phone.
07 · Next
What’s left before launch doesn’t depend on the code
The site builds, the scenarios pass and the old URLs still work. It’ll move to the domain once four questions are settled.
A lawyer
Reviews the draft privacy policy against Serbian data protection law and the GDPR. I won’t switch on analytics without it.
The hostel team
Needs to confirm the disputed facts — kitchen hours, luggage storage, the laundry price, late check-in — and send replacements for outdated details.
Native speakers
Proofread the Serbian and Turkish: the translations were done without them.
The domain
A production build open to search engines, moving cabbagehostel.com to Netlify, and the sitemap in Search Console.
What I’ll check after launch
Check 1
Speed for real visitorsLCP, INP and layout shift against the old site’s 8.7 s, 530 ms and 0.34.
Check 1
Whether people read past the first pagePages per session and active time; the old site had 1.32 and 13 seconds.
Check 2
Whether they get to bookingVisits to Cloudbeds against 173 sessions with a “Book” click in 30 days, plus bookings from Cloudbeds’ own data. This is the key question of the case.
Check 2
Whether search brings new guestsClicks on generic searches (49 a quarter before), and positions for “hostel belgrade” (seventh) and “coliving belgrade” (twelfth).
How I’ll compare
Year on year: each month against the same month last year. Hostels are seasonal, so I won’t compare autumn with summer.
Ads separately from search. Almost all traffic now comes from Meta, so how its share changes matters more than the total number of visits.
Field data only. Lab speed scores don’t count towards the result.
The old site showed the hostel. The new one answers the guest, from where the dorm bathroom is to which bus to take from the airport. I’ll test that after launch through pages per session and click-throughs to booking.
Baseline metrics: Microsoft Clarity, 30 days to 16 October, and Google Search Console to 13 October 2026. Old site audit: the 86 pages in its sitemap, 22 October. Lighthouse 13.5, mobile profile: the old site on 1 November, the second version on 5 November. Reviews and ratings checked against the platforms on 22–25 October. Layout and link checks of the second version: 2–3 November. Screenshots: the second-version demo cabbage-hostel-v2.netlify.app, 5 November, and cabbagehostel.com, 1 November. Cover: the hostel’s garden terrace, a photo from its website.
