Bookable is an infrastructure-first platform designed for the hospitality industry. By providing a scalable API that connects operators and distributors, it enables real-time bookings, seamless availability sync, and effortless discovery of experiences - from cocktail masterclasses to private dining.
Context & Challenges
The hospitality industry faces a recurring pain point: a disconnection between operators and distributors.
- Operators (restaurants, bars, venues) offer amazing group experiences but lack real-time availability where customers are searching.
- Distributors (marketplaces, agencies, booking platforms) want to sell these experiences but struggle to access live inventory, often relying on endless email exchanges that increase operational costs for operators.
As marketplace owners, the Bookable founders knew this challenge firsthand: manual processes caused high operational costs. Their vision - a solution that connects operators and distributors through real-time availability.
Key challenges for design:
- Build a portal where operators and distributors can easily connect, automate their workflows, and eventually discover new opportunities for collaboration.
- Translate a highly technical, API-driven product into a simple and intuitive solution.
- Ensure scalability - the brand and design system had to support growth across multiple touchpoints (operator dashboards, distributor integrations, marketing materials).
Design Process
In this project, I followed the Double Diamond framework but adapted it to business priorities and time constraints.
Research & Insights
- Competitor analysis (Mozrest, UrbanPiper) to understand positioning and UX patterns in hospitality tech.
- Stakeholder interviews with the founders and product manager to capture internal knowledge and pain points.
- User interviews with operators and distributors to validate real frustrations around availability, manual processes, and connection barriers. Some of the key points include:
Framing the Challenges
Based on research and interviews, I outlined three key design challenges:
- Simplify onboarding and connections
Design a portal that acts as a bridge, not another RMS - where operators can sign in, link their existing systems, and instantly connect with distributors. Onboarding must be fast, intuitive, and frictionless.
- Humanize technical infrastructure
Turn an API-first, highly technical product into a clear, user-friendly UI - replacing emails and CSV uploads with simple and intuitive flows.
- Ensure scalability through a flexible design system
Create a flexible design system that scales across ensuring consistency, reducing manual work, and supporting long-term growth.
Design & Collaboration
At this stage, I collaborated closely with the product manager, who prepared workflow scenarios, and we refined them based on stakeholder input and early user insights.
In parallel, I worked with the engineering team to understand technical constraints and find ways to accelerate delivery. I proposed using the PrimeReact framework as the foundation for the UI - this allowed us to move quickly while keeping consistency through a shared design system.
This decision accelerated development by 25%, while preserving a professional and scalable design language.
Visual Design & System Delivery
The final stage focused on translating workflows and research into a cohesive visual identity and scalable design system.
The UI emphasizes clarity and simplicity, turning an API-first infrastructure into intuitive dashboards and flows.
From operator onboarding to distributor profiles, every flow was designed to reduce friction, support discoverability, and make Bookable feel approachable yet professional.
Sign Up - Operator or Distributor
The sign-up flow begins with a role selection: register as an operator or a distributor. This ensures each user type enters an onboarding path tailored to their needs.
Operator Onboarding
I designed onboarding as a 3-step guided flow with a progress bar to keep setup light and transparent. The flow focuses on three essentials: connecting the RMS, adding API credentials, and inviting distributors they already work with. Skippable steps with reminders on the dashboard reduce drop-off and let operators complete setup at their own pace.
Dashboard Setup Blocks
Both operators and distributors land on dashboards with setup blocks that mirror onboarding steps. This persistent design reduces friction - skipped steps can be completed later without losing progress, keeping activation rates high.
Distributor Management
The distributors page is split into My Distributors, Pending, and Discover. This structure mirrors the operator’s mental model and removes the chaos of email chains. Clear states (active, pending) give operators control and visibility over all their connections.
Distributor Profile
A structured profile with key details - business type, audience, venues, commission, and volume - makes distributors easy to discover and compare, reducing back-and-forth.
Developers Section - API Keys
A clean, structured interface for managing production and staging API keys. Clear separation reduces mistakes, while the guided modal makes key creation straightforward and secure.
Design System
The design system, built on PrimeReact, included reusable components, tokens, and documentation - ensuring consistency while accelerating development by 25%.
Reflections
This project strengthened my ability to translate highly technical, infrastructure-heavy products into human-centered experiences. I learned how to advocate for simplicity in a domain dominated by complexity, and how close collaboration with engineering (through tools like PrimeReact) can dramatically accelerate delivery without sacrificing design quality.