Damen Shipyards Sails into 75% Cost Savings with Headless

• Headquarters: Gorinchem, Netherlands
• Technology Stack: Cloudinary, Storyblok, Azure, React.js & Next.js 

With over a century of experience across 120 countries, Damen Shipyards Group (opens in a new window) knows a thing or two about shipbuilding. Currently delivering over 150 vessels annually—from tugs to patrol crafts to superyachts (we’ll take the last one, please)—generating an annual revenue of over 2 billion euros. So, what’s the problem, you might ask. Well, Damen Shipyards wants to be future-proof. They want to be able to move fast and provide innovative technological solutions that would wow their customers, and their previous digital setup wasn’t helping them make sail. Leading them to a collaboration with web agency, Iquality (opens in a new window), a migration from Sitecore, and the development of a multisite environment with a fully immersive CX and a 75% cost reduction—all with a little help from your favorite headless CMS.

The trials and tribulations of delivering a unified digital experience

Damen Shipyards, in partnership with Iquality, had a big task ahead of them: streamlining and proofing their digital landscape for the future. A big task that involved quite a few challenges along the way, including: 

• To create a platform that is fast, secure, responsive, and cost-efficient, while offering a fully immersive customer experience.
• To establish a scalable and future-proof platform to accommodate potential growth and changing needs.
• To integrate and consolidate more than 70 websites into a single platform, enabling a multisite environment.
• To design a portfolio showcasing luxury Amels (opens in a new window) yachts—the featured brand of this tale—with fully animated video transitions translated into hundreds of images without compromising page performance and user experience.

Easy peasy, right? Let’s find out.

Setting sail with the right mix of features and capabilities

While the IT team at Damen Shipyards made the final call on using Storyblok, the Iquality team was already headless CMS connoisseurs in their own right. They’d been working with headless CMSs for over two years, and in their search for a CMS that offered seamless content migration and decoupled digital architecture, Storyblok stood out. But why were we the top choice? 

• Headless and decoupled architecture enabled them to achieve the right balance of speed, security, and responsiveness.
• A component-based approach enhanced content efficiency and reusability.
• Our Visual Editor allowed them to optimize their content creation experience and seamlessly switch between test and production environments.
• Agile, scalable features delivered a triple threat of reduced costs, complexity, and data footprint.
• Our API-first CMS enabled easy integration for customers across all channels.
• Enhanced security standards and ISO27001 certification.
• The ability to create different experiences for various target groups within the same platform, utilizing the digital landscape more effectively.
• Smooth integration with other tech partners, such as Cloudinary (opens in a new window), enriched the platform's capabilities.
• Creating separate spaces (a.k.a. flexible content inventories) for each Damen Shipyards entity and technical environment, providing tailored solutions for each segment of the organization.
• Versatile features enabled them to deploy Damen Shipyards’ omnichannel strategy to engage customers at any stage of their journey.

For Iquality, the main goal for this collaboration was to create one platform, combining over 70 websites, that was fast, scalable, secure, responsive, and cost-efficient. No small feat. They began by rebuilding the corporate websites for Damen Shipyards and Damen Yachting, supported by their approach of offering self-guiding multidisciplinary teams as a service: strategy, concept, design, development, and support all in one. The team worked closely with Damen Shipyards, gaining an acute understanding of them and their internal procedures, and becoming an extension of the Damen Shipyards team—if you will, the wind behind their digital sails. With this unique approach and the right headless CMS, Iquality was ready to tackle the complexities of the project, finding the perfect balance of innovation and control, especially when it came to how the final product looked and performed.

Sink or swim: keeping up with digital consumer expectations

Things are changing fast, and brands have gotta keep up. Organizations have to work to close the gap between what audiences need and want, and what their digital setup can deliver. For Damen Shipyards, they knew that they needed to replicate the fast, responsive, secure platform they built for their corporate website and deliver the same for Damen Yachting. Beyond that, they wanted to provide a fully immersive digital experience that reflected the luxury and quality of Damen Shipyards’ yachting vessels. 

With the goals clear and the initial design well underway, Iquality started implementing their work process and setting up a structured backlog of features and user stories, allowing them to form a practical vision of the final product. The main feature of the Amels Yachting website—a Damen Shipyards brand—is, without a doubt, the portfolio. Designed to be the ultimate showcase of their yachts, the portfolio goes beyond the same old brochure you find on other websites and brings the vessels to life with sleek animation and video scrolling. 

For our fellow nerds out there, Iquality achieved this video animation by loading hundreds of images to create a smooth, pixel-perfect transition. Then, to avoid any unwelcome page performance or user experience issues, they leveraged the power and optimization features of Cloudinary and Storyblok to make it happen. This, alongside just the right tech stack—including Azure, React.js, and Next.js—meant delivering a memorable visual experience that meets today’s expectations was smooth sailing.  

Working smarter, not harder with components

Working on the portfolio page, alongside displaying two flagships and information about every Amels vessel, consumed a lot of the 6 months it took to rebuild the Amels website. And like any project, the Iquality team had to adapt to some choppy waters along the way. When the website development process started, the design was not quite complete, but with a headless CMS, agile project development is a breeze. The design team was able to work simultaneously with the development team, building reusable components throughout the project to deliver a unified, responsive website.

Storyblok fully supports an atomic design methodology (opens in a new window)—our unique multi-layer component-based approach allows content creators to easily reuse their well-structured content. They can create and nest components without limits, fill them with content, and customize them as needed, empowering content creators to work autonomously and deliver quality content faster. Then by adding our visual editor, the possibility to work in pages and modules, and the ability to create templates into the mix, Iquality could intuitively arrange the interface for content creators so they could get to work. While Iquality’s approach to testing and Storyblok features and plugins boosted site performance, as reflected in their Lighthouse SEO score. 

But even with the Amels website up and running, the voyage isn’t over yet for Iquality and Damen Shipyards; they’ve still got plenty of new digital territories to explore and brands to showcase, having now added several other sites to Storyblok. All board! (Promise we’ll stop with the sailing puns now.)