Flat Margaret apartment website case study

Flat Margaret is a 60 m² apartment in Budapest near Margit Boulevard and Margaret Bridge. The project's first version started as a bilingual, one-page introduction, then evolved into a complete, multi-page HU/EN accommodation website after analysing its content, user journeys and search opportunities.

The project evolved beyond a structural and technical rebuild into a complete visual redesign. Its deep-green, warm-cream and muted-gold identity, arched FM monogram, typography, mobile image crops, gallery, reviews and custom PHP-based enquiry workflow were refined across several iterations.

The brief: a premium, independent accommodation website for direct enquiries

The goal was not another generic apartment listing. It was a dedicated online space that would show the apartment's atmosphere, amenities, neighbourhood benefits and house rules that matter to guests. The site needed to build trust while guiding visitors towards an enquiry.

Hungarian and English versions were important from the outset because the audience for accommodation in Budapest is international. Instead of swapping one layer of text with JavaScript, the languages therefore have their own URLs and search focus.

From a one-page site to a multi-page SEO website

The first working version was a focused one-page landing page: hero, amenities, gallery, guest reviews, host introduction, house rules and direct contact all appeared on a single page. It was a quick, clear introduction, but as the content grew, different search intents emerged.

The next step was to rethink the entire information architecture, not just add copy. Dedicated Hungarian and English pages now cover the apartment, location, attractions, guest reviews and booking enquiries. Local guides about Margaret Island, Buda Castle and a two-day Budapest itinerary expand on those core pages.

The homepage still gives visitors a quick overview, while specific questions and local searches are addressed on dedicated pages. This was the project's key SEO and UX decision.

The real project challenges

• Bilingual structure: Hungarian and English content, metadata, internal links and navigation had to work together without either language being merely a copy of the other.
• A lot of information in limited space: amenities, gallery, guest reviews, house rules, host introduction, attractions and contact all needed to fit without overwhelming the homepage.
• Photo-led mobile design: simply centring the hero image and portraits produced poor crops on several screen sizes, so separate mobile positions and safe areas were introduced.
• Stabilising interactive elements: the gallery and guest reviews were given a simpler, more predictable navigation system in place of their previous autoplay and cloning logic.
• Contact forms with clean URLs: the extensionless URL rewrite rule initially redirected the PHP form handler as well, causing submissions to return a 404 error.
• Local SEO: search topics such as “Budapest apartment”, “apartment near Margaret Bridge”, “Margit Boulevard apartment” and “Budapest apartment near Margaret Bridge” had to connect naturally.

Information architecture and the bilingual user journey

The main journey follows the same logic in both languages: atmosphere and key benefits → detailed information → building trust → contact. The aim of language switching was to take visitors to the corresponding page in the other language whenever possible, rather than always sending them to the top of the homepage.

The booking and contact area uses native date fields, a country selector and a clear field structure. The country list was moved to a separate JavaScript file so hundreds of country-name options would not unnecessarily burden the main HTML content.

Internal links from homepage sections and local guides help visitors explore further, while the individual pages have their own titles, descriptions, H1s and search focus.

Brand redesign and mobile UX

An earlier version drew on the apartment's blue accents. The full redesign introduced a distinct Flat Margaret identity: deep forest green, warm cream and muted gold, used consistently across the header, key details, buttons and footer. The photography still leads, but a thoughtful mobile experience requires more than shrinking the desktop layout.

Across several rounds we refined the full-width hero image position and safe text areas, host Levente's portrait, the mobile menu, date fields and the expanded apartment photo gallery. The lightbox interaction also received special attention for reliable touch use.

In the guest-review carousel, automatic cloning and infinite autoplay caused unpredictable jumps. These were removed, leaving more reliable swipe, arrow and dot navigation. It is a good example of how a flashier technique does not necessarily deliver a better user experience.

One coherent visual identity across the website

The visual system centres on #102B24 forest green, #A48759 muted gold and #F4EEE7 warm cream. The arched FM monogram now appears in the favicon, header and footer, while an editorial serif for headings and a clean body typeface establish a consistent hierarchy. Wider hero compositions, subtle graphic details and coordinated sections create a recognisable boutique aesthetic. The identity also appears in my brand identity portfolio.

Technical issues and solutions

When clean URLs were introduced, the global rewrite rule also redirected the contact-send.php form handler to an extensionless address. Visitors saw a 404 error even though the PHP code itself worked. The fix was to exempt the form handler explicitly and correct the order of rewrite rules.

The contact form uses a custom PHP and PHPMailer workflow. It includes server-side field validation, CSRF protection, a honeypot, a 20-second rate limit and duplicate-submission protection. Enquiries are emailed to the host and can be copied to another recipient, while the visitor receives an automatic confirmation.

Static assets use versioned CSS and JavaScript URLs so hosting and browser caches do not preserve earlier broken layouts. This was particularly important during the many rounds of mobile refinement.

SEO, performance and early results

The Hungarian homepage's main search focus was “Flat Margaret Budapest – 60 m² apartment near Margaret Bridge”, while the English version focused on “Budapest apartment near Margaret Bridge” search terms. The website design and development work connects the bilingual content structure, technical SEO and enquiry journey. The pages have unique titles, meta descriptions, H1s, canonical URLs, structured data and internal links; the full website is also discoverable through its sitemap.

The website uses WebP images, responsive image sizes and descriptive alt text. In an earlier round of testing, optimising the hero, CSS and loading order produced a desktop performance score of 100; this is a historical test result, not a claim about the current score.

After the new multi-page structure went live, 30 Google impressions and 2 clicks between June 22 and 24, 2026 were recorded. The new Hungarian and English homepages, booking page and several local guides received early visibility around the first page of search results. This is still a small sample, but it suggested Google recognised the new topical structure quickly.

The outcome

Flat Margaret became more than a simple apartment landing page: it is an independent, bilingual accommodation website with its own coherent visual identity and room to grow. Its forest-green, cream and gold design, local content, technical SEO and direct enquiry process serve one purpose: helping visitors quickly understand the accommodation and get in touch. For similar projects, see my portfolio; before planning your own, the article on website design pricing may also be useful.

This project is a particularly useful reference for me because it shows the entire process: creating a first working version, fixing mobile and technical issues uncovered in real use, and then developing the website further from both business and SEO perspectives.

View the live Flat Margaret website

Frequently asked questions

Why is an independent website useful for an accommodation provider?

It can provide a more complete picture of the property, build an independent brand, present detailed local information and offer guests a direct way to get in touch.

Why were Hungarian and English versions created?

Budapest accommodation attracts an international audience. Two languages on separate URLs, with their own metadata, internal links and search terms, help both Hungarian and international guests find the information they need.

What does local SEO mean for an apartment website?

It means naturally connecting the type of accommodation with its neighbourhood, nearby transport links and attractions, supported by a technically sound site structure, internal links and structured data.

Does the website include a booking system?

The project's primary purpose is to introduce the apartment and support direct enquiries. The contact form sends a message to the host, and the visitor receives an automatic confirmation.