Zero Online Presence
The hotel had no website, no booking platform, and no way for potential guests to find, research, or contact the property online. Every competitor was discoverable; WinchesterLK was not.
UI/UX Case Study — Hospitality
WinchesterLK
Luxury Hotel · Nuwara Eliya, Sri Lanka
Building the first-ever digital presence for a luxury hilltop retreat — from zero to a fully responsive website with room booking, brand identity, and guest experience design.
The Project
Project Overview
WinchesterLK is a luxury boutique hotel nestled in the picturesque hillside landscapes of Nuwara Eliya, Sri Lanka. Offering a Honeymoon Suite, Superior Queen, and Deluxe Double rooms, the property positions itself as a premium escape focused on serenity, natural beauty, and personalized guest experiences.
When the client approached Asanka Palle, the hotel had no digital presence whatsoever — no website, no online booking capability, and no way for potential guests to discover or engage with the brand. The project scope covered everything: brand identity, logo design, UI/UX, and full development.
Type
Hotel & Hospitality
Location
Nuwara Eliya, Sri Lanka
Duration
1 Month
Role
UI/UX Engineer (Design + Dev)
Tools
Figma · VS Code · WordPress
Deliverables
Logo · Wireframes · Prototype · Style Guide · Live Website
Desktop — winchesterlk.com homepage
Mobile — responsive layout
The Challenge
Starting From Zero
WinchesterLK had no digital footprint at all. In the modern hospitality landscape — where over 80% of hotel bookings begin online — this was a critical gap. The hotel was invisible to potential guests, unable to compete with other Nuwara Eliya properties, and entirely reliant on word-of-mouth referrals.
No Room Showcase
With three distinct room types each offering premium amenities, there was no platform to visually present rooms, pricing, or availability to drive direct bookings.
No Brand Identity
The property had no logo, no visual identity, and no established brand language. Guests had nothing to emotionally connect with before or after their stay.
| Dimension | Before | After |
|---|---|---|
| Online discoverability | None | Fully indexed website |
| Room booking | Phone / word-of-mouth only | Online booking form |
| Brand identity | No logo or visual system | Full logo + style guide |
| Guest information | Not available digitally | Comprehensive rooms & amenities page |
| Mobile experience | N/A | Fully responsive across all devices |
Who We Designed For
Target Audience
The WinchesterLK website needed to serve three distinct user types with very different needs, all arriving with high expectations of a luxury experience.
🌙
Priya & Rohan
Couple / Honeymoon Travelers
- See the Honeymoon Suite in detail
- Understand pricing & book directly
- Feel emotionally connected before arrival
Generic listing sites don't capture the luxury feel
🏔
James
Solo Leisure Traveler
- Research the hillside location
- View room options & amenities
- Book quickly on mobile
No way to verify legitimacy without a website
🤝
Sarah
Corporate & B2B Coordinator
- Find room rates for group booking
- Contact management directly
- Verify property credibility
Properties without websites are skipped in vendor shortlisting
How We Got There
Design Thinking Process
1
Empathize
Deep-dive sessions with hotel owners. Understood the guest experience vision and competitive landscape of Nuwara Eliya hospitality.
Stakeholder Interviews
2
Define
Three core design goals: establish trust, showcase luxury visually, make booking frictionless on mobile.
Design Brief · Personas
3
Ideate
Explored multiple homepage concepts. Sketched wireframes for room pages, booking flow, and mobile nav. Developed 3 logo concepts.
Wireframes · Logo Concepts
4
Prototype
Built high-fidelity interactive prototype in Figma. Established full design system: color, typography, components, spacing.
Hi-Fi Prototype · Style Guide
5
Build & Launch
Developed in WordPress with custom CSS. Implemented responsive layouts, booking form, and SEO foundations.
Live Website
Market Research
Competitive Analysis
Three comparable luxury boutique hotel websites in the Sri Lanka hill-country market were analyzed to identify UX patterns, gaps, and opportunities.
| UX Feature | WinchesterLK | Heritance Tea Factory | Amaya Hills | Ceylon Tea Trails |
|---|---|---|---|---|
| Immersive hero with image | ✅ | ✅ | ✅ | ✅ |
| Individual room detail pages | ✅ | ✅ | ❌ | ✅ |
| Online booking / inquiry form | ✅ | ✅ | ✅ | ✅ |
| Mobile-first responsive design | ✅ | ⚠️ Partial | ✅ | ⚠️ Partial |
| Guest verification / trust signals | ✅ | ❌ | ❌ | ✅ |
| Amenities & services detail page | ✅ | ✅ | ✅ | ✅ |
"Competitors with partial mobile support created friction for the majority of travelers who research and book on phones. WinchesterLK's mobile-first approach was a direct competitive advantage."
Structure & Navigation
Information Architecture
The site architecture was intentionally kept shallow — no more than 2 clicks to reach any destination — to reduce friction for guests in discovery or booking mode.
Winchester LK
Home
Rooms
Amenities
Gallery
Contact
Honeymoon Suite
Superior Queen
Deluxe Double
Navigation Decision
Why single-level navigation? With a boutique hotel of 3 room types, a deep nav hierarchy adds cognitive load without value. Guests care about: "What rooms do you have? What's included? How do I book?" — the IA answers those in one scroll.
Key Design Features
What Was Built
Four core feature areas were identified and designed to address the hotel's specific guest experience goals.
Online Booking System
A seamless room inquiry and booking form accessible from every page via a persistent CTA button. Designed for mobile-first with minimal fields to reduce abandonment.
Design Decision: Reduced the form to 5 fields (Name, Email, Room Type, Check-in, Check-out) — every additional field reduces completion rate by ~10%.
Comprehensive Room Information
Dedicated detail sections for all 3 room types — each featuring room highlights, amenity icons, and a direct booking CTA.
Design Decision: Used full-width room photography with overlaid amenity badges to communicate luxury at a glance before the guest reads a single word.
Responsive Design (Mobile-First)
The entire site was built mobile-first, ensuring a seamless experience across phones, tablets, and desktops — critical given that 70%+ of travel research happens on mobile.
Design Decision: Hamburger nav on mobile collapses to a full-screen overlay menu with large touch targets, eliminating the small-tap frustration common on hotel sites.
Guest Verify / Trust Signals
A dedicated section showcasing social proof — guest testimonials, star ratings, and property credentials — to establish trust for first-time visitors who cannot physically inspect the property.
Design Decision: Placed trust signals immediately after the hero section — trust must be established before a guest will consider booking.
The Accommodations — 3 room types with real photography, room specs, and direct booking CTAs
Booking Architecture
How the Booking System Works
The booking system is powered by Yanolja Cloud Solution — a professional hotel management platform. When a guest submits a booking request on the Winchester website, the request flows through Yanolja's system, which simultaneously notifies the hotel and synchronises availability across all major travel platforms in real time.
Winchester Website
Guest fills booking form
→
Yanolja Cloud
Central booking portal & channel manager
→
Hotel Receives Request
Expedia Updated
Booking.com Updated
Airbnb Updated
Yanolja Cloud Solution — the booking portal powering real-time availability sync across all major travel platforms
Visual Identity
Design System & Branding
Asanka designed the complete brand identity for WinchesterLK from scratch — including the logo, color system, and typography — establishing a visual language that communicates luxury, nature, and tranquility.
Logo Design
The WinchesterLK logo was designed to evoke heritage and luxury while remaining clean and scalable across digital and print. The wordmark uses a refined serif letterform with a custom "W" monogram that works as a standalone brand icon.
The mark is designed to hold weight at favicon size (16px) as well as large-format print — a critical requirement for a hospitality brand that lives across signage, stationery, and digital surfaces.
Color Palette
The palette was built around the hotel's natural environment — warm golds echoing the sunrise over Nuwara Eliya's hillsides, deep neutrals grounding the luxury tone, and a rich burgundy as a heritage accent.
Warm Gold
#c9a96e
Deep Black
#0c0c0c
Surface Dark
#141414
Warm White
#f0ece4
Burgundy
#8b2e2e
60 · 20 · 10 Color Rule
60% Background & surfaces · 20% Text & content · 10% Gold highlights, CTAs & icons
Typography
The Winchester Exclusive Hideaway
Honeymoon Suite — From $180/night
Nestled amidst the picturesque landscapes of Nuwara Eliya's hillside, our retreat offers comfort and tranquility.
UI Components
Primary CTA
Ghost Button
Room Card
Honeymoon Suite
The Bridal Retreat
King bed, hillside view, private balcony & in-room bath.
$180 / night
Amenity Badges
🛜 Free Wi-Fi
🍳 Breakfast in Bed
👕 Laundry Service
Navigation Bar
The Outcome
Results & Impact
0
Complete website launched from zero
0
Room types with full detail pages
0
Core features shipped in 1 month
- ✓ Hotel went from zero online presence to a fully live, indexed website at winchesterlk.com
- ✓ Guests can now discover, research, and book rooms entirely online
- ✓ Complete brand identity created from scratch — logo, color system, typography
- ✓ Mobile-first responsive design ensures seamless experience on any device
- ✓ Guest trust signals address the key objection for first-time bookers
- ✓ Full design system delivered for future consistency across all brand touchpoints
Guest testimonials — trust signals driving direct bookings
Gallery — immersive location photography
This project was a rare full-stack design challenge — zero-to-launch with complete creative ownership. Asanka designed the brand identity, built the UX architecture, created high-fidelity prototypes in Figma, and developed and shipped the final site in WordPress. The result transformed an invisible property into a competitive digital presence in the Sri Lanka luxury hospitality market.
Reflection
What I Learned
01
Full Ownership Demands Full Thinking
When you are the designer, developer, and brand strategist all at once, every decision connects. Choosing a color is also choosing a code variable. This project sharpened systems thinking across the entire design-to-code pipeline.
02
Luxury Is Restraint
The temptation in hospitality is to use every tool — animations, gradients, bold colors. The breakthrough insight was the opposite: luxury communicates through what you leave out. White space and a disciplined palette outperformed visual complexity.
03
First Impressions Are Everything
Hotel guests make booking decisions emotionally within seconds of landing. Every design decision — hero image, headline, CTA placement — had to answer: "Does this make me want to stay here?" before anything else.