danielaalzerreca.com

The objective

Design and build a premium website for a voice teacher in Basel with three concrete goals:

• Increase local lesson bookings
• Rank for local-intent search terms like "Gesangsunterricht Basel" and "singing lessons Basel"
• Build a boutique brand narrative connecting vocal training with stage performance

At the same time, the project had a technical business goal: replace an old, cumbersome WordPress site that had become slow to evolve, hard to maintain, and limiting for design and content iteration.

On a personal level, Daniela is a close friend. That trust made collaboration faster and more honest, and helped us shape a site that feels genuinely like her voice and not a generic template.

Why we replaced WordPress

The old site worked as a brochure, but it had typical legacy WordPress friction:

• heavy plugin and theme complexity for simple content updates
• inconsistent visual output across pages
• slower iteration for campaigns and concert updates
• limited flexibility for custom UX and conversion-focused flows

The rebuild moved everything to a code-first architecture with cleaner control over performance, SEO, and deployment velocity.

Tech stack

• Next.js (App Router)
• React + Tailwind CSS
• Vercel deployment
• next/image for media optimization
• Playfair Display + Inter typography
• Phosphor Icons

Build approach: heavy vibe coding

This website was developed with a strongly vibe-coded workflow from start to finish:

• rapid prompt-driven prototyping for layout and section architecture
• fast design iterations directly in code, guided by brand tone and conversion intent
• AI-assisted copy shaping in DE/EN variants for clarity and consistency
• AI-supported technical implementation for metadata, structured data, routing, and content structure
• quick feedback loops (design + UX + SEO + implementation) in short cycles instead of long waterfall phases

In practice, vibe coding drastically reduced idea-to-production time while preserving high visual and technical quality.

Screenshot

Content architecture

To keep the homepage focused on conversion, content was split into dedicated routes:

• /: value proposition, method, pathways, gallery, next concert, pricing, contact
• /concerts: upcoming event, past student concerts, and Daniela's artist concerts
• /about: full biography
• /gutschein: voucher landing page with form

Key UX and product decisions

Visual direction

Warm off-white palette with gold accents, generous spacing, calm hierarchy, and subtle motion. The goal was premium editorial, not SaaS.

Persistent global header

Moved the header into layout to avoid section-level stacking issues. Added responsive navigation and persistent language switching.

Concert narrative split

Showed "Next Concert" on home for urgency and moved historical depth into /concerts. Clear distinction between:

• Student concerts
• Daniela's own artist performances

Lightweight DE/EN internationalization

Instead of a heavy i18n framework:

• language via query param ?lang=de|en
• preference persisted in localStorage
• browser-language fallback when no explicit preference exists
• one language selector in the global header

SEO implementation

Metadata

Per-page metadata for home, about, and concerts:

• title
• description
• keywords
• Open Graph + Twitter cards
• canonicals for secondary pages

Structured data

• LocalBusiness for the Basel singing studio
• Event for the upcoming concert

On-page SEO

• semantic H1/H2 structure
• keywords integrated naturally in headings and body copy
• explicit location block with address and map

Conversion strategy

Multiple conversion routes were intentionally layered:

• Book a Lesson (email/phone)
• Gift Voucher
• Book via Instrumentum (with GER note in English)
• Concert booking
• Add to Calendar (.ics)

Delivery quality

Before release:

• npm run lint
• npm run build

Result: stable production build and deploy-ready routes (/, /about, /concerts, /gutschein) on Vercel.

What this project proved

For personal-service brands, combining credibility, social proof, and visible stage outcomes drives both trust and conversion. Content architecture and localization strategy mattered as much as visual polish.

It also proved that replacing an aging WordPress setup with modern tooling plus a heavy vibe-coding workflow can produce better UX, faster iteration, and cleaner long-term maintainability.