Modernization of a website builder solution: experience of the Rolique team

Technologies are constantly evolving. Solutions that worked a few years ago today are considered obsolete. Often such solutions impair the product's usability. It globally impacts the business and directly affects competitiveness. Users will look for alternative, more simple, and handy solutions. Ultimately, this will affect business performance and reduce growth opportunities.

The best solution is modernization or, in some cases, the complete transformation of an outdated product. Using modern technologies will allow the product to remain competitive, provide new market opportunities for development, and attract new users.

We are happy to share our experience implementing such a solution for our client, a German service with ready-to-use templates and elements for quickly building a website. We worked not only as a development team but also as business consultants. During our cooperation, we have provided research and helped our client to deal with non-technic business cases.

We helped our client to gain a completely updated product and left room for future system expansion and development. Now we are working on the migration of the existing customer base (about 11 million users),

Let's consider our work in detail.

Subscription migration

Our client's product is a website builder. It had an obsolete unusable application and a large user base (about 11 million users). The core target audience is seniors.

Our task was to update the system and migrate the user base. After studying the old system in detail, we realized it lacked the crucial features needed for a modern solution. So we decided to rebuild the system from scratch.

We adapted the general idea from the old system to make the new solution familiar to existing users. However, we built the new system from zero, considering all modern trends for constructing solutions of this type. In addition, we made the solution as simple as possible to make it easy for users with different levels of expertise.

Implementing ready-made solutions

Hard deadlines were one of the challenges our team faced. The best option when building such a system is to write the whole code from scratch. However, we needed more time. Therefore, the customer requested to connect a ready-made solution providing all the necessary functionality.

The old website builder worked as a block system. Users could only use a template with standard configurations. There were only a few options to edit the templates, which made websites more standardized than unique.

Our team implemented a completely different concept. Users can specify their business area and choose the color scheme and the needed functionality for a website. After receiving the preset, they can adjust it for themselves. Someone who wants to use something other than suggested templates can build the website independently, using all available constructions.

All technical solutions were on our side. After the Spike research, we chose the best-fit library with all the required functionality. Since the template builder is a large-scale project, a library with such functionality should have strong support and a large community to constantly release new versions and improve.

We chose monorepo with Nx — a next-generation build system with first-class monorepo support and powerful integrations. Our system has a lot of shared code between sub-apps and backend microservices, so this solution best fits the customer's needs. As a result, users can see what they are creating when using the website builder platform while all code is automatically tuned into output HTML, JS, and CSS files.

We also implemented a domain purchase opportunity with a third-party provider InterNetX.

Multiple apps development

We divided a platform's front-end and back-end parts into separate sub-modules:

Account app, which is responsible for authorization, authentication, dashboard, and so on
Order management app for dealing with payments
Editor app to create websites

Since we expect that some parts of the system will be updated in the future due to scaling or other reasons, such a separation will make implementing any necessary changes easier.

Account app

In this app, users can register and log in. To implement the functionality, we used the AWS Cognito. It provided a ready-made backend part for authorization and management. We also connected some backend plugins to receive internationalization.

Before choosing this library, we researched all the available options. However, the best solution for this project is AWS Cognito. It is a very flexible service with the possibility to connect many functions. In addition, it was the best option for the client's budget.

Order management app

The website builder has three premium subscription plans. Users can make payments by bank card or with SEPA.

While building this app, our team worked not only as developers but also as business consultants to deal with non-technical business cases.

SEPA is a popular payment option in the EU. However, payment can take up to 10 days, which creates some business edge cases. Imagine that the user paid for the premium plan. The funds are debited from their account, but the crediting time is too long. The question is whether to let the user use their subscription immediately or wait till the funds are credited because of the risk of declined payment.

The same question arises with a monthly subscription because of this gap when the SEPA transfer status is still being determined. After researching similar cases, it was decided to grant users access immediately without waiting for funds to be credited since declined payment cases are rare.

Downgrading and upgrading plans also created some edge cases. Our team needed to think through the business part. For example, in case of downgrading the plan, refund the funds immediately or postpone it until a new payment date. As a part of the business strategy, we decided to delay downgrading the plans and subscription cancellations to the following payment date.

At the same time, the upgrade is carried out immediately. But we needed to implement the automatic surcharge cost calculation. We built a system that counts how many days the old subscription was used and the amount to pay for the upgraded plan.

Also, in the app is an option to buy a domain. We implemented it with a third-party domain provider Internetix. Through their API, the user enters a domain they are looking for. An app sends requests to see if this domain is available. All payments are made in the app.

When canceling a subscription, there is a possibility to cancel the plan, the domain, or both the plan and the domain. Here also are some edge cases. If the user cancels the plan but still has a domain subscription, they cannot use this domain from our site. We integrated notifications to warn and remind about this.

Editor app

It is a website builder app. Here we implemented an automated template generator. We create a survey that collects information about the business, category, website name, etc. Based on this data, the builder generates three template options for users to choose the best-fit one.

In addition, it is possible to create a website independently.

We also connected an open AI for text generation. It is based on the website's category and description. Users describe what texts they need, and AI generates content according to the request.

Support of the main website

The company's main website was recently rebuilt using a headless CMS system Storyblok by a third-party developer. But still, it remained inconvenient and slow. Our team has implemented full website support by fixing code defects and improving the site performance to create a better user experience.

In addition, one of the stages of work on the site was implementing multilingualism. The resource is available in two languages — English and German. We are working on partial localization with Italian, French, Spanish, Turkish, and Polish.

We have implemented multilingualism with the Crowdin service and i18next library. The service does machine translations into the required languages and creates a pool request. Later, all translations can be manually verified and, if necessary, edited.

Conclusions

As a result of our work, the client received a new, modern, fast system that can compete with similar solutions. Our team worked not only as tech developers but also as business consultants.

We used all available best practices to make the solution as safe and reliable as possible.

Our team is currently working on supporting the solution and developing additional features. We are happy to participate in developing such an exciting project and implement our ideas to build interesting and needed solutions to benefit people.