Redesigning an automated marketing platform

Mindbox is a cloud-based marketing automation platform for client companies. It helps them control email campaigns, set up personalization, and manage loyalty. Mindbox also removes the load from internal IT systems and allows you to transfer the collection, storage, and management of client data to a cloud-based CRM system with convenient management.

In 2021, the service began a redesign and needed to outsource front-end development. So, because of our experience creating microservice architectures for SaaS projects, they turned to Evrone in search of specialists who would help strengthen their own team and assist with the marketing automation software development.

Evrone provided three React specialists to help with the website redesign for Mindbox, and for the duration of the project, they became full-fledged members of the team with equal access to repositories and regular one-on-one meetings.

Microservices

Before the marketing automation platform redesign, the main load fell on the backend. The entire frontend was also rendered there, and the pages were created according to templates. So everything was slow and not interactive enough, and part of the functionality was only available through new tabs.

In the new version, we used an SaaS microservices architecture, so everything is different. The frontend is divided into React microservices, and a separate application is now responsible for each page. This allows us to make independent releases that do not break each other. They are handled by separate teams, who, due to the smaller amount of code and fullness of features, can dive deeper into the process and do the job very well.

Technology stack

The new microservice frontend for the SaaS platform is built with webpack, and the services themselves are implemented on React. The new version also abandoned the popular React + MobX bundle, in favor of the standard React functionality. Apollo GraphQL is used as a transport layer between the cloud and the UI.

The Storybook component library is responsible for keeping order on the project, and it helps implement parts of the interface in isolation from the main application. With this tool, you can quickly assemble pages from ready-made components, like a constructor. Components are designed and systemed together with the design team so that everything works the same on all pages.

Reports

One of the big tasks that our specialists helped to implement was reports on mailing lists, loyalty, and subscribers. After the redesign, new functionality appeared in the service, so the task was to integrate a large number of new filters that could be quickly turned on/off and combined with each other. But most importantly, new reports are built in the interface in seconds, rather than hours.

For example, the new Newsletter Report displays a funnel of metrics for the selected period and helps you compare emails. New filters help you view data on all mailing lists at once, on each mailing list separately, or by groups — for example, trigger mailings or mailings from a specific campaign. The report shows how many letters reached the addressee, how many of them were opened and clicked, and which part eventually led to orders. All information about the mailing list is visible: subject line, campaign, tags, content, etc. Export of report data to CSV is also supported.

Customer Data Page

We also helped redesign the client's change page. Contacts and client identifiers have been moved to a prominent place in the main field, and additional fields are now available on the main page and do not need to be opened in a new window. The history of changes was moved to a separate tab in the center of the page. And the name of the client is now always fixed in the header, so as not to confuse the data when working with several clients at once.

Personal recommendations

In the new version, we also worked on a new page for editing recommendation algorithms. Now the preview is available right at the top of the page, and if the recommendations are empty, the service will immediately show the reason: the required parameters were not filled in, the algorithm was not recalculated, or the products are out of stock.

Product similarity features can now be ranked by simple drag and drop, instead of being removed and re-selected as before. This also made it easier to manage exceptions from a single manufacturer. Now we can get by with a single multi-select exception, rather than creating a one-to-one match.

Tests

All new functionality on the project is covered by tests, even though front-end testing is relatively uncommon. We use proven UI integration testing tools, so the tests do not just superficially check whether a new feature works. Our developers have tested several types of user scenarios and included front-end integration testing.

Results

In addition to the above tasks for the redesign of the marketing automation platform, we also:

• Helped set up virtualization for several components to increase performance.
• Participated in Apollo query optimization
• Wrote multiple new components for the Storybook and added functionality to the existing ones. For example, we developed an interactive select that automatically expands to an empty part of the screen, changes size when scrolling, and does not crop other items.

The main work on updating the product is complete, so Mindbox is gradually returning the current functionality support to their in-house developers. The project is actively preparing to enter foreign markets and is constantly developing new opportunities for customers.

If you need qualified assistance with a large project or are looking to hire a CRM developer, send us a message. We will provide experts for your tasks and help you set up work in a format that is convenient for you. Just fill out the form below, and our managers will contact you shortly.