A 3D website experience with Storyblok

Region: Baden-Württemberg, Germany
Technology Stack: Storyblok, Three.js, Vue.js, Nuxt.js, Platform.sh, Cloudflare

The Länd is a German project by the Department of State Marketing and Events at the Baden-Württemberg Ministry. Its vision is to communicate the various advantages of residing in the Baden-Württemberg region. It's one of the rare places on the planet that offers excellent employment prospects on top of being a great place to live. The ultimate goal of the project is to populate the area.

Jung von Matt NECKAR, a Storyblok Partner, delivered a 3D website experience for Baden-Württemberg. They also delivered a functional webshop and a B2B site area. JVM NECKAR won a Silver Effie Award for THE LÄND campaign for overall efficiency.

Storyblok’s capabilities made an enormous difference in the project. Since its launch, it saw an 1800% increase in traffic. Today, the website reaches millions of potential immigrants across the world. Lastly, with Platform.sh, THE LÄND now has scalable environments. Thus, traffic surges would not affect the website or application.

The challenge of attracting young individuals to Baden-Württemberg

What does it take to attract young individuals from different backgrounds and countries, who are looking for something different and exciting in their lives? For the team at JVM NECKAR, it was boldness and thinking outside the box. Thus, the biggest challenges for THE LÄND project were:

• Develop a website with a different approach than the average municipal website. Use the site to attract Germans and internationals to move to the Baden-Württemberg area.
• Use best-of-breed technology that provides scalability but is also affordable. Also, use technology that is easy to build with and will not be a burden on content managers.
• Deliver a secure setup since the website was being built for a governmental organization.

JVM NECKAR is a part of the Jung von Matt Group and one of its largest offices in Germany. The JVM NECKAR team specializes in digital product development - a focus from day one. They excel in delivering extraordinary user experiences by using new and innovative approaches. Their approach is what got them selected for THE LÄND project. They delivered an uncommon and special interface for a platform.

JVM NECKAR wanted the website to make a grand appearance. It had to give people something to explore, instead of a stale and simple website with lots of content. How did they achieve that? By creating an exciting 3D experience for visitors where they can explore the area. The team created a playful aspect to the website where visitors can build their own environment based on what aspects of living matter most to them.

Storyblok for adaptability, scalability, and security

JVM NECKAR had to set up a solid foundation that can provide scalability and sustainability. To do so, they had to build a platform that consists of adaptable, flexible, and modular technologies that focus on user experiences. After experimenting with many Content Management Systems (CMSs), Storyblok won as the best fit for the campaign’s goals and budget.

Storyblok was selected due to its following attributes:

• Flexibility for developers. To build the desired headless technology stack, the JVM NECKAR team needed a CMS that could easily fit into the architecture.

• Simple content creation and management for marketers. The designers and content editors enjoy working in Storyblok, too. Once the platform was set up and Storyblok was adapted to their needs, the team at JVM NECKAR was in charge of content creation and curation. This was done with ease, independent of developers

• An affordable, sustainable and scalable solution. Compared to other CMSs, Storyblok fit best into the campaign’s budget. With Storyblok, the Baden-Württemberg Municipality will be able to grow its online presence with ease.
• Security. Convincing a governmental organization to go with a cloud-based approach can be a challenge. Yet, with the headless architecture, JVM NECKAR was able to deliver security, accessibility and privacy. Storyblok has servers located in the EU, which gives the Baden-Württemberg Ministry peace of mind.

Building THE LÄND

THE LÄND’s website was built in two phases. Phase 1 displayed a main campaign page to raise awareness for the ministry’s campaign. Phase 2 delivered the interactive site for THE LÄND. Storyblok, which was a part of the technology stack from the start, really shined in phase two. It helped enhance the site, which included much more content, personalization, and new functions.

When it comes to the full technology stack, Jung von Matt NECKAR used ThreeJS, VueJS, Nuxt, and Storyblok. All the content in Storyblok renders with NUXT to a static HTML frontend hosted together with JVM NECKAR’s Agency Partner Platform.sh. Content then gets delivered through Cloudflare's CDN. Sudden traffic surges are no problem thanks to the scalable cloud infrastructure. And streamlined deployment workflows left more time for developing new features.

Welcome to THE LÄND

The end result is an interactive website with 3D animations where users can explore what THE LÄND has to offer. They can create their own LÄND with their most important topics for them. Once the visitor has selected tier needs, they get a personal checklist for moving to Baden-Württemberg. That checklist is produced from content snippets which are all stored in Storyblok. This then enables the delivery of personalized content to the users. The website also features dedicated info areas. Visitors can zoom in and get info about jobs, education, healthcare, etc.

The website also features a webshop and a B2B area. Small companies can participate with download kits and advertising materials of THE LÄND. They can also generate their own social media clip to look out for professionals.

The new website has seen an increase of 1800% in traffic after launch and marketing activities. It also delivered some astonishing Lighthouse Scores: 98 in accessibility, 91 in SEO performance, and 92 in best practices.