Xalar Experiences

WebsiteforalocalEmpordàagencythatdesignspremiumexperiences,corporateeventsandaconciergeprogrammeforhotels.Threeaudiences,onewebsite,fromarchitecturetocode.
(SCROLL) ↓
01

Project Overview

Three audiences, one front door.

Xalar works for three clients who aren’t asking the same questions: a company planning an off-site, a hotel that wants to offer the Empordà to its guests and a traveller looking for an experience. The website had to serve all of them without mixing them up. I defined a dedicated journey for each audience, designed the interface and the component system, and built it in code with Next.js and a CMS so it can be edited in four languages.

Fitxa

RoleUI/UX Design & Front-end
Year2026
DisciplineWeb Design
SectorTourism & Events
Websitexalarexperiences.com
Xalar website on a tablet resting on a velvet armchair
Xalar logo with the Costa Brava descriptor
Xalar manifesto, in Catalan: “No organitzem viatges. Dissenyem moments que es recorden.” (We don’t organise trips. We design moments to remember.)
02

User Experience

A door for each audience.

Companies, hotels and travellers look for different things and decide in different ways. The home page acts as a hub: three doors, each leading to its own journey, with its own tone, format and main action (requesting a quote, applying for the programme or browsing the catalogue).

My contribution

  • User definition: three profiles (companies, hotels, individuals), each with its own goals, questions and main action.
  • Content architecture: seven pages, with a landing page for each audience, the experience catalogue and the region.
  • Filtered catalogue: experiences by category, area and season, with the duration and “from” price in plain sight.
  • Enquiry form: four details on each experience page so the proposal arrives specific.
Enquiry form for an experience
Site architecture: seven pages and three doors from the home page
Catalogue filters by category, area and season
03

Prototyping

Designed and built at the same time.

Pages were built in code with AI assistance from the wireframes and went back into Figma to be reviewed with the client, on desktop and mobile. That way design and production never drifted apart.

My contribution

  • From code to Figma: all seven pages, on desktop and mobile, captured from the code to review them in the file.
  • Editable content: Sanity as the CMS, with models for experiences, pages and languages.
  • Four languages: Catalan, Spanish, English and French from day one, deployed on Vercel.
Xalar website on a laptop and a phone
Mobile menu with the site’s five sections
About page on a phone
04

UI Design

A region you read slowly.

Xalar doesn’t sell packages, it sells a way of looking at the Empordà. The interface had to feel more like a magazine than a comparison site: large photography, headlines with a voice of their own, quotes from Dalí and Pla, and a component library that supports all seven pages.

My contribution

  • Design system: foundations, buttons, tags, badges and icons documented as a library.
  • Editorial direction: headlines, a manifesto and quotes that explain the region before selling it.
  • Editorial components: experience cards, quotes and region blocks reusable across pages.
Buttons, links, tags and badges in light mode
Buttons, links, tags and badges in dark mode
Xalar colour palette
Xalar typography: Fraunces and Inter

Xalar has a website that speaks to three audiences without confusing them: each one finds its own door, its own tone and its own action. And a system with a CMS and four languages that the team can grow without having to go back through design.

Experience photography: wellness, cycling, hot-air balloon and sailing

Share this project

Keep scrolling to see the next case study.

Can Kai