Development of a machine-learning tool for automated email block assembly and layout optimisation.
Led the creation of a scalable tool using Brain.js to automate email design processes. Developed a JSON-based backend structure for block specification and a model for assembling designs based on various business metrics. Established a three-layer feedback system involving Designers, Customer Success Managers, and End-Users.
Streamlined email design process, enhancing layout accuracy and efficiency. Facilitated data-driven design decisions and improved project initiation for designers. Presented the tool to stakeholders, demonstrating the potential of machine learning in design optimization.
Our designers traditionally created emails by assembling pre-designed blocks (heroes, product grids, etc.) into a cohesive layout. Each block's customisation was manually determined by our designers, adhering to best practices.
However, when text updates occurred post-design, there was no automated system to re-adjust these blocks, leading to potential layout imbalances.
The core idea was to automate the assembly of these blocks, enhancing the accuracy of email layouts. This automation was augmented with a three-layer feedback system involving Designers, Customer Success Managers (CSMs), and End-Users. Designers would focus on creating a comprehensive library of blocks, and the machine-learning model, utilising data, would arrange these blocks optimally.
The email assembly was governed by a large JSON file containing specifications for each block, identified by unique IDs. I developed a snippet to convert these IDs into intuitive shortcodes, simplifying interpretation for users and facilitating model training using one-hot encoding. For instance, 'Standard Hero' became 'H1', 'Half Left Hero' as 'H2', and so on.
The solution proposed using inputs like vertical, industry, region, and strategy to generate layout recommendations. These meta-layouts were constructed by combining individual blocks, considering our best practices.
The feedback hierarchy prioritised End-User interaction, CS conversion insights, and Designers' perspectives on brand alignment and accessibility. This system allowed designers to start projects with Agent Recommendations, promoting a data-driven creative process.
Our goal was to establish an independent platform for managing data and creating layouts, functioning as a Data Center apart from Studio. This platform would offer testing, editing, and previewing capabilities, with an API for feedback integration and dataset quality improvement.
The data manager facilitated dataset manipulation, while the insights feature enabled analysis of input-output relationships. Future API development plans included enhanced data point saving logic, expanded insight features, and the incorporation of pre-trained models and transfer learning.
The API has been built by using express.js.
To ensure that the project's details are always available even after the presentation with the stakeholders, I documented the in Confluence (Atlassian) all the necessary information and resources that will help project manager, engineering and other individuals involved with the Machine-Readable Design project.
The documentation included information such as goals, problems I tried to solve, process to scale the proof-of-concept and all the necessary resources for designers and engineerings.
After presenting this to the stakeholders, they decided to use the proof-of-concept and adopt the idea as first stage of machine-learning implementation into the beta platform. It has been added in the roadmap of the large project, and used to generate email layout for clients based on their data and company best practices.
This project has been made by collaborating with the Innovation Designer and presented to the stakeholders such as Product Mangers, Product Designers, UX Engineers, Staff Engineers and the AI and ML Team.