Halltels
Marketplace · Design System · Travel tech. 100+ hotels and travel agencies onboarded at MVP.
Halltels
Marketplace · Design System · Travel tech. 100+ hotels and travel agencies onboarded at MVP.
COMPANY
XCALE Consulting · Halltels
Role
Senior Product Designer
COMPANY
XCALE Consulting · Halltels
Role
Senior Product Designer
COMPANY
XCALE Consulting · Halltels
Role
Senior Product Designer
Discovery & problem
Context
Halltels is a B2B hotel marketplace that lets hotels sell inventory directly to travel agencies, without intermediaries. At XCALE I owned end-to-end design for both portals and the design system behind them, from discovery to handoff, working with PMs, business analysts and engineering.
Discovery
I ran sessions with travel agents and hotel revenue staff and mapped how a booking actually happened: agents juggling several supplier sites, spreadsheets and phone calls while their client waited, and hotels receiving bookings by email with no clear view of what had been paid.
Pain points
Agencies: no single place to compare price, board type and cancellation terms, no cart for multi-hotel trips, and quotes rebuilt by hand for every client.
Hotels: rate and payment-term changes needed support, bookings arrived outside any system, and payment status was unclear.
Both: two very different users had to transact inside one product without either side's workflow getting in the way of the other.
Key insight
Each side measures success differently. Hotels think in revenue and control. Agencies think in speed to booking. One shared visual language had to serve both without forcing either into the other's workflow.
Ideation
Design system first. Instead of designing two products and reconciling them later, I built atoms, molecules, organisms and templates up front, so both portals could grow from the same components.
Results as decision cards. I tested dense tables against cards and landed on cards that put price, board and cancellation terms in the first glance.
List and map in sync. Agents often answer location questions ("is it near the beach?"), so the map became a first-class view, not a separate page.
One cart for the whole trip. Several hotels, rooms, guests and payment terms in a single checkout.
Design, build & impact
Design and development
Agency portal, built around speed
Agents start where their client's request starts: a destination, dates and a room setup. Results show what matters for a decision without opening each hotel, and the list and map stay in sync.
The integrated cart puts rooms, guest details, price breakdown, payment terms and payment method on a single page. Agents can add more hotels to the same booking, download a quote for their client and top up their wallet at confirmation.
Hotel portal, built around revenue tasks
Hotels manage inventory and supplements, rate and payment plans and simulated availability. Every booking from an agency appears instantly with its locator and payment status, with no email or fax in between.
Implementation and handoff
Components that matched the code. The Figma library mirrored the front-end component structure, with states, spacing and tokens documented, so engineers could build both portals in parallel.
Business rules made visible. With the analysts I turned payment terms, cancellation policies and booking statuses into clear UI rules and annotated every edge case in the flows.
Close loop with engineering. Design reviews in staging before each release, plus contextual onboarding and cart-abandonment recovery added after the first round of usage.
AI in my process today
Halltels was designed in 2020 and 2021, before today's AI tools. To present it, I rebuilt the agency-to-hotel journey as the interactive walkthrough at the top of this page using Claude Code, working directly from the original screens. It's how I now prototype flows: in code, with real interactions, in hours instead of days.
Impact
100+ hotels and travel agencies started using the platform at MVP.
Two products, one system. The design system let the team ship both portals in parallel and kept the experience consistent as new features were added.
Search to confirmed booking in one flow, including multi-hotel trips that previously needed several suppliers.
Time to booking: [add]. Bookings per agency per month: [add].
Discovery & problem
Context
Halltels is a B2B hotel marketplace that lets hotels sell inventory directly to travel agencies, without intermediaries. At XCALE I owned end-to-end design for both portals and the design system behind them, from discovery to handoff, working with PMs, business analysts and engineering.
Discovery
I ran sessions with travel agents and hotel revenue staff and mapped how a booking actually happened: agents juggling several supplier sites, spreadsheets and phone calls while their client waited, and hotels receiving bookings by email with no clear view of what had been paid.
Pain points
Agencies: no single place to compare price, board type and cancellation terms, no cart for multi-hotel trips, and quotes rebuilt by hand for every client.
Hotels: rate and payment-term changes needed support, bookings arrived outside any system, and payment status was unclear.
Both: two very different users had to transact inside one product without either side's workflow getting in the way of the other.
Key insight
Each side measures success differently. Hotels think in revenue and control. Agencies think in speed to booking. One shared visual language had to serve both without forcing either into the other's workflow.
Ideation
Design system first. Instead of designing two products and reconciling them later, I built atoms, molecules, organisms and templates up front, so both portals could grow from the same components.
Results as decision cards. I tested dense tables against cards and landed on cards that put price, board and cancellation terms in the first glance.
List and map in sync. Agents often answer location questions ("is it near the beach?"), so the map became a first-class view, not a separate page.
One cart for the whole trip. Several hotels, rooms, guests and payment terms in a single checkout.
Design, build & impact
Design and development
Agency portal, built around speed
Agents start where their client's request starts: a destination, dates and a room setup. Results show what matters for a decision without opening each hotel, and the list and map stay in sync.
The integrated cart puts rooms, guest details, price breakdown, payment terms and payment method on a single page. Agents can add more hotels to the same booking, download a quote for their client and top up their wallet at confirmation.
Hotel portal, built around revenue tasks
Hotels manage inventory and supplements, rate and payment plans and simulated availability. Every booking from an agency appears instantly with its locator and payment status, with no email or fax in between.
Implementation and handoff
Components that matched the code. The Figma library mirrored the front-end component structure, with states, spacing and tokens documented, so engineers could build both portals in parallel.
Business rules made visible. With the analysts I turned payment terms, cancellation policies and booking statuses into clear UI rules and annotated every edge case in the flows.
Close loop with engineering. Design reviews in staging before each release, plus contextual onboarding and cart-abandonment recovery added after the first round of usage.
AI in my process today
Halltels was designed in 2020 and 2021, before today's AI tools. To present it, I rebuilt the agency-to-hotel journey as the interactive walkthrough at the top of this page using Claude Code, working directly from the original screens. It's how I now prototype flows: in code, with real interactions, in hours instead of days.
Impact
100+ hotels and travel agencies started using the platform at MVP.
Two products, one system. The design system let the team ship both portals in parallel and kept the experience consistent as new features were added.
Search to confirmed booking in one flow, including multi-hotel trips that previously needed several suppliers.
Time to booking: [add]. Bookings per agency per month: [add].
Discovery & problem
Context
Halltels is a B2B hotel marketplace that lets hotels sell inventory directly to travel agencies, without intermediaries. At XCALE I owned end-to-end design for both portals and the design system behind them, from discovery to handoff, working with PMs, business analysts and engineering.
Discovery
I ran sessions with travel agents and hotel revenue staff and mapped how a booking actually happened: agents juggling several supplier sites, spreadsheets and phone calls while their client waited, and hotels receiving bookings by email with no clear view of what had been paid.
Pain points
Agencies: no single place to compare price, board type and cancellation terms, no cart for multi-hotel trips, and quotes rebuilt by hand for every client.
Hotels: rate and payment-term changes needed support, bookings arrived outside any system, and payment status was unclear.
Both: two very different users had to transact inside one product without either side's workflow getting in the way of the other.
Key insight
Each side measures success differently. Hotels think in revenue and control. Agencies think in speed to booking. One shared visual language had to serve both without forcing either into the other's workflow.
Ideation
Design system first. Instead of designing two products and reconciling them later, I built atoms, molecules, organisms and templates up front, so both portals could grow from the same components.
Results as decision cards. I tested dense tables against cards and landed on cards that put price, board and cancellation terms in the first glance.
List and map in sync. Agents often answer location questions ("is it near the beach?"), so the map became a first-class view, not a separate page.
One cart for the whole trip. Several hotels, rooms, guests and payment terms in a single checkout.
Design, build & impact
Design and development
Agency portal, built around speed
Agents start where their client's request starts: a destination, dates and a room setup. Results show what matters for a decision without opening each hotel, and the list and map stay in sync.
The integrated cart puts rooms, guest details, price breakdown, payment terms and payment method on a single page. Agents can add more hotels to the same booking, download a quote for their client and top up their wallet at confirmation.
Hotel portal, built around revenue tasks
Hotels manage inventory and supplements, rate and payment plans and simulated availability. Every booking from an agency appears instantly with its locator and payment status, with no email or fax in between.
Implementation and handoff
Components that matched the code. The Figma library mirrored the front-end component structure, with states, spacing and tokens documented, so engineers could build both portals in parallel.
Business rules made visible. With the analysts I turned payment terms, cancellation policies and booking statuses into clear UI rules and annotated every edge case in the flows.
Close loop with engineering. Design reviews in staging before each release, plus contextual onboarding and cart-abandonment recovery added after the first round of usage.
AI in my process today
Halltels was designed in 2020 and 2021, before today's AI tools. To present it, I rebuilt the agency-to-hotel journey as the interactive walkthrough at the top of this page using Claude Code, working directly from the original screens. It's how I now prototype flows: in code, with real interactions, in hours instead of days.
Impact
100+ hotels and travel agencies started using the platform at MVP.
Two products, one system. The design system let the team ship both portals in parallel and kept the experience consistent as new features were added.
Search to confirmed booking in one flow, including multi-hotel trips that previously needed several suppliers.
Time to booking: [add]. Bookings per agency per month: [add].
