Reimagining a Tour Agency’s Digital Experience

Client

Inout Barcelona Tours

Role

Senior UI/UX Designer, Frontend Developer

Overview

In Out Barcelona Tours needed a complete overhaul of their outdated website — both visually and functionally. The existing site had a clunky booking flow, poor mobile performance, and an admin panel that made content updates painful.

Outcomes

Platform supporting business expansion

Enabled growth into one of Catalunya’s leading tour operators and expansion into Madrid and Sevilla markets.

2× faster market launches

Custom CMS workflows enabled the operations team to create and launch new tour markets significantly faster.

Scalable multi-brand platform

Component-based design system and frontend architecture supporting future growth and white-label tour offerings.

Goals & UX Drivers

Modernize the visual identity while keeping it approachable and trustworthy
Improve UX for tour discovery and booking
Rebuild the admin experience to simplify content updates (multilingual, SEO, images)
Future-proof the tech stack with a component-based, scalable architecture

Platform supporting business expansion

Enabled growth into one of Catalunya’s leading tour operators and expansion into Madrid and Sevilla markets.

UX Discovery

Audit of the existing site: slow load times, inconsistent UI, confusing navigation
User needs: most customers browse and book via mobile
Admin feedback: they needed easier multilingual content management and visual previews for editing

UI Design Process

Created a modular component system in Figma (headers, tour cards, modals, forms)
Established a new visual language: nature-inspired tones, rounded buttons, soft shadows
Designed a custom image grid and Swiper carousel for tour pages to improve media storytelling
Built a language switcher with URL routing, respecting SEO and UX best practices

Development Highlights

Built with Next.js, fully server-side rendered for SEO
Integrated WordPress via GraphQL (ACF blocks)
Structured code to support future CMS migrations (e.g. to Sanity)
Created custom API routes for data revalidation and preview
Used TailwindCSS with a custom token system for scalability

Conclusion

This project transformed the company’s digital platform into a scalable product, improving the booking experience, enabling faster content operations, and supporting business expansion into new markets.