Hotel Self Check-In
System

Hotel check-in is still a paper queue

Traditional hotel check-in requires guests to queue at the front desk, fill paper forms, hand over physical IDs, and wait for staff to manually update reservation status. During peak check-in periods, this creates bottlenecks that directly impact guest satisfaction.

The hackathon brief: design and build a self-service check-in system that removes the front desk from the critical path, while maintaining security through digital identity verification.

Wireframe first, then prototype

We documented the full system workflow before designing any screen. The check-in flow has two entry points — Booking ID (no account required) and Email login (for returning guests) — both converging at the same reservation page and proceeding through an identical form and verification flow.

Wireframes → Hi-fi Prototypes

Every screen was wireframed in Figma before moving to high-fidelity. The wireframes established layout and information hierarchy; the hi-fi prototypes validated the visual language.

Wireframe — Home Page

Hi-Fi Prototype — Home Page

Wireframe established the 3-column room grid, search bar, and navigation structure before any visual design decisions were made

Wireframe — Reservation Page

Hi-Fi Prototype — Reservation Page

Wireframe defined the booking card layout (photo + details + status badge + CTA) before visual treatment. The "Booked" badge and "Check In" button positions were locked at wireframe stage.

8 screens, 2 entry points, 1 seamless flow

Entry Point 1 — Booking ID Check-in (no account required)

Guests without an account can enter their Booking ID directly. The modal appears over the homepage without full-page navigation — reducing friction and preserving context. Two options are offered: continue with Booking ID, or continue with Email (which routes to login).

Wireframe

Hi-Fi

Check-in modal: Booking ID field + Continue, with "Or Continue With Email" as a secondary path. Modal overlay keeps the homepage visible behind, reinforcing context (Nielsen: Visibility of System Status)

Entry Point 2 — Email / Account Login

Returning guests log in with email + password or Google SSO. On successful login, the system automatically retrieves all upcoming reservations — no Booking ID needed.

Wireframe

Hi-Fi

Login modal: Email + Password, Forgot Password link, Continue button, and Google SSO — all within a single modal. No page navigation required to authenticate.

Reservations — Choose Your Room

After authentication, the guest sees all upcoming reservations in a clear card layout. Each card shows the Booking ID, property name, dates, guest count, price, and a prominent "Check In" CTA. A status badge ("Booked") confirms the current state. An Upcoming / Past tab allows viewing historical stays.

Reservations page: multiple bookings shown in a scannable card layout. Booking ID is highlighted in blue for quick reference. "Check In" button is right-aligned, consistent across all cards.

ID check-in path: only the matched reservation is surfaced — one decision, one action, no ambiguity

Check-in Form — Guest Information

The check-in form collects the minimum required information: name, gender, email, phone (with country code selector pre-set to Thailand +66), arriving time, number of guests, and credit card information. All fields use labeled inputs with placeholder text — no inline icons that could obscure typed content.

Wireframe

Hi-Fi

Check-in form: name split into First/Last fields, gender radio buttons with "Prefer not to say" option, phone with Thai +66 flag pre-selected, arriving time, guest count, and credit card section — all in a single scrollable page with Cancel / Next at the bottom

Identity Verification — Selfie + Passport

The second step of the form captures identity: a live selfie via device camera, and passport upload for all guests via drag-and-drop or file browser. Separating the form into two steps (personal info → identity) prevents the single-page form from feeling overwhelming.

Wireframe

Hi-Fi

Verification step: face scan icon for live selfie (not static upload — prevents photo spoofing), drag-and-drop passport upload zone for all guests. Back / Save navigation at the bottom.

Confirmation Slip

On successful check-in, a confirmation slip is generated with a barcode, full booking summary, room details (type, price, meal plan, occupancy), and guest information. The barcode serves as the room access credential — no physical key required at arrival.

Wireframe

Hi-Fi

Confirmation slip: barcode at top-right, confirmation number and Booking ID prominently displayed, room details on the left, guest info on the right — mirroring a physical hotel receipt layout guests already understand (Nielsen: Match Between System and Real World)

Designed for ERP API integration from day one

The system architecture uses a Map<String, dynamic> data structure in Dart to simulate CiMSO ERP reservation records during development — allowing the team to build and test all UI flows without a live API dependency. The data structure mirrors the expected API response shape, so switching to real-time ERP data requires only replacing the data source, not rebuilding any UI logic.

What we delivered

What I learned — and what comes next