Saltar al contenido
Jorge Montagna
← Volver a los casos Caso 02 · Caso de estudio · Rediseño web · Cultura

Teatro del Bicentenario

Sacar el dato de adentro de la imagen

Rediseño del ecosistema digital del teatro público de San Juan: el sitio institucional, la venta de entradas en Tuentrada y las redes. El Teatro produce el dato de cada función, lo maqueta y lo publica, pero lo publica como pieza gráfica, no como información.

Cartelera propuesta: filtros de sala, mes y tipo de entrada, y tarjetas con fecha, sala, precio y estado de disponibilidad.
Contexto
Caso de estudio académico de rediseño web. Diplomatura en Diseño UX/UI, Coderhouse: materia Diseño UX/UI Avanzado. No fue encargado ni avalado por el Teatro.
Mi rol
Todo el proceso: auditoría, estrategia y KPIs, investigación, arquitectura, tree test, prototipo, sistema de diseño y accesibilidad.
Plataforma
Sitio web institucional y el salto a la venta en Tuentrada.
Herramientas
Figma, FigJam y Maze. IA para ordenar hallazgos y redactar borradores; las decisiones y los criterios son míos.
En cinco datos

Si leés una sola pantalla

19 %de cobertura digital: el sitio publicaba la fecha en 3 de 16 funciones
3 de 7personas encontraron precio y disponibilidad en la arquitectura actual
1decisión de raíz: el dato de la función pasa a ser información
3 de 3personas resolvieron las mismas tareas en el prototipo
2,02:1de contraste del dorado del Teatro sobre fondo blanco, muy por debajo del mínimo legible de 4,5:1. Por eso el dorado quedó solo sobre negro
Estrategia

La butaca vacía es la pérdida real

No hace falta inventar una cartelera desde cero. Hace falta extender a todo el sitio lo que la casa ya sabe hacer en una de sus salas, y sacar el dato de adentro de la imagen.

Audité el ecosistema completo y no el sitio aislado, porque el recorrido real de un espectador atraviesa los tres canales y la fricción aparece en las costuras.

El objetivo de negocio es la ocupación de sala. Es una institución pública: el costo de la función ya está hecho cuando se levanta el telón. De ahí sale la métrica North Star: tasa de ocupación por función, sumando entradas pagas y gratuitas. Sumar las dos impide que el rediseño optimice la venta y deje en el fondo la programación gratuita, que es justo el agujero que encontró la investigación.

KPIQué mideBase y meta
Cobertura digital de la programaciónFunciones con fecha, horario, sala y modo de acceso en texto, al menos catorce días antes19 % → 100 % en seis meses
Conversión de ficha a compraVisitas a la ficha que inician la compra, y caída entre ficha y pago−15 puntos de caída en seis meses
Autosuficiencia del espectadorQuienes resuelven información y acceso sin recurrir a boletería, teléfono o mensaje−30 % de consultas repetidas en doce meses

La base del primer KPI sale de un relevamiento propio, función por función. Las metas de los otros dos se apoyan en referencias públicas del sector, con sus limitaciones declaradas.

Investigación

La curva toca el piso justo al conseguir la entrada

El pico de la experiencia está en la función misma. El piso está en el paso previo, que es íntegramente digital.

Mapeé el journey del espectador recurrente en cinco fases: descubrir, decidir, conseguir la entrada, asistir y volver. Las citas son textuales y trazables: comentarios de Instagram, reseñas de Google Maps y una entrevista. De ahí salieron ocho insights. Cuatro sostienen el rediseño:

  • El anuncio de una función gratuita no dice cómo se accede. «Entrada libre y gratuita» no responde si hay que retirar entrada, dónde ni desde cuándo.
  • No existe estado de disponibilidad en ningún canal. Para saber si quedan lugares hay que empezar a comprar.
  • La web del Teatro perdió frente al sitio del proveedor. Tuentrada tiene una cartelera fechada que el sitio del Teatro ni enlaza.
  • El descuento esconde su restricción hasta el intento fallido. La condición aparece después de que la compra se rechazó.
Journey map del espectador en cinco fases, con la curva emocional y citas reales de usuarios.
Journey map. Las tres primeras fases son digitales y bajan; el pico llega recién en la sala.
Un error propio, a la vista. Mi primer análisis afirmaba que había dos formatos de visita guiada. Era una inferencia sin respaldo: el testimonio de un espectador la desmintió. La investigación corrigió tres afirmaciones mías, y las tres veces el hallazgo mejoró.
Arquitectura

Probada antes de dibujar una sola pantalla

Tree test con cinco tareas y siete participantes. Lo que más enseñó no fue una cifra, sino un camino.

Un participante recorrió siete pasos: pasó por «Cómo comprar», no encontró el precio y terminó en Contacto. No es que no supiera dónde buscar: el lugar donde buscó no tenía el dato. De ahí la decisión central: precio, disponibilidad y condiciones de acceso pasan a la ficha de cada función, y dejan de vivir solo dentro de la compra.

TareaÉxitoCamino directo
Función del sábado7 de 76 de 7
Concierto gratuito3 de 72 de 7
Precio y disponibilidad3 de 71 de 7
Convocatoria de elenco7 de 77 de 7
Recorrido del edificio4 de 72 de 7

Maze no calcula éxito ni camino directo para tree testing. Reconstruí las dos métricas a mano desde el CSV, con los criterios definidos antes de mirar los datos. También declaré mis errores: una consigna mal redactada y un nodo que yo creía correcto y no eligió nadie.

Hoy
Arquitectura actual del sitio, con siete nodos de primer nivel.
Propuesta
Arquitectura propuesta, con cinco nodos y el insight que resuelve cada uno.
Flujo crítico: tres puertas de entrada desembocan en la ficha de la función y de ahí en la transición a Tuentrada.
Flujo crítico. Instagram, el buscador y la home desembocan en la misma ficha. Hoy ninguna de las tres entrega el dato completo.
Propuesta visual

La misma grilla, haciendo otro trabajo

Veinte pantallas sobre el esqueleto real del sitio. Nueve están dedicadas a lo que puede salir mal.

El esqueleto no lo inventé: lo copié del sitio real, leyendo sus estilos. Lo que cambia es lo que la evidencia obliga a cambiar, para que el rediseño se lea como una evolución del producto y no como otro producto.

  • El precio va en la tarjeta de cartelera. Acá varía por espectáculo: sin él, una lista de diez funciones son diez clics para una sola decisión de presupuesto.
  • La ficha muestra precio por ubicación, disponibilidad y la condición del 2x1 antes de elegir ubicación, no después del rechazo.
  • El salto a Tuentrada es una pantalla, no un modal. Un modal alcanza para avisar; una pantalla alcanza para explicar.
  • Los vacíos se distinguen: «Receso técnico» no es lo mismo que «Sin publicar». El sitio actual no los separa.
Hoy
Home actual: una foto de La Traviata y tres tarjetas de novedades de prensa.
Ficha propuesta
Ficha de Antígona con recomendación de edad, precios por ubicación, la promoción con su restricción y el botón de compra.
Pantalla intermedia que resume la función, explica qué es Tuentrada y enumera qué pasa a continuación.
Transición a Tuentrada. El salto se declara, se explica y conserva el contexto de la función.
Vacío con motivo
Cartelera de noviembre con la etiqueta Receso técnico y dos salidas.
Sin publicar
Cartelera de diciembre con la etiqueta Sin publicar.
Sistema de diseño

Medir antes de usar

No inventé un sistema: relevé el del sitio real y lo corregí solo donde la medición obligó.

El dorado institucional da 2,02 de contraste sobre blanco y 10,38 sobre negro. Está bien en el único lugar donde el sitio lo usa, la barra negra. El error habría sido llevarlo al cuerpo blanco por fidelidad de marca: ahí uso una versión oscura que llega a 5,87 y cumple AA. Cada token lleva su medición al lado, así la decisión queda a la vista.

Tabla de tokens de color con su contraste contra blanco y su uso; dos filas marcadas como solo para fondo negro.
Validación

Las tareas se resolvieron, y apareció un problema nuevo

Antes del estudio declaré los umbrales, para no acomodar la lectura a los números que salieran. Los dos criterios se cumplieron.

TareaÉxitoAbandonoClics fuera de lugarTiempo
Precio y disponibilidad3 de 30 %57,1 %22,1 s
Condiciones de retiro3 de 30 %11,1 %38,4 s
Comprar la entrada3 de 30 %69,7 %36,2 s

Tres participantes: un estudio exploratorio, no confirmatorio. Lo que sostiene las decisiones es la conducta repetida, no la tasa.

La palabra «entrada» atrae la intención de compra esté donde esté. Dos de tres abrieron el filtro «Entrada: todas» cuando les pedí comprar. Es el mismo fenómeno del tree test visto desde el otro lado. La iteración más barata: renombrar el filtro a «Tipo de entrada».

Y un hallazgo honesto: la pantalla de transición logró cero abandono, pero ninguno de los tres nombró a Tuentrada. Cumplió su objetivo principal, no el secundario.

Mapa de calor sobre la cartelera: clics sobre Ver función y sobre la palabra Entradas del menú.
Accesibilidad

El problema no es el color, es la estructura

Audité leyendo el código y los estilos de la página, no con una herramienta de puntaje. Un puntaje esconde cuál criterio falla y por qué.

  • El foco no se ve: quien navega con teclado usa el sitio con el cursor invisible. Es lo más barato de arreglar: una regla de CSS.
  • La home no tiene H1. El único H1 del sitio está en la página de error, y dice «404 - Page not found».
  • Esa página se declara en español y está escrita en inglés, así que un lector de pantalla la pronuncia con fonética española.
  • No hay enlace para saltar la navegación: con 145 enlaces, quien usa teclado los recorre todos antes de llegar al contenido.
<html lang="es-ES">
<h1>404 - Page not found</h1>
<h2>The page you are looking for is not found</h2>

Lo que no esperaba: texto negro sobre blanco da 21:1 y el menú sobre la barra negra 7,74:1. El trabajo pendiente es estructural, no cromático, y eso cambia dónde conviene invertir.

Aprendizaje

La herramienta no define qué se mide

El método pedía tasa de éxito, camino directo y tiempo por tarea. Maze no entrega ninguna de las tres para tree testing. Definí los criterios antes de mirar los datos, reconstruí las métricas participante por participante desde el CSV y declaré que el tiempo por tarea no estaba disponible, en lugar de estimarlo.

Si la métrica que el método pide no viene calculada, se calcula a mano y se documenta el criterio. Lo contrario es dejar que el producto decida la pregunta.

Materiales

Para entrar al detalle

Trabajo de cursada de la Diplomatura en Diseño UX/UI. No fue encargado, revisado ni avalado por el Teatro del Bicentenario de San Juan. Las fotografías y la identidad visual pertenecen al Teatro y a sus autores; la foto de La Traviata es de Juanjo Bruzza. Se usan dentro de un análisis académico, sin fines comerciales.