Nestor PeñaDesign Engineer · Product Designer

Caso de estudio 03 · Mi propio producto · Rediseño1 min de lecturaEn línea desde el 1 de octubre de 2026

De una app de Figma Make a un directorio de festivales que funciona sin JavaScript.

Mi directorio mundial de festivales: auditado, rediseñado para el móvil y reconstruido como web estática.

Visitar cubansalsacalendar.com ↗︎Código en GitHub ↗︎
Hecho con
  • Figma Make
  • Claude Design
  • Claude Code
  • Astro
  • TypeScript
  • Preact
  • MapLibre
  • GitHub Actions
  • Cloudflare Workers
128festivales
37países
541artistas
100en Lighthouse

Ves el resultado. Activa la capa Pensamiento para ver cómo llegué hasta aquí.Ves notas al margen, bocetos y las opciones que descarté.

Antes / después · arrastra para comparar

La nueva página de octubre en escritorio: buscador, tarjetas de festival con artistas, tiempos de viaje y la barra de mesesDespués · web estática
La web antigua de Figma Make en escritorio, con una ventana emergente "Festival Collection Growing" encimaAntes · Figma Make

Contexto y rol

antes de tocar un solo píxel

Los bailarines llegan desde Instagram, en el móvil, a un festival concreto.

Mi propio producto, de principio a fin. La primera versión era una app de Figma Make. Listé sus 42 funciones y cómo fallaba cada una. Cinco problemas pesaban más que cualquier cambio visual:

  • SeguridadCualquier visitante podía sobrescribir la base de datos.
  • Datos19 festivales sin fechas exactas quedaban ocultos.
  • EnlacesEl botón principal inventaba URLs de Instagram que daban 404.
  • OrdenEn el móvil, enero de 2027 salía antes que octubre de 2026.
  • AlcanceSin JavaScript, página en blanco y vistas previas vacías.

Cómo lo pensé

un archivo, sin base de datos

Datos

Mantener la base de datos pública
Un CMS headless

Un archivo JSON validado

Un responsable, unos 130 festivales. Los visitantes no pueden tocar los datos.

Páginas

Arreglar la single-page app
Renderizar en servidor

Páginas prerenderizadas

Cada festival tiene una URL real con vista previa; islas pequeñas añaden la interacción.

Navegación

Una fila de chips de meses
Una lista larga

Páginas por mes, barra inferior

Al alcance del pulgar, y cada mes es una página indexable.

Enlaces

Adivinar la URL de Instagram
Ocultar el botón

Solo enlaces que existen

Un enlace erróneo cuesta más confianza que uno que falta.

Qué construí

La página del festival

Página de Festival de Cuba Stuttgart en escritorio: fechas, tiempos en tren y en coche desde Zúrich, botón Get passes, botones de calendario e Instagram, cartel de 10 artistas y un mapa de Stuttgart
La misma página de festival en un móvil
  • Un solo botón principal. Comprar el pase. Sin cuentas atrás ni textos de urgencia.
  • Un siguiente paso. Otros festivales de ese mes, porque casi todos los visitantes llegan aquí primero.
  • Pensada para compartir. Una imagen de vista previa generada y datos de Event para cada festival.

Paneles de mes y filtros

Panel Elegir un mes: una cuadrícula de meses con el número de festivales, los meses vacíos con borde discontinuo
Panel de filtros: cuándo, dónde, solo guardados, orden y un botón para mostrar 25 festivales
La página del mes en modo oscuro

Mapa y tiempos de viaje

Vista de mapa de octubre: marcadores y grupos en Norteamérica y Europa

Elige tu ciudad una vez: cada tarjeta muestra la forma más rápida de llegar en coche, tren o avión, primero lo más cercano. Sin pedir la ubicación al cargar.

El panel de administración

Tabla de datos del panel de administración: 128 festivales, filtros rápidos de información que falta, buscador y un botón Edit por fila

Redes sociales, misma identidad

Post azul marino: recién anunciado, 22–26 de octubre, Festival de Cuba Stuttgart, pases desde 89 €
Anuncio
Post crema: el cartel de Festival de Cuba Stuttgart con los artistas en etiquetas
Cartel
Story coral: empieza en 21 días, Festival de Cuba Stuttgart, añádelo a tu calendario
Story cuenta atrás
Post azul marino: noviembre, 20 festivales, con cuatro tarjetas de festival y sus fechas
Este mes

Impacto

la calidad, como paso del build

En línea desde el 1 de octubre, Lighthouse 100 en cada build.

  • Accesibilidad. axe revisa cada página según WCAG 2.1 AA, en claro y oscuro.
  • Datos. Un JSON no válido hace fallar el build; una reconstrucción diaria pasa los festivales pasados al archivo.
  • Calendarios. Un archivo .ics por festival y un feed por región.
  • Siguiente. Páginas de artista, para seguir a un profesor de festival en festival.

Qué haría distinto

  1. Empezar con un archivo de datos. La base de datos causó los peores errores.
  2. Validar antes los ingresos con las ticketeras.

¿Buscas a alguien que pone cosas en marcha?

EscríbemeLinkedIn