Best IT - Website relaunch
based on Next.js
and Storyblok
Let's meet Best IT
Best IT is one of the top partners for digital transformation in the German-speaking / DACH region. As a digital agency established in 2000, they are considered one of the pioneers in the eCommerce area, having partnered with big solution providers like Spryker, Commercetools and Shopware.
They consist of 100+ experts located in 4 offices in Germany and Austria: developers, UX designers, consultants, solution architects, analysts and project managers. These skill sets allow them to offer solutions for the entire digital commerce chain: from strategy and consulting, user experience and design to the development and operation of eCommerce platforms across all channels and devices.
What the client wanted to achieve
The client approached us with a request to discuss the development of their new website. As an enterprise eCommerce development agency, Best IT wanted to make sure that their website is of the best quality and up-to-date with the current digital environment.
They were aware that, in their market, the general experience of the website influences their brand image in the eyes of potential customers, and wanted it to actually mirror their development expertise.
Although the website's performance was still decent, our client decided it would be crucial to improve some metrics so that the company could actually present itself as eCommerce and digital experts.
Furthermore, Best IT's content marketing team started to experience some inefficiencies with their WordPress-based content management.
Hence, relaunching the website turned out to be an important business decision that, in practice, required improving the website usability and user experience through implementing new designs and increasing the website's performance by switching to Jamstack.
Ensuring that the SEO strategy can be implemented in accordance with good Core Web Vitals metrics was also important, as well as enhancing the content marketers' experience regarding content management, creation and collaboration.
From the very beginning, the client intended to switch to the Jamstack approach and implement Storyblok for their headless CMS of choice.
As official Storyblok partners and heavy Next.js users, we were more than happy to start the project and support Best IT with their goals.
Moving forward with the website's architecture
When the client approached us with the task of modernizing the website, we knew we would face a multi-aspect
challenge. After all, the project was not just about refreshing the visual layer and implementing designs.
In order to achieve the goals, it was necessary to change the technology stack and monolithic architecture
more comprehensively to Jamstack architecture.
This involved planning and executing a number of activities, without which the new site would not be functional,
and the team would lack the knowledge necessary to navigate the new tools.
The content marketing team needed a tool that would allow more control over content creation, composition
and optimization. What the team lacked, for example, was the ability to add and edit new pages without
the need for developer support. Giving them more autonomy was crucial to streamline all
the processes related to content management.
The existing stack, a typical monolithic architecture with WordPress as the CMS, did not provide
adequate capabilities in this regard.
This was not the only limitation imposed on the client by monolithic architecture. Best IT observed
a gradual worsening of the site's performance, something that's very important from a user experience
point of view.
After all, no one likes long-loading websites: for example, when a website's loading time goes from
1 second to 5 seconds, users are 90% more likely to bounce. Improving this aspect was all
the more important since Best IT are digital experts who need to show their expertise.
But why does this performance issue happen? Read on to get to know the answer!
What we had to face
Monolithic architecture, still the most common on the Internet, relies on the front end and back end being inherently linked. This imposes a number of constraints, e.g. any visual changes must be combined with changes to the overall architecture, and this means websites are less flexible or scalable. Also, the need to render sites on the client side and generate HTML files on the go directly affects loading times.
Increasing performance was equally important for the client with regard to SEO strategy implementation. Since the introduction of Core Web Vitals by Google, page loading speed largely affects domain's SERP positions.
Therefore, it was necessary to find a solution that, at the same time, provides good performance, is fully editable, modular and future-proof, adapted to the requirements of modern SEO, can reduce the time developers need to manage the site and give more convenient opportunities to the content team.
And such a solution exists: Jamstack.
Jamstack websites are constructed differently: the front end and back end are decoupled and can be independently developed, which gives a lot of flexibility. The website can additionally be successfully enriched with API-based microservices rather than heavy and unpredictable plugins.
Jamstack websites, in practice, are dynamically-generated static websites: their HTML file is generated during build time and, thanks to this, they load quickly and provide tremendous opportunities to create engaging user experience on the front end, further allowing the use of React-based components.
The above is just one way of how you can build websites within Jamstack. There are also more sophisticated solutions out there which allow for mixing different ways of generating websites. Next.js, for example, grants you the opportunity to point out particular groups of pages that are generated differently: some of them can be built dynamically during a build phase, while others, being already-built, are served statically.
And that's exactly what we wanted to do.
How we chose the stack and strategy
We analyzed the initial situation for every project: the at-the-time-present technological stack and its limitations. Together with the client, we discussed and verified their business requirements, as well as designs, which had been provided by Best IT as a solid base for the future development phase. As the client's core services include website development, we split some responsibilities regarding project management and planning, and crafted a realization plan.
Basically, Best IT was strongly determined to make the best use of Storyblok CMS. They knew its potential to cut workloads and show all the site's changes in real time with their game-changing visual editor. Additionally, Storyblok enables websites to be built with JavaScript-based, predefined and easily editable components, and this was considered as a source of great value.
What's more, the CMS provided by Storyblok is targeted at creating a very diverse front end. To put it simply: you define components within Storyblok, and then they are transformed into a form of API/JSON, meaning you can do basically anything to create the experiences you wish for.
As a result, Storyblok proposes a really friendly and intuitive way of displaying content: users can simply use modular blocks that are easily modifiable, and arrange them accordingly. This applies to both content marketers and developers, with Storyblok allowing for different levels of editing components (changes made with a few clicks for marketers, and changes made within code for developers).
To make it fully happen, though, there was a need for a new stack. We proposed Next.js for Storyblok. It's a React-based framework created by Vercel for building websites in a scalable way. Why?
It's most suitable for projects that involve many diverse components and is a great choice for SEO as it dynamically generates static pages, which are generally more likely to index for higher positions than dynamic pages. What's the difference? Thanks to Next.js, your website can be technically static, yet equipped with many dynamic elements.
This was part of a more future-proof approach that Best IT wanted to take because, as opposed to open-source solutions like WordPress, Next.js has a very rich and comprehensive documentation and is being constantly updated by Vercel's experts.
Best IT's designers did a fantastic job with the designs they provided us with. They were prepared in a way that would let us further expand the set into a fully-customized and modifiable design system really easily: transforming these designs into components and defining their behavior on the page was a real pleasure.
It's important to note that, with Storyblok backed by Next.js, you can edit already implemented components with just a few clicks. Basically, one type of component can display itself in a few different yet similar alterations. The provided designs served as a good base that we would later develop for the purposes of the project.
We categorized them into gradually descending elements, and created a predictable and organized structure. The flow goes like this: to render a whole page, we need to render a Storyblok's content type / template first; template then renders bigger sets of components, called organisms, which later render smaller chunks, molecules, followed by molecules rendering atoms.
This makes the whole design system more useful for both developers and content marketers: the developer sees this predictable flow in a code, and the marketer uses a neatly organized system that tells them what kind of content can be used on a particular level.
Technological stack
-
Storyblok
(Headless CMS) -
Netlify
-
Next.js
-
TypeScript
-
Tailwind CSS
-
Storybook
Team composition
-
1
1 Jamstack Developer
(Naturaily) -
2
1 Project Manager
(Naturaily) -
3
1 Head of Marketing
(Best IT) -
4
1 Head of Design
(Best IT)
What we accomplished
As a result of the cooperation, Best IT can now proudly use the website that reflects their advanced eCommerce and digital environment expertise. This applies to designs, UX, performance, and a modern technological stack.
On the basis of the provided designs, we developed 70 different React-based components, divided into templates, organisms, molecules, and atoms. They're fully modular and customizable, and are prepared in a way that leaves extreme freedom for content marketers to manage the particular site's look and feel.
Marketers can arrange components within the Storyblok interface, and see changes applied to the site straight away, before it's even deployed. As opposed to web builders that offer similar functionality for managing a website's looks with a few clicks, the proposed approach doesn't compromise the site's performance. It's quick, light, and ultra-flexible.
These are the main outcomes of going fully Jamstack. Best IT is now equipped with a headless CMS of their choice, with the front end and back end separated from each other for the purposes of further scaling the website through the use of API and microservices. Also, all content visible on the website is editable in the CMS, and Best IT's developers received full support with regard to making further changes.
With the new stack, based on Next.js and Storyblok, the performance and Core Web Vitals metrics have improved notably, and you can see that below.
The performance change of the website goes as follows:
-
Performance score (GT Metrix)
75% 86% -
Performance (Lighthouse)
24 100 -
Time to Interactive
4.3 s 0.9 s -
Largest Contentful Paint (LCP)
1.4 s 0.6 s -
First Contentful Paint
0.61 s 0.297 s -
Total Blocking Time
0.37 s 0.186 s
As for goals related to SEO, content marketers can now turn their strategy into life without the use of additional, heavy, loading-times-affecting plugins, which is a must within a traditional / monolithic CMS.
All metadata and tags, internal linking organization, sitemap generation, or image optimization can be done - and be visible on the site - really quickly. Storyblok also allows for the creation of custom fields for any SEO-related purposes.
Also, switching to Jamstack allowed for better security as Jamstack websites usually don't need databases located on their servers to be functional, and the risk of a data breach is absolutely minimal.
As for our project, we keep data on Storyblok's storage, perfectly integrated with Storyblok's interface. We also provided a PWA version of the website, so the data usage decreases and the site is available offline.
Before we handed the setup to the client, we had made sure they'd be able to operate within it freely. Hence, manuals and documentation were provided, and several technical sessions were also conducted.
What's more, the project itself could be named as a nice example of cooperation between two companies offering similar services, during which a good atmosphere and understanding were felt all the time.
Our work resulted in:
-
Increasing the performance of the website
-
Implementation of a headless CMS
-
Enhancing the content marketers' experience during content management, creation and collaboration
-
Implementing new designs and UX to the site
-
Adding more control over the SEO strategy
-
Transferring the Jamstack and headless know-how
What our client says
Naturaily proved to be the right technological partner for us: efficient, responsive and at all times focused on finding alternative, goal-oriented solutions.
Christoph Batik
Chief Customer Officer at Best IT
They were able to quickly verify business requirements and then propose and implement the most accurate technology. Whenever we encountered a challenge, we knew that their creativity and knowledge in the area of headless CMS implementation would allow us to move forward with ease. With the new site and the know-how gained through our cooperation, we feel even more equipped to support our clients, and this was the main goal when we began the project. Naturaily is definitely a recommended partner and was highly determined and successful at adding value.
Read the whole review on Clutch
Best IT's case is a prime example of how we create websites with Next.js and Storyblok
We'll drive you through the whole process seamlessly