Case Study: UI/UX Design „Café Klatsch“

Tradition trifft Moderne – Ein digitales Zuhause für gemütliche Kaffeekultur und hausgemachte Spezialitäten.

Café Klatsch
Dein Ort für Genuss und Gemeinschaft.

Ob ausgiebiges Frühstück, ein schneller Lunch oder hausgemachter Kuchen am Nachmittag – im Café Klatsch findest du Qualität, die man schmeckt, und eine Atmosphäre, in der du dich sofort wohlfühlst.

Figma File

Problem Statement

Die Herausforderung: Digitale Sichtbarkeit für lokale Gemütlichkeit

Viele traditionsreiche Cafés verlassen sich auf Laufkundschaft, verlieren aber potenzielle Gäste, die online nach Speisekarten, Reservierungsmöglichkeiten oder aktuellen Angeboten suchen. Die Herausforderung bestand darin, die warme, einladende Atmosphäre des physischen Cafés in ein modernes, responsives Webdesign zu übersetzen, das gleichzeitig funktional überzeugt

The Solution

Das digitale Schaufenster

Die neue Webseite fungiert als zentrale Anlaufstelle und bietet:
Interaktive Speisekarte: Übersichtliche Darstellung aller Speisen und Getränke mit Fokus auf Saisonalität.
Seamless Booking: Ein einfaches Reservierungssystem für Tische.
Visual Storytelling: Hochwertige Fotografie, die das Ambiente und die Frische der Produkte in den Vordergrund stellt.
Responsive Experience: Optimale Darstellung auf allen Endgeräten – vom Smartphone bis zum Desktop.

My Role & Project Overview

In diesem Projekt war ich verantwortlich für das Gesamtkonzept und Visual Design.

Fokus: UI Design (Visual Identity), UX Strategie, Responsive Layouts und Informationsarchitektur.

Project Duration

3 Wochen (September 2025)  35+ Screens

Tools Used

Figma, Photoshop, Nicepage, Google Forms.

Design Process
1. Empathize:
  • Analyse lokaler Café-Besucher und deren Erwartungen an eine Gastronomie-Webseite.
2. Define:
  • Erstellung der Sitemap und Definition der Kernfunktionen (Speisekarte, Reservierung, Kontakt).
3. Ideate:
  • Layout-Entwicklung mit Fokus auf eine „appetitanregende“ Farbwahl und Typografie.
4. ​Prototype:
  • Umsetzung von Wireframes bis hin zum voll responsiven High-Fidelity Design.
5. Test:
  • Überprüfung der Lesbarkeit und Benutzerfreundlichkeit auf mobilen Geräten.
Projekt-Ziele

Für das Café Klatsch stand die Schaffung einer digitalen Identität im Vordergrund, die die Wärme des physischen Ortes widerspiegelt. Unsere Hauptziele waren:

Genuss erlebbar machen: Die Qualität und Frische der hausgemachten Produkte visuell in den Fokus rücken.
Digitale Erreichbarkeit: Eine vollständige, leicht zugängliche Online-Speisekarte für Gäste bereitstellen.
Prozesse vereinfachen: Die Hürde für Tischreservierungen durch ein integriertes Online-Tool senken.
Gästebindung stärken: Durch eine ansprechende User Experience das Vertrauen neuer Besucher gewinnen und Stammgäste binden

Fokus auf User Experience & Gastronomie-Standards

Um ein modernes und funktionales Web-Erlebnis zu schaffen, haben wir folgende Anforderungen definiert:

Appetitliches Visual Design: Nutzung von High-Quality Bildmaterial und einer warmen Farbpalette zur emotionalen Ansprache.
Benutzerzentriertes Layout: Schneller Zugriff auf Öffnungszeiten, Standort und die Reservierungsfunktion.
Conversion-Optimierung (CTAs): Klar erkennbare Buttons für „Tisch reservieren“ und „Speisekarte ansehen“.
Responsives Design: Eine lückenlose Performance auf Mobilgeräten, da Restaurant-Suchen oft von unterwegs erfolgen.

Der qualitätsbewusste Genießer

Motivation: Sucht nach einem verlässlichen Ort für Home-Office oder Treffen mit Freunden.
Verhalten: Checkt vor dem Besuch die Online-Speisekarte und reserviert bevorzugt digital.
Problem: Unübersichtliche PDF-Speisekarten und fehlende Infos zu Inhaltsstoffen auf anderen Seiten.
Opportunity: Eine klare, bildgewaltige Webseite, die Transparenz und Gemütlichkeit ausstrahlt.

User Journey Map

Susanne (31) – Die motivierte Autodidaktin

Entdecken: Max sucht bei Google nach „Frühstück in der Nähe“.
Informieren: Er landet auf der Café Klatsch Seite und sieht sofort die ansprechenden Bilder.
Prüfen: Er scrollt durch die digitale Speisekarte und findet vegetarische Optionen.
Handeln: Er reserviert über den Button direkt einen Tisch für zwei Personen.
Erleben: Der Besuch im Café bestätigt den positiven digitalen Eindruck.

Design Guide 

Fonts
Komponenten

Buttons

Colors

Primary

High Fidelity Preview

Figma Prototype Link