Case study 04 · Client work at Setup Phils, Inc.
Exhibitor Portal · Hotel BookingRedesigning the hotel booking experience
- Role
- Frontend architecture, UI/UX & implementation
- Client
- BMI GlobalEd (part of Times Higher Education)
- Timeline
- Part of the exhibitor portal rebuild
- Stack
- Next.js, React, TypeScript, Adyen
The 30-second version
- What it is
- The hotel booking module inside an exhibitor management platform for international student fairs.
- The problem
- Users discovered availability problems late and had to leave the platform to complete payment.
- My role
- Owned frontend architecture, UI/UX decisions, and implementation for the hotel booking module, including Adyen payment integration.
- Key challenge
- Make availability and cost clear before commitment, then support booking and payment in one place.
Outcome
A list-based hotel module became a guided journey from hotel discovery through in-platform payment or confirmation.
Project notes
Overview
I redesigned the hotel module inside the exhibitor management platform, turning a plain hotel list into a guided booking journey.
I owned the frontend architecture, UI/UX decisions, and implementation. Familiar hotel-booking patterns helped make a specialist event-platform workflow easier to understand from the first step.
A major portal module
Hotel booking was a substantial feature within the exhibitor portal, not a standalone hotel directory.
- Users needed to find event hotels, check room availability, enter guest details, manage stays, and complete checkout.
- The module connected hotel inventory and booking workflows with the portal's shared cart and payment experience.
The problem
Two major sources of friction made booking feel uncertain and disconnected.
- Availability was only confirmed at checkout, after users had already chosen a hotel and dates.
- Payment happened outside the platform, splitting the booking across separate processes.
- Users had to make decisions without timely availability or a clear view of the total cost.
Decide first
- Browse hotel list
- Choose a hotel
- Select dates
- Proceed to checkout
Find out late
- Booking available?
- If not: change hotel or dates and start again
Leave to pay
- Booking submitted
- Payment handled outside the platform
My role
I owned the frontend experience for this module, including the booking flow and payment implementation.
- Designed and implemented hotel browsing, city filtering, room selection, availability, guest details, cart, and review flows.
- Implemented the frontend Adyen payment integration so users could pay within the platform.
- Handled no-charge bookings as a direct confirmation path that skips payment.
- Set the information hierarchy and interaction patterns across the end-to-end journey.
A guided booking journey
The flow brings key information forward: users choose an event hotel and room, check dates against availability, enter guest names, and see the nights and total before adding the stay to their cart.
- Users can add multiple stays, review or remove cart items, then continue to checkout.
- At checkout, users pay through Adyen when payment is due, or proceed directly to confirmation for a no-charge booking.
1 · Find a hotel
- All event hotels
- Filter by city
- Choose a hotel
- Select room type
2 · Know before you commit
- See room availability
- Pick available dates
- Enter guest names
- Nights + total shown
3 · Finish in one place
- Add to cart
- Book another stay or review cart
- Checkout
- Pay with Adyen or confirm if free
Key UX decisions
- Show availability for the selected room type before users commit to dates.
- Make unavailable dates visible during date selection, rather than revealing problems at checkout.
- Show check-in, check-out, nights, and total price before the stay is added to the cart.
- Use a multi-stay cart so users can review and manage bookings together.
- Keep paid and no-charge bookings in one flow, with payment skipped when there is no amount due.
- Finding hotelsA plain hotel listAll event hotels, with a city filter
- Sold-out hotelsNot clear up frontClearly marked on the list
- AvailabilityDiscovered at checkoutShown before dates are selected
- Unavailable datesDiscovered lateShown before adding to cart
- PriceShown late in the processNights and total shown before the cart
- Multiple bookingsOne booking at a timeA cart for several stays
- PaymentOutside the platformAdyen checkout inside the platform
Challenges & trade-offs
- Bring availability checks early enough to prevent avoidable checkout surprises.
- Keep multiple stays understandable while preserving a clear summary of dates and costs.
- Support paid and no-charge bookings without creating two unrelated journeys.
Result
The hotel module moved from a list-based process with late availability feedback and off-platform payment to one guided journey: find a hotel, confirm dates and price, manage stays in a cart, and pay or confirm in the portal.
- Availability is surfaced before checkout.
- Pricing is visible before adding a stay to the cart.
- Multiple stays can be reviewed together.
- Adyen payment is integrated into the platform journey.