Surf's Up - Award Winning New Site for Kalon Surf Delivers Killer UX
Building on a massively successful multi-year PPC campaign Kalon Surf, a luxury resort in Costa Rica, looked to Portent to build a website that would showcase its natural beauty, unrivaled guest experience, and pristine aesthetic.
Design & DevelopmentContentSEOPPC
Search MarketingBrand Website
A Major refresh of the Kalon site could simplify user experience while showcasing brand essence and guest experience to increase conversion
Kalon, a luxury surf resort in Costa Rica, came to Portent after a successful multi-year PPC campaign with a need to update their website. The previous iteration had significant room to improve in both design and functionality, and the user experience was detracting from brand image as well as conversions. They needed a digital presence that effectively told their story, provided a compelling user experience, translated their brand identify, and allowed their team to easily update content.
Portent worked with Kalon to produce an updated brand identity built from the bottom up, incorporating video and photography into their new design. We added layers of cutting edge technology as we built the site that would enable their team to manage content easily while also providing a blazing-fast experience for their customers.
Gold W3 Award - Best Web Design in Hotel & Lodging
For Kalon, experience is everything. Their customer’s journey starts when she is picked up from the airport and ends when she’s dropped back off seven days later. While she’s there, she lives the Kalon lifestyle. This means serene water, lush jungle, gorgeous beaches, exquisite food, and pampering accommodations. It was imperative that the website experience mirrored this journey. We went through a thorough conceptual design process to ensure that their new site would be everything Kalon.
Portent’s visual design work for Kalon included:
New Brand Guidelines
Portent created a new palette that helped mature the Kalon brand without losing their youthful energy: beiges, whites, and blacks were added to their previous pinks, blues and greens for a color scheme that’s both classic and intrepid.
From placing video and imagery at the center of design to better tell the immersive story of the Kalon experience, to commissioning new drone and other video footage, rich media was at the center of this design project.
Double Stranded Modular Scale
The Kalon site now features a double stranded modular scale (the golden ratio and minor third) for sizing and spacing to create visual hierarchy for text and element size. These natural scales create the visual harmony that is so important to the world of surfing and Kalon.
Silver W3 Award - Best Practices in Website Features
Kalon prides itself on providing a flawless experience for customers that’s only achievable through optimizing all the parts of their hospitality. Naturally we wanted to provide the best functioning website through the same attention to detail by using the most state-of-the-art technology.
Progressive Web App
Portent built the Kalon site with progressive web app functionality including browser based notifications.
HTTP2 / HTTPS
Although HTTP2 and a secure site aren’t primary SEO factors, they help tremendously with site speed which is a secondary SEO factor. It’s also proven to have a major impact on user experience. The overall speed of the new Kalon site is blazing fast.
Lazy Loading & Code Based Effects
To provide the user with a near-instant download, all visual content utilizes lazy loading which allows the image to initially load a slightly pixelated form and quickly become crisp. We provided a fully fledged responsive image solution where the system delivers the right-sized image to each requesting browser and device.
To provide the optimal SEO-friendly content and to prevent responsive issues, all effects and copy over images are code based.
Component Driven Back-End
Portent built Kalon’s CMS using a component driven content solution which allows their marketing team to easily drop in new components rather than work through HTML. It is extremely easy to add, update, and delete elements of the site without having to deal with code.