Email newsletter visual composer
mindbox
About the Project
Mindbox is a large international marketing automation platform.
About the Task
The platform already had an existing solution for creating emails used in email campaigns. This was an inherited solution that couldn't be flexibly customized to meet the platform's needs, had rather limited functionality, and was difficult to expand in any way.
Previously used solution
Work Done
  • Competitive analysis: Gathering and analyzing references
  • A large number of screens were designed, including the Canvas, block gallery, template gallery, each setting for every element, and many states of these screens, as well as their adaptation where needed
  • 3 new components were added to the design system, and 2 were refined
  • Acceptance of the implemented solution

Multiple usability tests:
  • Basic interaction with the canvas and general style settings
  • Text settings, product cards, and other frequently used elements
  • Automatic product placement
Canvas Functionality
After analyzing competitors and gathering references, the first versions of the canvas were created, which were then used for initial testing.
Canvas on the first usability tests
Work Done
  1. It became clear that the sidebar with blocks should open immediately since this is the first action in 100% of cases. Users need to see what blocks they can add right away.
  2. The canvas looks empty and unclear. Since the email always has a fixed width and there's text on the canvas saying "Drag to the workspace," this area should be displayed.
  3. The duplicate buttons for the shortcut keys Command + Z and Command + V were at the bottom and were not noticeable. Plus, in other sections of the platform, they are typically located elsewhere. They need to be relocated.
Open drawer with blocks and the moment of pulling onto the canvas
Drag a new block when there are already other blocks
After the implementation of the first version of the canvas, minus #4 appeared: drivers with settings and with new blocks partially cover the canvas. And this implementation was only suitable for large screens. On small screens, almost the entire work area was covered by drivers. And here it was necessary to come up with a solution

Solution:
The final version of the blank canvas
Redrew the plug, showing the work area itself. Moved the cancel buttons. And most importantly - the canvas moves depending on whether we have the left driver open, the right one, or everything is hidden
When something is selected on the canvas
This change helped improve the experience on smaller laptops, added a nice way to interact with the canvas, and generally improved the user experience of the designer workspace.
Padding Settings

Padding for Elements and Blocks

Each element on the canvas needs to have adjustable padding since we can't move them like in Figma, but they still need to be positioned properly. The standard tools available in our design system won't work here, as it would result in four consecutive dropdowns with long labels. So, I looked for references.
Made on
Tilda