Loading ...

Responses by Jesper Landberg, lead developer; Hannah Munday, project manager, Outpost; and Chris Wilcock, creative director, Outpost.

Background: Located on the north coast of the Dominican Republic, Playa Grande Gold & Beach Club is part of the Discovery Land Company’s group of luxury residential communities and resorts throughout the world. The site was part of an ongoing digital rollout we were tasked with following the core corporate site we created for the client. The main objective of the Playa Grande project was to create an immersive site that reflected the high-end exclusive nature of the community and the lifestyle that potential customers can experience at any of these communities.

Design core: The site transports the audience to the shores of the Caribbean, providing an immersive, elegant user experience through video, imagery, typography, transitions and animations. Some of the core features of the site includes full-screen zooming images, interactive community maps, a WebGL globe showing how people can get to the Dominican Republic and lots of small microinteractions to delight the audience and enhance the overall experience.

From a design viewpoint, simplicity was key. The site had to be quick and easy to navigate while portraying a sense of luxury. While the site’s core is built on predesigned modules, we still developed an entirely new system for this site—as we do for each site we make for Discovery. From the colors, typefaces, textures and subtle microinteractions on the buttons, everything was carefully considered to capture the essence of Playa Grande.

We were lucky to be supplied with some amazing content not only from the client but also Aman Resorts, who were a partner on this project. We worked with the client on all the messaging and art directed the video footage to ensure consistent storytelling throughout the experience and to convey the community’s unique offerings. The sheer amount of media presented some performance issues, but working with the client over the last two years, we’ve developed new ways of improving site performance, server-side updates and a host of other optimization techniques to improve not only the overall experience but the quality of the videos themselves.

Challenges: A major requirement for these sites is trying to achieve a quick, smooth experience while build in as much media content as possible. As always, we have to pay particular attention to tablet and mobile devices, which we know is our target audience’s preferred device. Also, unlike the other sites, we also had more interactive features such as the WebGL globe that placed more load on the site, so the lazy loading helped mitigate the load time and improved the overall experience, so much so that we’re now rolling it out across all the other sites in the group.

Navigation structure: The main navigation had to be accessible as our target audience wants to access information as quickly as possible without any blockers. This meant building in a “sticky” navigation and call-to-actions to make the experience as easy to navigate without taking away from the premium aesthetic. The in-page navigation does have some unique features to enhance the overall experience, from draggable carousels to interactive community maps.

Technology: From a development perspective, the site is based upon predesigned modules that could be easily updated using the site’s own design language while retaining the structure and maintaining a visual connection to the corporate brand. Along with updating the design system, we also implemented a new technology framework for all future sites. Working with Discovery’s IT team and chosen partners, our new framework allows for a more agile, scalable workflow while improving overall performance.

Craft CMS was chosen as the back-end system and enabled greater flexibility for the client’s team when it came to maintenance. It also gave them greater design autonomy, enabling them to easily interchange modules and effectively build their own pages as the sites and communities evolved. The front end was developed in HTML, CSS and JavaScript, with everything being loaded progressively through lazy loading.

playagrande.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In