Oasis Golf & Aqua Resort

A members-only resort in Lahore with a 9-hole USGA course and an aqua park, sitting behind a website of uniform sliders. I rebuilt it as a cinematic, editorial experience, designed and shipped solo, vanilla, start to finish.

2026

Web Design, Frontend

overview

A resort that deserved better than a template

The Oasis is a members-only destination in Lahore — 1,350 kanals, a 9-hole USGA golf course, an aqua park and 15+ leisure activities. It sent a select group of previous interns a challenge to reimagine its digital presence. This is what I submitted.

The goal was dual: elevate brand perception to attract affluent families and corporate clients, and drive membership enquiries. Both equally.

the problem

It had the information,
not the experience

Uniform sliders, repeated image grids, no hierarchy. The original site communicated what the resort offered without communicating why it was worth belonging to and there's a big difference between the two. The redesign was about closing that gap: making the site feel as considered as the resort itself.

Uniform sliders, repeated image grids, no hierarchy. The original site communicated what the resort offered without communicating why it was worth belonging to and there’s a big difference between the two. The redesign was about closing that gap: making the site feel as considered as the resort itself.

originial

redesign

research

Benchmarking the
luxury standard

Before opening Figma I studied how world-class resort and hospitality brands communicate exclusivity through design — and what makes a site feel expensive before you read a word.

Aman Resorts

Ultra-minimal, full-bleed photography, almost no UI. The product sells itself—no noise, no clutter. I borrowed the confidence of letting imagery carry the entire experience.

Civana Carefree

Warm palette, aspirational tone. The language of belonging, not selling. I borrowed the feeling that the site itself is part of the experience.

Sensei Lānaʻi

Stripped-back UI, underline inputs, no visual noise. When the product is strong enough, the design steps aside. I borrowed its restrained form aesthetic.

visual identity

Palette & Type

Navy and teal anchor the brand in trust and water — right for a golf and aqua resort. Cormorant Garamond for emotive headlines, DM Sans for all UI copy. The contrast between a classical serif and a clean modern sans creates the editorial tension that makes the site feel considered.

Navy
#014C83

Navy Dark
#013060

Teal
#009BBC

Off White
#F4F6F8

Ink
#1A1A18

“The hardest part was making the case for restraint and then building it.”

ON THE DESIGN PROCESS

final design

Homepage

The site opens with a full-bleed video hero replacing the original slider, with a cinematic gradient backdrop, Cormorant Garamond headline, and a persistent teal membership CTA. Scroll animations carry through experience cards, a membership band, an events carousel, and a minimalist contact form.

Experience cards use an asymmetric layout — Aqua gets the dominant tall left column, Golf and Leisure stack right — rather than a uniform grid. Visual hierarchy that mirrors the resort's offering without flattening everything to equal weight.

Experience cards use an asymmetric layout — Aqua gets the dominant tall left column, Golf and Leisure stack right — rather than a uniform grid. Visual hierarchy that mirrors the resort’s offering without flattening everything to equal weight.

Homepage hero

Experience cards Membership band · Contact form

sub-pages

Three experiences,
three dedicated pages

Each experience — Aqua, Golf, and Leisure — has its own dedicated page following the same editorial format: an asymmetric image gallery with varying row proportions, a custom lightbox with keyboard navigation (← →), and experience-specific content. The format gives each pillar equal visual weight while maintaining a cohesive design language across the entire site.

Aqua page shown · Golf and Leisure pages follow the same editorial format

responsive design

Mobile

Three breakpoints: desktop, tablet, and mobile. Hamburger menu opens a full-width drawer. Experience cards stack vertically. All type and spacing individually tuned — no auto-scaling shortcuts.

Hero Nav drawer Experience cards

outcomes

What was built

PAGES DESIGNED & DEPLOYED

RESPONSIVE BREAKPOINTS

FRAMEWORKS — VANILLA JS ONLY

Working from concept to deployment solo meant every decision — visual, architectural, technical — was mine to make and defend. The biggest lesson: restraint is a design skill. Every instinct pushes toward more content, more features, more noise. The editorial references gave me the language to push back, and the confidence to let type and space do the work.

LIVE SITES

See it in the browser

MY REDESIGN ↗

CURRENT SITE ↗