Enrique Nieto Arranz - Web Builder

Web Builder

Company

Reflex MediaGroup

Role

UX Engineer

Summary

Design and implementation of a custom web builder for marketing teams, offering a set of pre-made blocks to speed up the creation of landing page structures, while allowing full customisation of elements to tailor them to specific campaign needs.

Challenges

Marketing teams constantly adjust landing page designs to maximise conversion rates, which requires a high level of customisation. While templates can speed up page creation, each campaign brings its own specific needs, demanding a flexible balance between ready-made blocks and tailored adjustments. Additionally, the ability to insert custom code for tracking insights is essential. This level of customisation, although common, often pushes beyond the limits of existing tools or web builders, which tend to constrain users within predefined workflows.

Solutions

A custom web builder was designed and developed in close collaboration with the marketing teams. The builder allowed the creation of reusable structural blocks that could be added to different landing pages and customised in both content and design as needed. The workflows were carefully ideated to support, not obstruct, the work of the marketing teams, ensuring they remained actively involved throughout the process. To maintain full control over the generated pages and unlock the flexibility of CSS, the tool was developed without relying on external frameworks, making it possible to expose advanced styling options in a way that remained accessible to non-technical users, while also giving us complete control over the DOM elements.

Since the solution was an internal tool for the company, analyzing user workflows, needs, and problems was highly accessible, we simply needed to ask colleagues from other teams, allowing us to deliver a solution closely tailored to their needs.

Understanding of the users’ workflows.
Worked closely with the marketing teams to understand how they create and manage landing pages and identify their pain points.
Definition of requirements.
Defined key needs and priorities, balancing speed, customization, and usability for non-technical users.
Design of prototypes.
Created wireframes and interactive prototypes to explore intuitive workflows and interfaces.
Validation of designs.
Tested prototypes with marketing team members to gather feedback and refine the designs.
Implementation of designs. 
Actively participated in the development process, working alongside the engineering team to bring the final designs into a fully functional tool.

Early Protototypes of the tool

Exploration of the User Experience for the Layout Options

Figma Components

Visual Designer

In order to provide non-technical users with all the options to edit landing pages, the way these options were displayed was very important. It was crucial that the preview of the elements in the editor looked exactly the same as the final generated page, allowing users to see changes live in the preview.

To enable users to edit the elements, a sidebar toolbar presented the various CSS options in a simplified way. These options adapted depending on the type of element selected. Additionally, a simpler set of controls was provided directly on top of the element through a more minimal toolbar.

Finally, to speed up the process, an option to add predefined sections was included, allowing the marketing team to insert ready-made sections directly into the designs.

UI design of the quick access toolbar for elements selected

Screenshot showing the predefined sections

Expert Mode

Dealing with all the options that CSS can provide was challenging while trying to maintain a simple presentation. However, some complex options were still necessary for special cases. That’s why an “Expert Mode” was included.

This Expert Mode is a general toggle located at the top of the designer. It changes the number of options and how they are presented in the sidebar for each type of element, allowing advanced users to access more complex settings while keeping them hidden from non-technical users. This ensures a cleaner and easier-to-understand experience for everyone.