Art Crawler
Toda la oferta cultural de arte en una sola app
Plataforma digital para la gestión y compra de entradas a exposiciones de arte en España, centralizando la oferta cultural de museos y galerías en una experiencia unificada.
Rol
Lead UI Designer
Duración
Enero – Marzo 2023.
Herramientas
Figma.
Objetivo Clave:
Unificar la compra de entradas culturales reduciendo la tasa de abandono en el checkout.
Contexto del Proyecto
🛑El Problema
La oferta cultural está fragmentada, lo que provoca búsquedas complejas y el abandono de la compra por frustración.
✅La Solución
Unificar museos y galerías en una sola app para descubrir exposiciones y comprar entradas en pocos pasos.
Descubrimiento & Estrategia de Producto
Para fundamentar la propuesta de Art Crawler, investigué las necesidades reales de los usuarios y analicé las limitaciones del mercado actual con el fin de identificar oportunidades claras de diseño.
Perfil del Usuario & Puntos de Dolor
Para diseñar la experiencia pensando en el usuario real, creé a Andrea. Ella resume perfectamente el gran dolor de este proyecto: ‘Comprar entradas debería ser rápido y sin complicaciones para poder centrarme en disfrutar del arte’.
Con su perfil como guía, el objetivo de UI fue eliminar cualquier paso innecesario del flujo de compra y diseñar una interfaz limpia que no compita visualmente con las obras de arte.
Análisis Competitivo & Insight de Mercado
💡 Oportunidad de Producto:
La oferta actual prioriza el ocio masivo y los catálogos cerrados, fragmentando la experiencia cultural.
Analicé las principales plataformas del sector (Fever, Kultur, CaixaForum, Street Art Cities y Meetup) enfocándome en el descubrimiento por mapa/ubicación y la reserva de entradas.
El análisis reveló que las apps masivas mezclan exposiciones con ocio nocturno y fiestas, mientras que las webs de museos ofrecen catálogos cerrados y checkouts poco transparentes. Art Crawler responde a esta brecha unificando galerías y museos en una sola interfaz centrada exclusivamente en la experiencia artística y la compra rápida.
2- Definición de los Atributos de Marca
Para responder directamente a la frustración principal del usuario —los procesos de compra lentos y confusos—, definí tres pilares para la personalidad de la app:
Rapidez: Minimizar los pasos desde el descubrimiento hasta el pago.
Sencillez: Interfaces limpias, sin elementos que distraigan del contenido cultural.
Estética: Un diseño cuidado que esté a la altura de las obras de arte que expone.
3- Benchmark Competitivo
Analicé las plataformas de eventos y cultura más relevantes del mercado (Fever, Kultur, CaixaForum, Street Art Cities y Meetup) para evaluar cómo gestionan la reserva de entradas y el descubrimiento por mapa/ciudad.
Conclusión clave: La mayoría se enfoca en ocio nocturno general o en su propio catálogo cerrado, dejando un espacio claro para una app dedicada exclusivamente a exposiciones de arte en museos y galerías.
4- Benchmark Visual
Tras definir el modelo de servicio, analicé las interfaces de estas mismas plataformas para detectar qué patrones de UI ya funcionan en el sector y dónde podíamos diferenciarnos.
Enfoque del análisis: Me centré en la estructura de las fichas de exposición, la presentación de los mapas interactivos y la claridad de sus pantallas de checkout. Esto me sirvió como punto de partida para definir los componentes y la densidad de información de nuestra app.
5- Moodboard y Dirección de Arte
Para definir la identidad visual y la dirección de arte de Art Crawler —desde el diseño del logotipo hasta la selección de colores y tipografías—, creé un moodboard de referencia enfocado en arquitectura, diseño editorial y galerías contemporáneas.
El objetivo visual: Crear una identidad sobria y elegante que se aleje del ruido visual de las apps de ocio tradicionales, dándole todo el protagonismo a las obras de arte.
Decisiones clave de diseño:
Paleta orgánico-terrosa: Tonos cálidos que evocan historia, calma y la atmósfera física de un museo.
Combinación tipográfica: Elegí una tipografía Serif (para aportar elegancia en títulos) y una Sans-Serif (para máxima legibilidad en componentes y cuerpos de texto).
Estructuras limpias: Espacios amplios y composiciones con respiro para facilitar la lectura y el escaneo del contenido.
Dirección de Arte & Principios de Diseño
Para que la interfaz no compitiera visualmente con las obras de arte expuestas, definí una identidad sobria, cálida y minimalista basada en tres pilares:
Rapidez táctil: Reducción de pasos desde el descubrimiento hasta el pago seguro.
Elegancia editorial: Tonos orgánicos-terrosos y tipografía Serif para conectar con la atmósfera física de un museo.
Claridad visual: Espacios amplios y uso de espacio negativo para facilitar el escaneo intuitivo.
Arquitectura de Información & Sistema de Diseño
Estructuré la navegación para eliminar callejones sin salida y construí un sistema de diseño modular que garantiza escalabilidad y consistencia visual.
Sitemap & User Flow
Antes de diseñar pantallas, estructuré la arquitectura de contenidos para asegurar que la navegación fuera clara, lógica y sin callejones sin salida.
Sitemap: Definí una estructura plana organizada en tres caminos principales: la búsqueda de exposiciones por ciudad o fecha, la exploración de centros de arte (museos y galerías) y la gestión de entradas desde el perfil del usuario.
- User Flow: Mapeé el recorrido principal del usuario centrándome en acortar la ruta desde el descubrimiento de la exposición hasta el pago de la entrada, asegurando feedback claro en cada acción.
Proceso de Wireframing (Lo-Fi a Mid-Fi)
Antes de pasar al diseño visual definitivo, trabajé la estructura de las pantallas en dos etapas para validar la distribución de los contenidos.
Baja fidelidad (Lo-Fi): Comencé con bocetos a mano para explorar rápidamente distintas opciones de menú, fichas de exposición y ubicación del botón de compra.
- Media fidelidad (Mid-Fi): Pasé los conceptos seleccionados a digital en escala de grises para ajustar proporciones y validar la jerarquía visual antes de aplicar color.
UI Kit & Sistema de Componentes
Para garantizar la coherencia visual y facilitar la escalabilidad del proyecto, construí un UI Kit modular en Figma centrado en la accesibilidad y el detalle visual.
Jerarquía Tipográfica:
- Playfair Display (Serif): Aporta elegancia y sofisticación en titulares principales.
- Raleway (Sans-Serif): Aporta máxima legibilidad en cuerpos de texto, botones y elementos de interfaz.
Color y Contraste:
Paleta Principal (Marrones y Verdes orgánicos): Evocan la calma, la historia y el entorno físico de las galerías y museos.
Colores de Sistema: Definidos específicamente para alertas de éxito, error o aviso, garantizando contraste y visibilidad.
Biblioteca de Componentes y Estados:
Diseñé componentes reutilizables contemplando todos sus estados de interacción (Default, Click, Disabled) y estados de error en formularios para guiar al usuario en todo momento.
Solución Final e Impacto
El resultado es una interfaz limpia donde las obras de arte son las protagonistas, respaldada por un flujo de compra fluido y accesible.
Pantallas Principales del Flujo (Hi-Fi)
Aplicando el UI Kit y la dirección de arte, diseñé las pantallas finales del producto. El foco principal estuvo en mantener una jerarquía visual limpia, dar todo el protagonismo a las imágenes de las obras de arte y asegurar un flujo de compra de entradas intuitivo y directo.
Prototipo Navegable & Demostración
A continuación puedes comprobar la navegación real y las transiciones del producto en vídeo, o acceder directamente a los archivos de trabajo:
Conclusiones y Próximos pasos
Aprendizajes Clave:
Sistemas de Diseño Modulares: El mayor aprendizaje de este proyecto fue construir un sistema de componentes escalable en Figma desde las fases iniciales. Diseñar variantes y estados con rigor permitió acelerar la creación de pantallas Hi-Fi y garantizar una coherencia visual absoluta en todo el producto.
Siguientes Pasos:
Usability Testing & Handoff: El siguiente paso lógico será ejecutar pruebas de usabilidad con usuarios reales sobre el prototipo en alta fidelidad para medir tasas de conversión en el checkout, seguido de la documentación técnica (Design Tokens) para el equipo de desarrollo.