Machine Readable Design

machine readable design

Project type

Development of a machine-learning tool for automated email block assembly and layout optimisation.

Contribution

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.

My Role

Product Designer

Outcome

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.

Overview

Context at Wunderkind

In a quarterly project at Wunderkind, driven by my keen interest in machine learning and JavaScript, I embarked on developing a machine-learning tool. This tool, designed as a scalable proof-of-concept using Brain.js, aimed to optimise email design processes from a business perspective.

Problem Statement

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.

Solution: Automated Block Assembly & Three-Layer Feedback

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.

Backend Structure

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 Proposal

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.

Demo and Feedback Process

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.

Current Status and Training

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.

Project Structure and Training Approach

Developed in JavaScript using Brain.js, the model was designed for low-resource execution and easy integration with our JavaScript/React platform. The project included an API for input-output processing and an interface for model training and data organisation. The initial training focused on specific sectors, gradually incorporating CS and end-user feedback to refine the block combinations.

Data Manager, Insights, and API Development

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.

Documentation

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.

Confluence page documented with the Machine-Readble-Design Project.

impact

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.

Collaborations

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.