Nestor PeñaDesign Engineer · Product Designer

Fallstudie 03 · Mein eigenes Produkt · Redesign1 Min. LesezeitLive seit 1. Oktober 2026

Von einer Figma-Make-App zu einem Festivalverzeichnis, das ohne JavaScript funktioniert.

Mein weltweites Festivalverzeichnis: geprüft, fürs Handy neu gestaltet und als statische Website neu gebaut.

cubansalsacalendar.com besuchen ↗︎Code auf GitHub ↗︎
Gebaut mit
  • Figma Make
  • Claude Design
  • Claude Code
  • Astro
  • TypeScript
  • Preact
  • MapLibre
  • GitHub Actions
  • Cloudflare Workers
128Festivals
37Länder
541Artists
100Lighthouse-Punkte

Sie sehen das Ergebnis. Schalten Sie die Denkebene ein, um zu sehen, wie ich dorthin kam.Sie sehen Randnotizen, Skizzen und die Optionen, die ich verworfen habe.

Vorher / Nachher · zum Vergleichen ziehen

Die neue Oktober-Seite auf dem Desktop: Suche, Festivalkarten mit Artists, Reisezeiten und die MonatsleisteNachher · statische Website
Die alte Figma-Make-Website auf dem Desktop, mit einem Pop-up «Festival Collection Growing» über der SeiteVorher · Figma Make

Kontext und Rolle

bevor ich ein Pixel geändert habe

Tänzerinnen und Tänzer kommen über Instagram, auf dem Handy, direkt auf ein Festival.

Mein eigenes Produkt, von A bis Z. Die erste Version war eine Figma-Make-App. Ich habe ihre 42 Funktionen aufgelistet und wie jede versagte. Fünf Probleme waren wichtiger als jede visuelle Änderung:

  • SicherheitJeder Besucher konnte die Datenbank überschreiben.
  • Daten19 Festivals ohne genaue Daten waren ausgeblendet.
  • LinksDer Hauptbutton erriet Instagram-URLs, die auf 404 führten.
  • ReihenfolgeAuf dem Handy kam Januar 2027 vor Oktober 2026.
  • ReichweiteOhne JavaScript leere Seiten und leere Link-Vorschauen.

Wie ich vorgegangen bin

eine Datei, keine Datenbank

Daten

Die öffentliche Datenbank behalten
Ein Headless CMS

Eine validierte JSON-Datei

Eine Person pflegt rund 130 Festivals. Besucher können die Daten nicht ändern.

Seiten

Die Single-Page-App reparieren
Auf dem Server rendern

Vorgerenderte Seiten

Jedes Festival hat eine echte URL mit Link-Vorschau, kleine Inseln bringen die Interaktion.

Navigation

Eine Reihe Monats-Chips
Eine lange Liste

Monatsseiten, Leiste unten

Mit dem Daumen erreichbar, und jeder Monat ist eine indexierbare Seite.

Links

Die Instagram-URL erraten
Den Button ausblenden

Nur Links, die existieren

Ein falscher Link kostet mehr Vertrauen als ein fehlender.

Was ich gebaut habe

Die Festivalseite

Seite des Festival de Cuba Stuttgart auf dem Desktop: Daten, Zug- und Fahrzeit ab Zürich, Button Get passes, Kalender- und Instagram-Buttons, Line-up mit 10 Artists und eine Karte von Stuttgart
Dieselbe Festivalseite auf dem Handy
  • Ein Hauptbutton. Pässe kaufen. Keine Countdowns, kein Zeitdruck.
  • Ein nächster Schritt. Weitere Festivals im selben Monat, denn die meisten Besucher landen zuerst hier.
  • Zum Teilen gebaut. Ein generiertes Vorschaubild und Event-Daten für jedes Festival.

Monats- und Filter-Panels

Panel Monat wählen: ein Raster von Monaten mit Anzahl Festivals, leere Monate gestrichelt
Filter-Panel: wann, wo, nur gemerkte Festivals, Sortierung und ein Button für 25 Festivals
Die Monatsseite im Dark Mode

Karte und Reisezeiten

Kartenansicht für Oktober: Pins und Gruppen in Nordamerika und Europa

Einmal eine Stadt wählen: Jede Karte zeigt den schnellsten Weg mit Auto, Zug oder Flugzeug, die nächsten zuerst. Keine Standortabfrage beim Laden.

Das Admin-Tool

Datentabelle im Admin: 128 Festivals, Schnellfilter für fehlende Angaben, Suche und ein Edit-Button pro Zeile

Social Media, gleiche Identität

Navyblauer Post: soeben angekündigt, 22.–26. Oktober, Festival de Cuba Stuttgart, Pässe ab 89 €
Ankündigung
Cremefarbener Post: das Line-up des Festival de Cuba Stuttgart als Artist-Chips
Line-up
Korallenrote Story: startet in 21 Tagen, Festival de Cuba Stuttgart, in den Kalender eintragen
Countdown-Story
Navyblauer Post: November, 20 Festivals, mit vier Festivalkarten und ihren Datumsblöcken
Diesen Monat

Wirkung

Qualität als Build-Schritt

Live seit 1. Oktober, Lighthouse 100 bei jedem Build.

  • Barrierefreiheit. axe prüft jede Seite nach WCAG 2.1 AA, hell und dunkel.
  • Daten. Eine ungültige JSON-Datei lässt den Build scheitern, ein täglicher Build verschiebt vergangene Festivals ins Archiv.
  • Kalender. Eine .ics-Datei pro Festival und ein Feed pro Region.
  • Als Nächstes. Artist-Seiten, um Lehrenden von Festival zu Festival zu folgen.

Was ich anders machen würde

  1. Mit einer einzigen Datendatei anfangen. Die Datenbank hat die schlimmsten Fehler verursacht.
  2. Einnahmen zuerst mit Ticket-Partnern validieren.

Sie suchen jemanden, der Dinge ins Rollen bringt?

Schreiben Sie mirLinkedIn