UX Annotation Document · Horizon Splash Portfolio

Fullerton Hotel
Booking Experience

Design Rationale & UX Methodology

Project
Fullerton Hotel Booking App
Deliverables
3 UX Artifacts
Document Type
UX Annotation / Design Rationale
Year
2025
Interactive · Skip to Prototype Try the live booking experience →
01 · User Journey Map
02 · Lo-Fi Wireframes
03 · Interactive Prototype
01
Deliverable · User Journey Map

End to End User Journey

High-fidelity journey map showing screens, system interactions, and an emotional arc from frustration to delight across the full booking flow.

User Journey Map

Loads from horizonsplash.com

Deliverable 01 · User Journey Map
End to End
User Journey

Full booking arc from first consideration to post-confirmation — screens, system interactions, and emotional sentiment mapped across every touchpoint.

↗ Open Full Size
View Deliverable
fullertonjourneymap.png
Design Intent

Full Arc Visibility

Maps the complete experience from first consideration to post-confirmation — making friction points visible before they become problems.

Methodology

Three-Layer Structure

Screen flow, system activity, and emotional arc run in parallel — showing how backend latency and form errors translate directly into user sentiment drops.

Key Finding

Payment Is the Friction Peak

The emotional arc dips sharpest at payment entry. Trust signals and progressive form disclosure were identified as the highest-priority fixes.

02
Deliverable · Low Fidelity Wireframes

7-Step Booking Flow
Lo-Fi Wireframes

Structure-first wireframe set mapping every screen from Home Hub to Booking Confirmed — layout and hierarchy locked before any visual design began.

Lo-Fi Wireframes

Loads from horizonsplash.com

Deliverable 02 · Lo-Fi Wireframes
7-Step Booking
Wireframe Flow

Every screen from Home Hub to Booking Confirmed — structure and layout resolved at lo-fi stage so the hi-fi pass could focus entirely on visual execution.

↗ Open Full Size
View Deliverable
Lofiwireframe.png
Design Intent

Structure Before Style

Lo-fi was built to resolve layout and flow decisions independently of visual design — keeping stakeholder feedback focused on what matters at this stage.

Methodology

Progressive Disclosure

Each screen surfaces only what the user needs at that step. Room pricing is withheld until selection. Payment breakdown only appears at checkout.

Key Decision

One CTA Per Screen

Every screen has a single primary forward action. No screen competes with itself — reducing decision fatigue across all 7 steps of the flow.

03
Deliverable · Interactive Prototype

Fullerton Booking App
Interactive Prototype

Live prototype of the full booking flow. Navigate the experience directly in the device frame below.

Deliverable 03 · Interactive Prototype
Fullerton Booking App
Live Prototype

Navigate the full 7-step booking flow directly in the phone frame. Tap through each screen to experience the interaction patterns and transitions as designed.

↗ Open Full Screen
Open Prototype
horizonsplash.com · fullertonapp.html
What to Look For

Flow Continuity

Each screen transitions into the next without dead ends. The prototype validates that the 7-step journey map translates cleanly into a working interface.

What to Look For

Interaction Patterns

Note the progressive disclosure at each step — filters, room details, and payment fields appear only when the user is ready for them.

What to Look For

Confirmation Moment

The final screen is designed to close on a high — reflecting the delight peak identified in the journey map at the booking confirmed stage.