Building a headless multichannel communication platform for itsme®
Phase 1: 'Inclusive by design’ marketing website.
The challenge
How can we make the itsme® website as accessible as possible?
Not everyone finds it easy to get started with digital services or products, and itsme® is well aware of this issue. Improving digital inclusion and digital fluency has been one of the focal points within the company since 2019. In 2020, itsme® joined DigitAll, a Belgian coalition of organizations dedicated to creating a more inclusive digital society. As part of this commitment, itsme® also critically evaluated its own products and services to explore how they could be made more accessible. Together, we examined how to renew the current website in the most accessible way possible.
The solution
A stress-free digital platform
itsme® noticed that creating an account on the existing website was not straightforward for everyone and caused a form of 'digital stress' for some users. Therefore, it was crucial to prioritize education and support on the new website. The goal was to effectively guide users through the platform and create a stress-free digital experience.
Some highlights
An ‘inclusive by design’ website. Throughout the development process (UX, design, front-end), we always kept the WCAG 2.1 AA accessibility standard in mind.
EU-based alternatives over traditional US-based marketing tech and tracking products (whenever possible). For the b2b website, we replaced Google Analytics and Google Tag Manager with European solutions like TagCommander and AT Internet.
A custom-built page builder component library with 120+ components, that allows itsme®'s marketing team to easily create web pages according to their preferences.
A flexible CMS architecture that enables a smooth launch in other countries. Thanks to the multi-country and multi-language set-up, itsme® can easily expand to other countries.
Migration of 250+ existing pages to maintain itsme®'s established SEO position.
Our approach
Scalability and flexibility at the forefront
In the development of the website, it was crucial to consider itsme®'s growth plans. Therefore, we chose the following technologies:
DatoCMS: a headless CMS that allows the content team to create flexible content for multiple countries and languages.
Next.js: a robust and production-ready React framework that provides full control over how users view pages and blog articles.
A headless CMS offers several benefits:
No worries about infrastructure and maintenance
New features developed by the CMS team are automatically shipped
All content for your brand is centralized in one single place
The decision to use DatoCMS as a headless CMS is based on the main requirements of itsme®'s content team, which we outlined as follows:
A user-friendly interface that presents website content in a clear manner
The ability to easily transfer content to another language (which may differ per country) when itsme® expands into new markets
Sufficient capacity to manage the content of over 250 pages
A company located within the EU and with a strong focus on security
Everything is component-based, meaning all sections consist of reusable components. This approach provides significant advantages in terms of scalability, especially when designing new sections.
The webpages are built using various building blocks (sections) that the content team can work with to compose pages. To turn this content into webpages, we use Next.js. The pages are fetched using GraphQL API, and the sections are translated into React components.
Similar to the business portal, everything is component-based, meaning all sections consist of reusable components. This approach provides significant advantages in terms of scalability, especially when designing new sections.
Given itsme®'s strong growth ambitions, scalability is of great importance. The success of our approach became evident during the development process when the company expanded to the Netherlands. Thanks to the chosen technologies, the Dutch site was quickly set up in both English and Dutch. The content team could easily duplicate the necessary pages in the CMS and make adjustments as needed.
Phase 2: Headless multichannel communication experience
The challenge
Incorporating website content into the itsme® app
Research conducted by itsme® revealed that many users access the content from itsme® partners through the itsme® app. itsme® saw in this an opportunity to integrate the partner content from their website into the itsme® app. How could this integration be set up in the fastest and simplest way? With this question in mind, itsme® once again sought the expertise of Craftzing. Thanks to our initial choice for DatoCMS the integration was relatively straightforward. As a headless CMS, DatoCMS significantly facilitates the streamlining of content management across various communication platforms.
Our approach
A blended product team of digital experts
Our development team collaborated closely with the itsme® teams, including their solution and technical architects, UX/UI designer, and the app team. Regular stand-ups and short communication lines enabled the blended product team to develop a well-thought-out architectural solution that also excels in terms of security. Furthermore, the app team could seamlessly implement the solution within the itsme® app.
Comprehensive data structure and new API endpoint
Initially, our development team expanded the current data structure in DatoCMS by adding extra content blocks for the app, such as lists or the ability to include articles or carousels. For the integration of the app with DatoCMS, our team then developed a new API endpoint, linking it to the existing technical architecture of the website. This API endpoint retrieves partner content from DatoCMS and translates it into a format compatible with the itsme® app. The app team only needs to integrate the API with the app, as the correct design display has already been determined in the API.
The impact
Efficient and optimized content management
Thanks to the control of partner content in the app via DatoCMS, the itsme® content team can effortlessly keep the content up to date, benefiting from a single source of truth. Moreover, this approach proved to be a faster and more cost-effective solution compared to the alternative of the app team building an additional API endpoint themselves.
Next steps
Even after the launch, the team doesn't rest. Thanks to a Continuous Improvement track, the website is systematically expanded with new pages and modules based on strategic expansion and gathered feedback. A backlog and corresponding roadmap ensure that the right priorities are always set during this process.