Drag-and-drop editor

Researching, designing, and building a proprietary drag-and-drop editor for Braze in-app messages and other future applications.

ROLE
Research and end-to-end design

TEAM
PM, EM, 5 Eng, part time shared UXR resource

Introduction

This project was a later large phase of the broader multi-year vision for in-app messages. The team spent three years building technical and UX foundations, alongside new features, that culminated in the building of a drag-and-drop editor.

This editor features a third-party tool, with a completely custom implementation. This integration was designed to be flexible, as it is to be used in other messaging channels and landing page builders. Because of these technical and UX requirements, the project spanned multiple quarters, with various Beta, Early Access, and GA phases.

Team Vision

For teams to engage with their consumers in a contextual, relevant, and delightful manner.

Team Mission

Provide teams with intuitive, powerful tools that enable them to design, compose and deliver relevant, on-brand messages within their products.

The Problem

Braze customers today have no easy way to build and personalize In-App Messages for their core use cases.

Workarounds often require custom HTML code for content customizations. This results in a frustrating editing experience with limitations on how on-brand and sophisticated their messages could be.

From a customer: “We feel that in-apps are not flexible in terms of editing it, even the text is not flexible to include bold and italic for example... also we would love the option to include text before and after the button not only before.”

Process Overview

This project from beginning to full GA launch covered multiple quarters, as there was significant time spent investigating and integrating a 3rd party tool. The large engineering LOE allowed ample time for PM/Design to iterate and test various prototypes and functioning POCs.

Target Use Cases

Long term, non-technical marketers want to create better onboarding experiences for their users without engineering help, like:

• New Feature Announcements

• Promotions

• Recommendations

• Push Primer

• Custom Data Collection

MVP User Journey

Goals

• Build a new WYSIWYG editor to compose and customize in-app messages. Metrics:

  • Increase editing CSAT

  • Increase IAM adoption rate

  • Reduce total # of HTML IAM campaigns

• Build a new template library for teams to create, edit and curate templates with ease. Metrics:

  • Reduce campaign setup time

  • Increase IAM adoption rate

• Revamp the in-app message composition experience to be seamless. Metrics:

  • Increase editing CSAT

Vision

To kickstart the project, we painted a high level and long term vision of how a drag-and-drop editor could look in the product. This mockup uses an existing 3rd party tool used in the email editor. In the end, we went with another tool, but this was familiar to the team and met the basic requirements, so we used it as a guiding light.

Hack Day

While the team kicked off the project, an engineer and I took the opportunity to create a POC of the design above during a company-wide hack day. Defining the UX and integrating a third party editor within one day (and winning a Hack Day prize!), we proved that this specific editor is viable and might meet customers’ needs.

Design Iterations

Below are a collection of various design iterations, made as we progressed through multiple user testing rounds. They began low-fidelity, and got further refined as we gained confidence in our solutions.

Round 1: Established the basic editor structure and feature requirements

Round 2: Validated the contents of the right panel for each block type

Round 3: Reskin right panels

Round 4:

Early Access → General Availability

Release of the editor went fairly smoothly, with positive reception by customers. For the first set of customers, we conducted live usability testing

EA Requirements: Users can create and launch a basic modal in-app message using the drag-and-drop editor. This includes:

• Setting global message styles like font family and text colors

• Dragging and dropping rows and blocks (image, text, button, spacer)

• Customizing individual rows and blocks (size, color, spacing)

• Previewing on devices and sending test messages

Eligibility to move to GA:

• Essential updates based on EA feedback

• Revamped styling options and fields (right sidebar)

• Basic Template Library with modal and fullscreen

• Satisfactory stability and performance

Final Designs

Outcomes

??Competitive innovation, new use cases unlocked, improved ease of use, established UX foundations

• Wins

  • This editor has since been integrated into four other channels’ composers

• This MVP set the team up for more potential wins, with lots of opportunities to improve the editor, like:

  • Further refinement of the style panes, with more controls and smoother UX

  • Addition of features like new block types and robust device previews

Reflections

• The editor was fully customizable, so we had to be very deliberate with the work we took on.

• There was a lot of work put into the modal template itself