The need to standout from boring competition

Have you ever planned a visit to Sri Lanka? Well if you have you might've scrolled through more than enough hotel, guesthouse and villa websites to see all of them have the same boring old website structure. We wanted to standout from those competition. How do we do it?

When tasked with designing a website for a luxurious beachfront villa in southern Sri Lanka, we decided to take a different approach—one that would not only captivate visitors but also ensure a seamless user experience. By blending storytelling elements with traditional hotel website components, we aimed to create a digital space that would both engage and comfort potential guests.

‍

‍

First and Foremost : How should we retain the user on our site with a "Wow" factor?

Our primary challenge was to strike the right balance between a narrative-driven website and the familiar structure of a traditional hotel booking site. The goal was to create a "wow factor" that would immediately capture the visitor's attention and differentiate the villa from the competition, without alienating users accustomed to a conventional booking proces

‍

• The Story: Crafting a Visual Journey
  • To bring the website to life, we needed a compelling story that would resonate with our target audience. We identified the core purpose of the site: to showcase the villa as a haven of luxury, privacy, and breathtaking views. The story we crafted focused on the unique experiences the villa offers, from serene beachfront mornings to unforgettable sunset dinners.
• Navigate through the story
  • We decided to create a scroll animation from start to finish of the story telling process to keep the user engaged. Using a scroll animation gives the user the control of the animation instead of having a standstill animation allowing more engagement with the website.

‍
‍

‍

Should we remove the traditional website components altogether? 🧐

‍

Not at all

‍

I'm referring to the functional components associated with booking. Since users have got themselves used to this approach when booking a room or a place removing it altogether might disorient them when using the website. Which will affect negatively towards the websites entire user experience.

Therefore it was decided to keep a similar design style for CTA of the website and keep it consistent everywhere on the website.

‍

‍

‍

Challenges and Development

The main challenge I faced during the development was the huge amount of animations that needed to implement. With every animation there comes a meticulous planning and keyframe position calculation which I was able to complete succesfully.

‍