We have created our own landing page builder. Why, if there are so many of them, and what happened
Hello! My name is Pavel Komyagin, and I am the team leader of the internal product development team at Netology. Previously, editing landing pages in our company took 3-4 hours of development and testing per week. There was no single design style, everything was done manually, and the developers were constantly in a hurry.
I came up with and, together with the team, brought to life a landing page builder that allows you to assemble product pages without the participation of development in a matter of hours. I talk more about everything in this post.
Spoiler: almost one and a half thousand pages have already been created on the constructor.
How to get started: everything manually, different landing pages, busy developers
In 2016, I moved from Foxford to Netology. In fact, I stayed in the same place, in the same office, but started working on a React project. At that time, all landing pages were very specialized and with different color schemes. For them, there was a separate admin panel, where they filled in the cost, place and time of the event, the number of remaining places, and the schedule of classes. Static content was hardwired into the layout, and changing information was pulled from the admin area.
To make changes to the texts, the front-end developer was given a task. It went through the entire cycle of “review → testing → deploy to production”. The customer could wait a long time even to correct a typo, as the developer had other tasks. Often they arrived suddenly with the highest priority, and the developer had to be distracted from current affairs. Still, landing pages with expensive products had to be perfect.
On average, edits took 3-4 hours of development and testing per week.
Freelancing did not solve all problems
All online product pages were unique. There were no common blocks that could be reused. It took 2-3 weeks to create one landing page, including design, development, testing and rollout for production. At the same time, the developer’s net time was spent about a week.
We started looking for ways to optimize it. We thought: “Can we give the layout to freelance?”. The result was the following scheme: the Netology front-end developer creates a route in the react application for a new landing and a file for the future page, and at this time the freelancer typesets the entire page according to the layout and returns the result. The Netology developer takes the layout page and transfers the layout to react components, simultaneously bringing it and css to the style that is accepted in the company. For example, transferring from BEM to css modules.
It seems that they saved time on layout, but still there is a lot of routine manual work left.
As a result, freelance was abandoned. There were already 10 unique landings, they required constant editing of the content. This also took a lot of time, and the tasks of correcting texts, to put it mildly, are not the most interesting.
Why not Tilda
Since it was I who had to deal with layout and content editing, I decided to look for options on how to shift tasks onto the shoulders of people who do not mind doing them on an ongoing basis. There were no separate layout designers at hand, and I began to look at what solutions were on the market for creating pages without development.
Tilda caught my eye first. I was impressed by its capabilities and the huge selection of blocks from which anyone can create a page. If there is no suitable block, you can draw your own. It would seem, subscribe and use. But there was specificity.
On our landing pages, we wanted to show blocks with different content for authorized and unauthorized users. There was also a product registration form with complex logic inside: some fields were hidden depending on whether the user was authorized or not, the rest were pre-filled if possible. After registering from some landing pages, we redirected to different parts of the site. I didn’t want to put all this into separate scripts in order to use it both on Tilda and in the react part of the site, or to duplicate the code. I also didn’t want to transfer authorization so that everything looked organic for the user: you go through all the pages of the site and are logged in everywhere, and all pages have the same header with a menu. Therefore, Tilda did not fit.
Custom constructor is not such a bad idea
I came up with the idea to create my own constructor.
Now I would take a more measured approach to it, but then I just started doing. I got excited about the idea, I really wanted to surprise everyone (yes, such a motivation) and show what a great guy I am.
I took one of the online product landing pages as a basis. A few days later, I had a prototype of the constructor, in which it was possible to change the content of individual blocks, but so far without saving to the server.
I showed the prototype to colleagues, designers and managers in my team. It was, of course, a wow effect, because no one knew that I was doing this story. Suggestions poured in on what could be improved and how.
One of the first changes is to make different sets of blocks for different types of landings. For example, for open classes – one, for free programs – another, for offline programs – the third.
Having met with backend developers, they began to think about how to store such heterogeneous information. We decided that it is best in the form of json. The frontend sends json when the landing page is saved and receives it when the landing page is opened. You can completely change the structure of the block on the front-end and not depend on the resource of back-end developers.
How content editing works in our landing page builder
When saving a landing page, json is sent to the server with the following required fields:
The color scheme of the entire landing page.
The order of blocks on the page is an array of block keys: “coursePresentation”, “experts”, “lessons”, “resume”, “registrationForm”.
The content of all blocks as an object whose keys are block id and values are block content.
How the block content is presented
Each landing block has a specific set of fields that need to be edited by content managers. At least it’s a heading and a subheading. In edit mode, add the content-editable=”true” attribute to the divs and listen for the onBlur event. When it fires, we store the edited value in json related to this block.
Not only text fields, but also icons can be editable. Each icon in the block has its own wired category. When you click on the icon in edit mode, you can select the desired image from the gallery, after which its path in the storage will be saved in json, it will be loaded when viewing the page.
Problems we faced
In the process of developing and improving the constructor, as with any large project, various difficulties periodically arose.
Firstly, the designers came and said: “We changed the block with cards. Now there is a F.I.O. field instead of two fields: “First Name” and “Last Name”. The icon is embedded in the header of the card. This meant that when you change the layout, the saved structure of the block content also changes. And it is used on half of the landing pages, and everywhere you need an update.
To do this, a task was created on the backend, where they described that you need to go through all the landings, take json with content from each of them, find the block there by the key and change the structure in it: add content from field B to the content of field A, then delete field B. This situation occurred 10 times during the redesign.
Secondly, content managers, working on the same landing page, overwritten each other’s changes, and then came to support, complaining about the designer. We partially solved this problem by displaying a list of people who are currently editing the current landing right in the constructor.
More opportunities to save time
In October 2019, we added the ability to create not only landing pages linked to a specific product, but also arbitrary information pages without a registration form, but with a contact collection form or a list of recommended programs. We also introduced several universal blocks like “Picture and text on the left” or “Paragraph”, so that even to form ordinary pages you don’t have to go to third-party services or ask for help from developers.
Over the past five years, the Netology landing page builder has been heavily overgrown with features. At first, it was not even possible to swap blocks, and there were about five blocks themselves. And now there are more than 70 of them. Among them are both small “Heading and subheading” or “Separator” (just a horizontal line), and complex ones: “4 pictures and text”, “Summary”, “Big cards of experts”, “Students portfolio” . All this allows content managers to assemble landing pages without the participation of development in a matter of hours.
The ability to choose a dark or light color theme for the entire page or for a specific block also adds variety. The desired block can be found in seconds in the library with a search.
One of the most recent innovations is the ability to copy blocks between landing pages. Let’s say there is a block with expert cards on some landing page. For each card, you need to select a photo, add your full name, position and description. Then a similar landing appears where you want the same block. Previously, you had to manually fill in all the information again, but now you can select a block or several blocks on one landing, copy them with one button, go to another landing and paste. Saved hours of manual labor.
Why we never regretted that we did everything ourselves
Developing your own solution was not a mistake. A lot of people are working on the creation of landing pages now, and several new pages are released every week, all without the participation of development. About 1,400 landing pages have already been created in the constructor, the main part is open classes.
We plan to further expand the library of blocks to meet the needs of designers. We do not worry, as in the case of a third-party service, that at some point we will run into restrictions. We have full control over how our constructor works, we can expand the functionality depending on the needs and wishes of internal users.