Next level immersiveness to create digital stand out within urban design

At the intersection of urban design and digital innovation, Studio D has carved a niche in shaping impactful environments that aim for a better world. Their expertise in infrastructure, urban planning and landscape architecture has made them a key player in the Netherlands. Studio D turned to Exo Ape - a Dutch digital design studio based in the South of the Netherlands - to help them bring their vision to life digitally, and create a new digital environment. 

Exo Ape’s challenge

How to craft an exceptional digital journey that reflects Studio D’s core values, and builds long-term trust and confidence?

Every interaction with the new website needs to inspire Studio D’s team and (future) clients. Evoking a sense of pride - simultaneously showcasing the studio’s passion for design, technology and nature.

The result: a stand-out digital experience that is sensory-rich and immersive

Exo Ape created a digital platform that not only grabs your attention, but also amplifies Studio D's brand values. The result is a truly unique online journey that builds on trust, demonstrates expertise and definitely differentiates Studio D from the competition. 

Visitors can immerse themselves in a sensory-rich 360-degree experience, as well as interactive storytelling. Creating a distinctive and memorable journey that reinforces Studio D’s position as a leader in urban design and landscape architecture.

Scrolling through the pages is very satisfying. The showreel is well crafted. The 3D-render style fits the landscape. Makes you imagine anything is possible. Some pages feel like a magazine spread. Well done!
Jennifer Weber - Dutch Digital Design curator & brand designer, Monks

Behind the scenes: process & strategy - a meaningful collaboration

Exo Ape kick-started the process by sharing a pre-discovery questionnaire to gain insights into Studio D’s needs, challenges, objectives and expectations. Followed by a workshop where ideas were exchanged, priorities were set and a strategic roadmap was crafted - together. A great way to get to know your clients.

One of the objectives was to make the digital experience not only visually compelling, but also memorable. The lack of a distinct visual identity - except for a wordmark - presented an opportunity to take Studio D’s digital presence to the next level. 

While exploring the competitive landscape, Exo Ape also discovered a lack of interactivity on competitor websites. This was an opportunity for Studio D to stand out. By presenting Studio D’s work in an immersive way and incorporating custom interactive features like 360 viewers and sequence scrollers, Exo Ape created a great way to engage with the audience. Making the presentation of the work the differentiating factor in the experience.

Creating an interactive 360° experience

One of the standout features of the new website is the 360° experience. This allows visitors to delve into Studio D’s projects in a way that static images cannot offer. By enabling users to explore the space at their own pace, this feature enhances engagement, evokes stronger emotional responses, and creates a deeper connection to the environment. It also showcases Studio D’s technical proficiency and design capabilities - reinforcing their expertise in the field.

Behind the scenes: Exo Ape developed a content management system that empowers Studio D’s team to create custom sliders with images, audio and video elements. These are all dynamically loaded into a WebGL 360 viewer for seamless interaction.

Enhancing engagement through hotspots

Exo Ape integrated interactive hotspots. These touchpoints provide a mechanism for showcasing details or key features of Studio D’s work. Hotspots visitors can easily access additional information or zoom in on specific areas of interest. Adding to the premium touch of the overall experience.

3D visualisation & dynamic storytelling

Studio D’s portfolio includes complex urban and landscape designs. Showcasing various scenes, including day-and-night transitions and various environmental conditions through 3D visualisation, is crucial. To bring this to life, Exo Ape created an anchor-scroll module that smoothly guides users through different stages of each project.

The ‘services’ page received special attention with a custom-built sequence scroller. This feature delivers a smooth, pre-rendered 3D animation that adjusts dynamically based on the visitor's connection speed. Built with GSAP’s ScrollTrigger and custom SVG animations, the page provides an engaging, playful way for users to explore Studio D’s services.

Technology behind the immersiveness

Given Studio D’s preference for WordPress as a content management system, Exo Ape crafted a bespoke backend and frontend pipeline. This tailored WordPress theme allows for easy management of diverse content - from case studies to job listings - in multiple languages. The flexible content editor enables Studio D to build dynamic and interactive pages with ease.

Each time the site is updated, a static build is deployed on Vercel - Exo Ape’s preferred cloud solution for hosting web applications. This build consists of a Vue/Nuxt frontend application, and ensures smooth page transitions and optimal performance.

Finally, a significant amount of time was dedicated to creating motion studies in After Effects to predefine all interactions and transitions prior to our development team implementing them - ensuring the end product was as polished as it was functional.

Exo Ape’s work on our new website exceeded all expectations. Their creative design, seamless functionality, and attention to detail have transformed our digital presence. The team’s professionalism and commitment to excellence made them the perfect partner for this project. 
Daan van den Heuvel, Founder, Studio D

Awards & recognition

• Awwwards: Site of the Day

• Awwwards: Developer Award

• The FWA: Site of the Day