Loading ...

Responses by Chris Wilcock, cofounder and creative director, Outpost.

Background: Discovery Land Company specializes in building luxury residential private club communities and resorts throughout the world. We were commissioned to create an immersive, emotive and highly engaging user experience that showcases its international portfolio. Along with communicating the group’s work and capabilities, the site had to act as a portal to all 23 properties while ensuring a seamless brand experience.

Design core: In order to resonate with the target audience, we wanted to feature memorable moments in an exciting user experience while conveying the many different communities Discovery has to offer. To do this, we came up with the theme of “Discover your world,” which ran through the entire creative process. These “worlds” would be the places where you and those most important to you are truly at home, at peace and one with your natural surroundings.

We categorized these worlds based on their locations: coastal, desert, mountain and country. We then created individual video reels that capture the essence of each of these worlds on the homepage, letting users explore with a compass “fancy” cursor.

Favorite details: The project as a whole was incredible to work on. We had a tight timeline, and there were inherent challenges present in a project like this. Luckily, the client really invested in our vision for the site and understood what’s worth doing is worth doing right. So this not only keeps the final output very true to the original concept but also reflects we were given enough time to craft the overall experience.

If I had to pick some particular elements, they would be the interactive map on the homepage and the “Our Worlds” page. The map, in particular, went through many design revisions. We explored a more generic “flat” map but ran into usability challenges, and it didn’t provide the right visual impact through to a 3-D map rendered in WebGL. While the 3-D map looked incredible, we ran into performance problems with all the video assets already on the site. In the end, we came up with a very nice middle-ground solution, creating the illusion of 3-D while not hurting performance and usability.

The “Our Worlds” page is just a cool feature that we loved in the concept stage—as did the client—so we had a lot of fun with this aspect of the site. Not only could we create another navigation feature for the user to explore the worlds by utilizing WebGL, we created a seamless immersive experience to transport them to the resort pages.

Challenges: Incorporating a large amount of assets and still ensuring a smooth, seamless experience. Even from the initial concept stage, we knew we wanted to use video to capture the essence and emotion of what Discovery offers its clients. To do this, we had to employ various hosting, loading and optimization techniques to ensure a seamless experience across all platforms.

Navigation structure: Along with integrating video throughout the site, we wanted to create a sense of exploration and discovery with interactions that would essentially transport the user to these amazing sanctuaries across the world. We also didn’t want to be too prescriptive and overcomplicate the design; we wanted the user to explore the site and find things themselves. With this in mind, we created the fancy cursor to be like a compass that could be used throughout the site. An interactive slider in WebGL that users can select seamlessly transitions into the scene, giving the impression that users are being pulled into the screen and transported to that location.

Technology: An important objective for the site was the ability for the client to build out their own pages within the set architecture. All secondary pages were designed with specific modules that can be interchanged within the CMS to build unique pages. Even though the modules were built into the majority of the site, this flexibility benefited the community sites the most due to different marketing requirements.

As more than 66 percent of traffic came from mobile devices, it was a key objective—and a big challenge—to ensure we carried the same immersive experience across all platforms without losing much in the way of performance.

We used Craft CMS for the back end, SCSS and vanilla JavaScript for the front end, and Highway.js as a routing and transition manager. Most animations on the site are powered by GSAP.


Browse Projects

Click on an image to view more from each project

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

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