Xalar Experiences
WebdeunaagencialocaldelEmpordàquediseñaexperienciaspremium,eventoscorporativosyunprogramaconciergeparahoteles.Trespúblicos,unasolaweb,delaarquitecturaalcódigo.
(SCROLL) ↓
01
Visión general
Tres públicos, una misma puerta de entrada.
Xalar trabaja para tres clientes que no se preguntan lo mismo: una empresa que prepara un off-site, un hotel que quiere ofrecer el Empordà a sus huéspedes y un viajero que busca una experiencia. La web tenía que atenderlos a todos sin mezclarlos. Definí un recorrido propio para cada público, diseñé la interfaz y el sistema de componentes, y lo llevé a código con Next.js y un CMS para editarla en cuatro idiomas.
Fitxa
02
Experiencia de usuario
Una puerta para cada público.
Empresas, hoteles y viajeros buscan cosas distintas y deciden de forma distinta. La home hace de distribuidor: tres puertas que llevan cada una a su recorrido, con su tono, su formato y su acción principal (pedir presupuesto, solicitar el programa o ver el catálogo).
Mi aportación
- Definición de usuarios: tres perfiles (empresas, hoteles, particulares) con objetivos, preguntas y acción principal propios.
- Arquitectura de contenidos: siete páginas, con una landing por público, el catálogo de experiencias y el territorio.
- Catálogo con filtros: experiencias por categoría, zona y temporada, con la duración y el precio «desde» a la vista.
- Formulario de consulta: cuatro datos en la ficha de cada experiencia para que la propuesta llegue concreta.
03
Prototipado
Diseñado y programado a la vez.
Las páginas se montaban en código con asistencia de IA a partir de los wireframes y volvían a Figma para revisarlas con el cliente, en desktop y en móvil. Así diseño y producción no se separaron nunca.
Mi aportación
- Del código a Figma: las siete páginas, en desktop y móvil, capturadas del código para revisarlas sobre el archivo.
- Contenido editable: Sanity como gestor, con modelos para experiencias, páginas e idiomas.
- Cuatro idiomas: catalán, castellano, inglés y francés desde el primer día, publicado en Vercel.
04
Diseño de interfaz
Un territorio que se lee despacio.
Xalar no vende paquetes, vende una manera de mirar el Empordà. La interfaz tenía que parecerse más a una revista que a un comparador: fotografía grande, titulares con voz propia, citas de Dalí y de Pla, y una librería de componentes que sostiene las siete páginas.
Mi aportación
- Sistema de diseño: fundamentos, botones, etiquetas, insignias e iconos documentados como librería.
- Dirección editorial: titulares, manifiesto y citas que explican el territorio antes de venderlo.
- Componentes editoriales: tarjetas de experiencia, citas y bloques de territorio reutilizables entre páginas.
Xalar tiene una web que habla a tres públicos sin confundirlos: cada uno encuentra su puerta, su tono y su acción. Y un sistema con CMS y cuatro idiomas que el equipo puede hacer crecer sin tener que volver a pasar por el diseño.
Comparte este proyecto
Sigue desplazándote para ver el siguiente caso práctico.
Can Kai