Designing and building a scalable booking platform

Client

Inout Barcelona Tours

Role

Senior UI/UX Designer, Frontend Developer

Overview

Over a long-term collaboration with Inout Barcelona Tours, the platform evolved from an initial web solution into a growing digital product supporting the company’s expansion. As the business scaled, new requirements emerged — including support for multiple cities, improved content operations, and a more flexible technical foundation. This led to a strategic transition from a Symfony-based architecture to a modern React (Next.js) platform, enabling improved performance, scalability, and deployment workflows through Vercel.

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 expansion and white-label tour offerings

Goals & UX Drivers

Goals & Product Drivers

The project focused on transforming the platform into a scalable product capable of supporting business growth, operational efficiency, and a seamless booking experience.

A key part of this transformation was adapting to the company’s transition to a centralised booking system through FareHarbor, ensuring that external constraints were integrated into a cohesive product experience.

Core Objectives

Modernise the visual identity while maintaining trust and approachability
Improve the booking experience across mobile and desktop
Simplify content operations for multilingual and SEO-driven workflows
Build a scalable product platform to support expansion into new markets
Establish a reusable system across design and engineering

Booking System Integration

The platform was redesigned to integrate FareHarbor’s booking infrastructure:

Used FareHarbor APIs to manage availability and booking logic
Integrated the embedded booking flow into the application UI
Ensured the experience felt seamless and native within the product

This approach allowed the team to leverage a centralised system while maintaining control over the overall user experience.

System & Product Design

The platform was approached as a scalable product system, designed to support growth across multiple cities rather than a one-off redesign.

Design System & UI Foundations

A modular design system was created in Figma to ensure consistency and reuse across the product:

Defined a flexible visual language aligned with the brand while improving hierarchy and readability
Built reusable components and patterns for key journeys such as tour discovery, booking flows, and content presentation
Established a system capable of supporting multi-city expansion and future product variations

Engineering-Oriented Implementation

The system was implemented with a development-first approach to ensure scalability and reuse across markets:

Translated design tokens into CSS variables integrated with TailwindCSS, creating a shared styling foundation
Built reusable frontend components aligned with the design system
Structured a dedicated App Shell layer to manage shared layouts and logic across city-specific applications
Enabled each city instance to reuse the same core system while adapting content and configuration

Booking Flow — Enhanced experience powered by a custom integration with FareHarbor’s availability and booking system.

Platform Architecture & Development

Led the technical implementation alongside product design to ensure scalability.

Built the frontend using Next.js with server-side rendering for performance and SEO
Structured the codebase as a modular, reusable architecture (mono-repo approach) to support multiple markets
Integrated a headless CMS (Sanity) tailored to the company’s operational workflows
Developed custom CMS features enabling content preview, data revalidation, and flexible publishing
Implemented a token-based styling system using TailwindCSS to ensure consistency and scalability

Operational Impact

Designed a custom CMS experience enabling the team to manage multilingual content and media efficiently
Reduced friction in content creation and updates across tours and markets
Enabled faster rollout of new destinations through reusable product and code structures

Conclusion

This project transformed the company’s digital presence into a scalable product platform — improving the booking experience, enabling faster operations, and supporting expansion into new markets through a shared design and engineering system.