DrSmile builds multilingual digital experiences with Contentful

Introduction

Revamping a complex website is not always the most enjoyable experience. However, updating DrSmile’s website architecture with modern tools to make it more editor- and user-friendly turned out to be one of the most educational and fun projects the Bejamas team had in a while.

DrSmile is on a mission to democratize the dental market and to make everyone smile with confidence. Their practice is focused on providing unique expertise through a high-tech approach, and they wanted the same for their website.

A modern infrastructure that enables faster development

DrSmile started with a custom-built website with Webflow and Unbounce. The solution met their initial needs, but as webpage volume increased, they struggled with slow load times and poor editorial experiences. Undergoing significant growth and expansion into new markets, the digital team needed several things to keep pace with their business aspirations. 

First, they had to get their website performance in check — slow load times had to go. Next, they needed a robust CMS capable of handling specific language requirements of all the new locales they were expanding into. And finally, they needed an easy solution for their marketing team to A/B test content landing pages.

As a Jamstack development agency, Bejamas has helped many businesses maximize their potential with high-performing digital properties. They did the same with DrSmile by introducing them to the Contentful, Gatsby and Netlify stack.

Multilingual expansion: Contentful at the center of the project

The team was excited by many of the problems they were able to solve as they began developing their modern digital dental experience. With their new stack, they were able to swiftly navigate the iterative design processes that come with launching a new brand property. They were also able to A/B test their new site’s performance using the Optimizely app in Contentful. You can read more about those efforts on the Bejamas site.

One of the biggest wins for DrSmile, however, was using Contentful to streamline the editorial experience of their complex multilingual website.

Initially, the team implemented data models for one locale. But after a few months, they received the request to add another, and then another. Fortunately, Contentful makes it easy to localize content across an organization’s global presence. Contentful’s ability to accommodate translations at every level of DrSmile’s data model gave the team full control over which data fields could and should be translated for specific regions. Combined with the Gatsby plugin, the implementation across new countries went smoothly and without refactoring. 

Capitalizing on the fallback locale feature

While adding the first language, it became clear that not every field needed to be translated because there was only a change of dialect, rather than a change in the entire language. On top of that, the team encountered a problem with the GraphQL schema for a new locale.

It turned out that when the translation fields were not filled, they couldn’t build the website because Graphql couldn’t build a data model for non-existent content types, which they were trying to get on the front end. The fallback locale feature came to the rescue.

For example, let’s say we have countries with the same language but different dialects, like Germany (de-DE) and Austria (de-AT). Only a few fields should have different content, so you can use the de-DE fallback for the de-AT page. It means that if you do not manually add the translation for de-AT, the content for this field will be taken from de-DE.

Setting the de-DE fallback to all locales fixed our GraphQL schema issues — temporarily. After a few iterations of adding new languages with de-DE fallback, they realized that this approach wasn’t good enough, because there was a risk that de-DE content would show up in non-German language versions as well.

They started with setting up new languages without the fallback, and of course, they encountered failing builds because of the GraphQL errors again.

At first, to fix this, they started to generate a graphqlSchema file with Gatsby, but it didn’t work as expected. They followed the Gatsby error message to set up dummy content for all content types so that GraphQL could query at least once for each content type. And it worked!

The most significant advantage of Contentful translations is that automated translations don’t have to be set or kept inside the repository. The editors do not have to duplicate the content between locales; they can use just one locale fallback.

Building a platform for the future

Contentful enabled editors to manage a complex multilingual site smoothly and with full control over their customers’ localized experience. Their new found site speed without the need to sacrifice functionality was an added benefit of their new stack and the Jamstack approach.