Xalar Experiences

Webd’unaagèncialocaldel’Empordàquedissenyaexperiènciespremium,esdevenimentscorporatiusiunprogramaconciergeperahotels.Trespúblics,unasolaweb,del’arquitecturaalcodi.
(SCROLL) ↓
01

Visió general

Tres públics, una mateixa porta d’entrada.

Xalar treballa per a tres clients que no es pregunten el mateix: una empresa que prepara un off-site, un hotel que vol oferir l’Empordà als seus hostes i un viatger que busca una experiència. El web els havia d’atendre tots sense barrejar-los. Vaig definir un recorregut propi per a cada públic, vaig dissenyar la interfície i el sistema de components, i ho vaig portar a codi amb Next.js i un CMS per editar-lo en quatre idiomes.

Fitxa

RolUI/UX Design & Front-end
Any2026
DisciplinaWeb Design
SectorTourism & Events
Webxalarexperiences.com
Web de Xalar en una tauleta sobre una butaca de vellut
Logotip de Xalar amb el descriptor Costa Brava
Manifest de Xalar: «No organitzem viatges. Dissenyem moments que es recorden.»
02

Experiència d’usuari

Una porta per a cada públic.

Empreses, hotels i viatgers busquen coses diferents i decideixen de manera diferent. La home fa de distribuïdor: tres portes que porten cadascuna al seu recorregut, amb el seu to, el seu format i la seva acció principal (demanar pressupost, sol·licitar el programa o veure el catàleg).

La meva aportació

  • Definició d’usuaris: tres perfils (empreses, hotels, particulars) amb objectius, preguntes i acció principal propis.
  • Arquitectura de continguts: set pàgines, amb una landing per públic, el catàleg d’experiències i el territori.
  • Catàleg amb filtres: experiències per categoria, zona i temporada, amb la durada i el preu «des de» a la vista.
  • Formulari de consulta: quatre dades a la fitxa de cada experiència perquè la proposta arribi concreta.
Formulari de consulta d’una experiència
Arquitectura del web: set pàgines i tres portes des de la home
Filtres del catàleg per categoria, zona i temporada
03

Prototipatge

Dissenyat i programat alhora.

Les pàgines es muntaven en codi amb assistència d’IA a partir dels wireframes i tornaven al Figma per revisar-les amb el client, en desktop i en mòbil. Així disseny i producció no es van separar mai.

La meva aportació

  • Del codi al Figma: les set pàgines, en desktop i mòbil, capturades del codi per revisar-les sobre el fitxer.
  • Contingut editable: Sanity com a gestor, amb models per a experiències, pàgines i idiomes.
  • Quatre idiomes: català, castellà, anglès i francès des del primer dia, publicat a Vercel.
Web de Xalar en un portàtil i un mòbil
Menú mòbil amb les cinc seccions del web
Pàgina Nosaltres en un mòbil
04

Disseny d’interfície

Un territori que es llegeix a poc a poc.

Xalar no ven paquets, ven una manera de mirar l’Empordà. La interfície s’havia d’assemblar més a una revista que a un comparador: fotografia gran, titulars amb veu pròpia, cites de Dalí i de Pla, i una llibreria de components que sosté les set pàgines.

La meva aportació

  • Sistema de disseny: fonaments, botons, etiquetes, insígnies i icones documentats com a llibreria.
  • Direcció editorial: titulars, manifest i cites que expliquen el territori abans de vendre’l.
  • Components editorials: targetes d’experiència, cites i blocs de territori reutilitzables entre pàgines.
Botons, enllaços, etiquetes i insígnies en mode clar
Botons, enllaços, etiquetes i insígnies en mode fosc
Paleta de colors de Xalar
Tipografia de Xalar: Fraunces i Inter

Xalar té un web que parla a tres públics sense confondre’ls: cadascun troba la seva porta, el seu to i la seva acció. I un sistema amb CMS i quatre idiomes que l’equip pot fer créixer sense haver de tornar a passar pel disseny.

Fotografies d’experiències: benestar, bicicleta, globus i vela

Comparteix aquest projecte

Continua desplaçant-te per veure el següent cas pràctic.

Can Kai