H-Studio logo
Projekt starten
Case Study

Berlin Guide App

Eine kleine Studio-Initiative — ein handkuratierter Stadtführer, den wir für uns selbst und für Freund:innen und neue Kolleg:innen gebaut haben, die nach Berlin ziehen.

Ein kleiner Berlin-Stadtführer, den wir für uns selbst gebaut haben — und für Freund:innen, Auftragnehmer:innen und neue Kolleg:innen, die in die Stadt ziehen. Die Studio-Initiative zeigt, wie wir lokale Kenntnis, sorgfältige Auswahl und zurückhaltendes Produktdesign verbinden. Keine Alternative zu großen Reiseportalen, sondern ein bewusst schmaler, handkuratierter Begleiter für eine Stadt, in der wir leben.

Warum wir ihn gebaut haben

Ein selbstinitiiertes, selbstfinanziertes Projekt — in Studiostunden gebaut, nicht im Rahmen eines Briefings.

Berlin ist unsere Heimatstadt, und alle paar Monate zieht jemand her, den wir mögen: ein:e Freund:in, ein:e Auftragnehmer:in, ein:e neue:r Kolleg:in. Ihnen eine Liste aus Notes-App-Screenshots zu schicken fühlte sich falsch an. Also haben wir einen kleinen Stadtführer gebaut, der die Orte enthält, die wir wirklich empfehlen würden — ruhige Stunden, späte Bibliotheken, Badestellen, langsames Essen, abseits der Touristenpfade — mit einer ruhigen Oberfläche, die nicht schreit.

Was er sein soll:

  • Handkuratiert vom Team, nicht generiert oder gescrapt — die Orte, an die wir Freund:innen schicken würden.
  • Ehrlich, was den Umfang betrifft — bewusst schmal, kein Versuch, alles abzudecken.
  • Standardmäßig privatsphäre-respektierend, weil wir ihn so selbst nutzen wollen.
  • Offline-tauglich und edge-gecached, damit er in der U-Bahn und am See funktioniert.
  • Gestaltet mit Typografie und ruhigem Rhythmus, kein Infinite-Scroll-Lärm.

Wir veröffentlichen den Guide als selbstinitiiertes Studio-Projekt — als Einblick in unsere Produkt- und Gestaltungsarbeit, nicht als bezahlte Kundenreferenz.

Was wir vermeiden wollten

Die meisten Stadtführer versuchen, allen alles zu sein. Wir wollten das Gegenteil: Ein kurzer, eigensinniger Guide, der sich wie die annotierte Karte einer Freundin anfühlt, nicht wie ein Verzeichnis. Keine bezahlten Einträge, keine Werbeplätze, keine Affiliate-Links, kein algorithmisches Ranking — nur Orte, die das Team wirklich mag. Deshalb haben wir uns ein paar Regeln gesetzt. Der Guide soll:

  • klein und handkuratiert bleiben — Qualität vor Vollständigkeit
  • sich wie ein Berliner Objekt anfühlen, mit passender Typografie und Farbpalette
  • Privatsphäre standardmäßig respektieren — kein invasives Tracking
  • offline funktionieren und auf dem Handy im U-Bahn-Tunnel schnell laden
Berlin Guide App — Studio-Initiative

Wie wir ihn gebaut haben

1 — Stack & Handwerk

Ein leichtes technisches Setup, passend zu einem kleinen, sich langsam ändernden Guide. Gebaut mit Next.js und Edge-Caching, dazu ein kleines Supabase-Backend für:

  • Optionales Einloggen, um Orte zu speichern (Apple / Google)
  • Eine kleine Postgres-Datenbank für die kuratierte Ortsliste
  • Row Level Security, damit gespeicherte Listen privat bleiben
  • File-Storage für handverlesene Bilder

Ein paar ruhige Integrationen: • Kartenkacheln für Navigation und Fußwege • Anonyme, datenschutzfreundliche Analytics — keine personenbezogenen Identifikatoren • Lokaler Offline-Cache — der Guide funktioniert auch ohne Signal, was in dieser Stadt zählt

2 — Die Orte

Jeder Eintrag wird vom Team hinzugefügt. Keine Bots, keine Scraper, keine Massenimporte. Jeder Ort hat:

  • Einen Bezirk und eine Kategorie (Essen, Baden, Bibliothek, Spaziergang, Trinken, Ruhe)
  • Eine kurze Notiz in einfacher Sprache — warum wir den Ort mögen, wann man hingehen sollte
  • Eine visuelle Andeutung, die zur Art des Ortes passt, nicht zu einer Marke
  • Einen Karten-Pin und einen Hinweis zur Gehzeit
  • Ein Prüfdatum — wir gehen die Liste einmal im Jahr durch

Rund 80 handverlesene Orte in 6 Bezirken, jährlich vom Team überprüft.

3 — Gestaltungsgeschmack

Die Oberfläche soll sich wie ein kleines Druckobjekt anfühlen — ruhig, typografisch, leicht wieder wegzulegen:

  • Eine ruhige Farbpalette, angenehm für müde Augen nach einem langen Tag
  • Großzügiger Weißraum, kein Infinite-Scroll-Lärm, keine Dark Patterns
  • Typografie, abgestimmt auf das Lesen kurzer Notizen, nicht auf das Überfliegen eines Feeds
  • Winzige, weiche Übergänge — der Guide soll niemals Aufmerksamkeit einfordern

Er liest sich eher wie ein Zine als wie eine Stadt-App — langsam, überlegt, Berlin-verliebt.

Berlin Guide App UI Design

Was wirklich drin ist

  • Ruhige Stunden und unentdeckte Ecken in Bezirken, die wir gut kennen
  • Späte Bibliotheken und Lesesäle, die wir tatsächlich nutzen
  • Badestellen — Seen, Schwimmbäder und die Spree, wenn sie sich benimmt
  • Langsames Essen, Nachbarschaftsbäckereien und unaufgeregte Cafés
  • Unabhängige Buchläden, kleine Galerien und ruhige Kinos
  • Nahverkehrs-Tricks und Spazierrouten, die das Offensichtliche schlagen
  • Eine kleine Liste von Orten nach Einbruch der Dunkelheit, an die wir eine vertraute Person schicken würden

Der Guide bleibt bewusst klein. Keine Werbung, keine Affiliate-Links, keine bezahlten Einträge. Wir nutzen ihn selbst, wenn Freund:innen, Auftragnehmer:innen oder neue Kolleg:innen in der Stadt landen — und wir freuen uns, wenn ihn andere nützlich finden.

Wie er genutzt wird

  • Ein ruhig geteilter Link, den das Team an Freund:innen und neue Kolleg:innen schickt, die nach Berlin ziehen
  • Rund 80 handverlesene Orte in 6 Bezirken, jährlich überprüft
  • Intern beim Onboarding neuer Kolleg:innen genutzt, die in die Stadt ziehen
  • Offline-tauglich — funktioniert in der U-Bahn, am See, im schwachen Café-WLAN
  • Ein Handwerks-Testfeld für Typografie, Edge-Caching und ruhige Interface-Ideen

Technische Notizen

Mobile: Next.js · React

Backend: Supabase (klein, überwiegend lesend)

Analytics: Anonym, datenschutzfreundlich

Maps: Leichte Kartenkacheln

Auth: Optionales Apple-/Google-Login

Deployment: Edge-gecached, offline-tauglich

Verwandte Services

Verwandte Leistungen

Entdecken Sie unsere Leistungen, die zur Umsetzung dieses Projekts beigetragen haben.