Home/Work/Hotel Sync
Flagship enterprise caseEnterprise SaaSEnd-to-endDesign system3 surfaces

Hotel Sync

ex OTA Sync: PMS & Booking Engine · Aug 2022 – Jan 2024

Context & Problem

OTA Sync (now Hotel Sync) is a property management system for hotels and short-term rentals. By v1.0, the Settings module was structurally broken in three ways: navigation was a flat unsorted list of 13+ items, General Settings was a single endless form with everything expanded simultaneously, and Rooms/Extras were merged on one screen despite being completely unrelated. New hotel managers were overwhelmed during onboarding, driving up support volume and slowing activation.

Before: Settings Navigation 1.0

Entering Settings dropped the user directly into a flat list sidebar: no grouping, no visual hierarchy, no entry screen. Every item was equal weight. Users had no mental model of what each setting domain contained or where to start.

Settings 1.0: flat sidebar list, 15 items, no grouping, no entry screen
Settings 1.0: flat sidebar list, 15 items, no grouping, no entry screen

Before: General Settings 1.0

General Settings was a single page with every section expanded at once: Property info, Currency settings, Invoice settings (with rich text editor), Reservation settings, Housekeeping, and Credit card settings all stacked in one continuous scroll. No section separation, no progressive disclosure, multiple Save buttons scattered throughout.

General Settings 1.0: all sections open simultaneously, endless scroll, scattered save actions
General Settings 1.0: all sections open simultaneously, endless scroll, scattered save actions
General Settings 1.0: same pattern on a different property, confirming systemic issue
General Settings 1.0: same pattern on a different property, confirming systemic issue

Before: Rooms & Extras mixed, Add Room 1.0

Rooms and Extras (meal boards, add-on services) were shown on the same page split into panels: conceptually unrelated things combined for no clear reason. Adding a room opened a long modal form with no tabs: all fields from name and type down to housekeeping info, bed configuration, amenities, and notes in one vertical scroll.

Rooms/Extras 1.0: unrelated concepts on the same screen, no separation
Rooms/Extras 1.0: unrelated concepts on the same screen, no separation
Add Room 1.0: single long modal, all fields in one scroll, no tab grouping
Add Room 1.0: single long modal, all fields in one scroll, no tab grouping

After: Settings Navigation 2.0

Settings now opens to a structured card grid: 12 domains, each with an icon and clear label, grouped visually by row. Users immediately understand the full scope and can navigate directly to what they need.

Settings 2.0: card grid entry screen, 12 domains, icon + label, scannable at a glance
Settings 2.0: card grid entry screen, 12 domains, icon + label, scannable at a glance

After: General Settings 2.0

General Settings is now tab-navigated: Property, Account, Currency, Invoice, Reservation, Housekeeping, Credit card, each a separate screen. One domain at a time, one save action per tab. No scroll across unrelated sections.

General Settings 2.0: tab navigation per domain, clean form, single save per tab
General Settings 2.0: tab navigation per domain, clean form, single save per tab

After: Rooms separated, Add Room 2.0

Rooms and Extras are now fully separate modules. Rooms settings has its own tab structure (Rooms / Virtual rooms / Floor Management). Adding a room uses a tabbed modal (General, Advanced settings, Amenities), dramatically shorter per tab, with accommodation type selector and houseroom configuration clearly organized.

Rooms settings 2.0: separated from Extras, tab layout, clean table with New room CTA
Rooms settings 2.0: separated from Extras, tab layout, clean table with New room CTA
Add Room 2.0: tabbed modal (General/Advanced/Amenities), shorter form, type selector
Add Room 2.0: tabbed modal (General/Advanced/Amenities), shorter form, type selector

The pattern applied across the system

Settings was the proof case, not the whole job. The same three moves (a card-grid entry point, tab-per-domain inside each module, one save action per tab) were rolled out across every configuration surface in the product. Once the pattern held, engineering could build new settings modules without a design ticket, which is the point of a pattern library rather than a set of screens.

My Role

End-to-end product designer across web, mobile, and client-facing applications. Aug 2022 – Jan 2024. Responsible for discovery, systems architecture, UI redesign, pattern library definition, and ongoing implementation feedback during the v2.0 rollout. Primary design voice throughout the 1.0 to 2.0 evolution.

Approach

  • Audited all 40+ forms and configuration screens: mapped every user task to required steps
  • Identified 12 core interaction patterns used inconsistently across the product
  • Replaced flat settings sidebar with a structured card grid entry screen grouped by domain
  • Redesigned General Settings from a single endless form into tab-per-domain navigation
  • Separated Rooms and Extras into independent modules with clear scope boundaries
  • Redesigned Add Room from a long scroll modal into a tabbed modal (General/Advanced/Amenities)
  • Simplified new reservation creation workflow from 9 steps to 4
  • Built a modular component system and pattern library used directly by engineering
  • Embedded in the implementation cycle: async feedback on shipped code, not just handoff
Reservations list 2.0: channel icons, status badges, clean density
Reservations list 2.0: channel icons, status badges, clean density

Booking Engine: Guest-facing Product

In addition to the PMS back-office, I also owned the design of the guest-facing Booking Engine: a white-label reservation widget deployed on hotel websites. This required designing for two distinct audiences: hotel managers configuring the product, and guests completing bookings on the frontend.

Grid view: room selection with date picker and selected state
Grid view: room selection with date picker and selected state
List layout: alternative view with date picker open
List layout: alternative view with date picker open
Single unit detail: photo gallery, pricing carousel, amenities
Single unit detail: photo gallery, pricing carousel, amenities
Responsive design: full mobile-first booking flow across 3 states
Responsive design: full mobile-first booking flow across 3 states

Mobile App: Hotel Manager iOS App

The product also included a native mobile app for hotel managers, designed in both light and dark mode. The app covered the full management workflow: daily dashboard with occupancy and revenue KPIs, reservations list with filter tabs, reservation detail view with guest management, statistics with revenue charts and country breakdowns, and a settings panel with property switching.

Login screen: light/dark mode, email + Apple + Google auth
Login screen: light/dark mode, email + Apple + Google auth
Home dashboard: occupancy rate, revenue, arrivals/in-house/departures per day
Home dashboard: occupancy rate, revenue, arrivals/in-house/departures per day
Reservations list: filter tabs (All/Check-In/Check-Out), light + dark
Reservations list: filter tabs (All/Check-In/Check-Out), light + dark
Reservation detail: guest profiles, room assignment, status, arrival/departure
Reservation detail: guest profiles, room assignment, status, arrival/departure
Statistics: revenue chart, country breakdown, per-unit breakdown
Statistics: revenue chart, country breakdown, per-unit breakdown
Settings menu: property switcher, dark mode toggle, language selector
Settings menu: property switcher, dark mode toggle, language selector

Outcomes

25–60%Fewer clicks per task
−15%Support tickets
+20%Onboarding completion