Van Raam, a leading manufacturer of customized bikes in the Netherlands, collaborated with our partner Bejamas, to revamp their website. Moving from a legacy setup, the new website launched with a focus on significantly improving user experience, speed, and scalability.
The previous website struggled with slow loading times and limited scalability, affecting the team’s ability to effectively reach and serve their content, leading to the need for a more robust and flexible solution. Specifically, the reasons that led to them collaborating with Bejamas were slow loading times (6-7s in the US!), limited features, poor UX, and a general lack of scalability.
After evaluating a few options, Gerald and the team eventually settled on DatoCMS, for a few particular reasons that stood out in the evaluation phase.
Blocks: Blocks allowed for the creation of reusable, dynamic content templates, allowing for easy updates and consistency across the site.
Localization: With Van Raam’s website constantly being updated in English, Dutch, French, and German, DatoCMS’s simple approach to i18n allowed for localization workflows that the team could easily adapt to.
Scalability: The CMS’s scalable architecture supported Van Raam’s expanding content needs and future growth plans, since the previous Legacy CMS was heavily restrictive.
Editor focused UX: The intuitive and easy-to-use UI improved the overall experience for the editorial team, with a very short learning curve.
Implementation and Process
When Gerald and Bejamas first started, they looked into various CMS options, including other Headless ones. They quickly found that the alternative on the shortlist had some limitations with its content modeling, so they needed a better fit, which ended up being yours truly 💅
In the design and development phase, the Bejamas team created detailed wireframes with a mobile-first approach to ensure the site would perform well on all devices. They designed specific templates for different page types and used Next.js to integrate DatoCMS, building a dynamic and responsive website. Algolia was also implemented for search functionality.
Our main stack with Next.js integrated perfectly with DatoCMS, making it easy for editors to preview content before publishing.
For the content migration and integration, Bejamas developed custom scripts to seamlessly move existing content into the new CMS. They connected the site with various third-party services using webhooks, which allowed for instant search updates and automatic redirects without issues.
And finally, to enhance the editor UX, the team provided a brief onboarding session to familiarize the Van Raam editors with the new system while setting up core plugins like Live Web Previews. The intuitive interface of DatoCMS made it easy for them to adapt quickly.
Getting Hands On
Once all the implementation was done and the team had a chance to work with DatoCMS for a few months, we tried to understand some of the aspects around the product’s features, and the overall UX that stood out to both sides.
Key Features
The following features of DatoCMS stood out for both the development and editorial phases:
Web Preview Plugin: This tool allowed editors to preview pages before publishing, ensuring that content was accurate and visually appealing.
The ability to preview pages before they go live has significantly improved our content workflow. We have a team of eight working daily on content, and the web preview feature in DatoCMS is crucial for ensuring everything is perfect before going live.
GraphQL Explorer: Simplified querying and integration with the front-end, making development more efficient and streamlined, especially when testing out queries and complexities before adding them into the main repo.
Webhooks: Enabled seamless automation and integration with third-party services, such as Algolia for search, as well as during their content migration phase to reduce manual back and forth.
Blocks: Facilitated the creation of dynamic and reusable content blocks, enhancing content management and consistency.
The blocks concept in DatoCMS was perfect for building dynamic templates and landing pages.
Localization Features: Made managing content in 4 languages straightforward, allowing for quick and efficient updates across different locales that Van Raam uses (English, Dutch, French, and German).
User Experience (UX)
The revamped website offered significant improvements in user experience for the content team of 8 at Van Raam:
Enhanced Speed and Performance: The use of CDNs and optimized architecture reduced load times drastically, providing a faster browsing experience for end users, which is a core metric for the content team at Van Raam.
Localization: With locale-specific validations and a simple UI for changing between languages, the localization workflow at Van Raam is highly intuitive with everyone on the team being able to handle translations with minimal onboarding.
Switching and adding content in four languages is really easy, and we’re very satisfied with the new CMS system.
Improved Navigation: The new design and structure made it easier for users to find information, enhancing overall usability.
Mobile-First Design: Ensured that the site performed optimally on all devices, catering to the growing number of mobile users, and allowing the team to safely create content knowing how it would appear across platforms.
Developer Experience
From the developer's perspective, DatoCMS provided several benefits according to Gerald.
Comprehensive Documentation: Detailed and clear documentation facilitated a smooth implementation and customization process.
Easy Integration: Connecting with other services and APIs was straightforward, enhancing the overall functionality of the site.
Powerful Features: Features like GraphQL querying, webhook integration, and the GraphQL Explorer made development more efficient and less time-consuming.
The GraphQL Explorer in DatoCMS is really good for testing queries before using them in the application.
Looking ahead, both Bejamas and Van Raam have plans to expand the functionality of the site by introducing new page types and elements given how seamless the collaboration process has been for new initiatives. This includes constant optimizations to ensure the site is always performing at it’s optimum best, and exploring new features to implement that enhance the end UX.
With page load times reduced from 6-7 seconds to under 2 seconds, and builds now taking less than 2 minutes, we’re confident that Van Raam’s future website growth is going to continue being mint :chef-kiss: