When it comes to driving stronger marketing performance and deepening customer relationships, the channels that marketers use really matter. And while out-of-product channels like email and push notifications tend to get the most attention, few customer engagement programs are able to see their optimum performance without incorporating in-product channels like in-app messages (IAMs). From guiding customers through onboarding flows to driving subscriptions and feature adoption, IAMs are a powerful tool for engagement that allow brands to reach users when they’re most engaged and ready to take action, making it possible to amplify the impact of their marketing campaigns.

At Braze, in-app messages have been part of our customer engagement platform’s channel mix since day one, but we’re always looking for ways to help marketers get more out of this impactful channel. Back in fall 2022, we launched a new drag-and-drop IAM editor, inspired by a prototype created during one of the product and engineering organization’s regular Hackathons. And since then, our team has continued to build features to bring additional flexibility and ease of use to our customers. Let’s take a look at how this key product has evolved over the past 18 months and what impact those changes have had.

Evolving our drag-and-drop IAM editor: Building editable template support

Taking a new feature like the Braze platform’s drag-and-drop in-app message editor and deepening its capabilities to improve its usefulness and performance is an involved, iterative process and one that requires a significant amount of thought and collaboration to get right. In order to ensure that we bring value with each new feature we introduce, the Braze product and engineering organization embraced two key goals for the drag-and-drop editor:

• Replicate parity features from the Braze platform’s classic in-app message editors

• Introduce net-new capabilities to the editor that would make message creation an even better experience for our customers

You can see these goals play out in a significant update to the drag-and-drop IAM editor—namely, the introduction of editable IAM templates. Read on for a look at the development of this new offering:

1. Take customer feedback as a starting point

After we created the first iteration of the drag-and-drop IAM editor, we worked with customers to get feedback on that initial version, in order to support ongoing adjustments to the feature. One key thing that kept coming up during these customer conversations was the need for templates.

At launch, we’d paired the drag-and-drop IAM editor with a few out-of-the-box templates, such as a phone number capture form. But we hadn’t launched our minimum viable product (MVP) with a composition experience that would allow brands to save and manage any templates that they might create themselves; that meant marketers had to duplicate existing messages as a workaround to make up for the lack of template customization options.

It was clear after digging into the pros and cons of this approach with customers that supporting editable templates would allow them to save significant time and resources as they built and customized their in-app messages. The question was just how to do it.

2. Gather insights from the inside out

While the drag-and-drop IAM editor is a comparatively new product, the Braze platform has supported templates in other parts of the product. As we explored how best to implement editable templates for in-app messages, we looked at the existing patterns for templates that were already in place within the Braze product, specifically our existing email and webhook templates.

We knew as we worked to develop this new feature that it was essential to ensure that the templates would simplify our customers’ current workflows, rather than complicating them. To do that, we took inspiration from our products and other similar template experiences, allowing us to produce templates that felt familiar and intuitive for current and future Braze customers alike.

The output from this effort by Product Design was the creation of a brand new visual library built to showcase and store templates for use in the drag-and-drop IAM editor. In order to match the experience to our existing templates and to make it easier to apply this work to other channels in the future, we built the library using a component from our Beacon Product System; that streamlined the process and did a lot to help maintain a consistent look and feel for marketers who were already using templates elsewhere in the Braze product.

3. Implement pair programming for Engineering and Product Design

To successfully carry out this sort of project, it’s essential to find ways to support a successful, efficient partnership between Product, Design, and Engineering teams. As our organization worked to rapidly iterate on our drag-and-drop IAM editor over the past year, we adopted a strategy that did a lot to help our teams work together more efficiently: Pair programming.

Pair programming traditionally refers to situations where two or more software engineers sit together at a given workstation and program together. At Braze, we expanded this approach to cover direct collaborations between engineers and product designers to support the effective creation and refinement of our new templates feature. Our version centered on a regular meeting between the relevant stakeholders on those teams to review work-in-progress designs and technical challenges. As Kimie OuYang, a Senior Product Designer at Braze says, “That’s the time I can show my design progress, share prototypes, and get feedback from our developers to understand how difficult a feature would be or if there is anything I missed that is not scalable.”

We found that taking this approach did a lot to support a seamless transition when the time came to bring our prototypes to life. Because we were meeting and communicating across teams so consistently, by the time our team was ready to write user stories and start on development, we found that Engineering was already bought into both the user problem we’d identified as well as the design solution. It’s important to note that these meetings aren’t just about conducting design reviews; we also use them to hold engineering brainstorms to improve code structures and detangle complex technical challenges outside of the regular development cycle. They’ve been so successful that we now schedule them regularly on our calendars and use them as a vehicle to build rapport within the organization.

4. Embrace cross-team usability testing to validate success

Once we had the prototype in a good place, it was time to pull in a new team: User Research. That team worked with us to oversee usability testing for the drag-and-drop IAM templates in order to validate our solution to the user problem and to gather high-level insights that we could use to guide further evolution of the feature.

“The in-app message team laid a foundation for this as a workflow that [our] customers really like,” said Audra Wingard, Senior UX Researcher at Braze. “One of the questions we asked in those interviews is, ‘Would [the templates] work for your other channels?’ They said yes. So this is a very good foundation for [other Braze teams]...who are now exploring templates and figuring out how that will work in their context.”

This sort of research is always an invaluable opportunity for us to see how users are interacting with a new feature—either in a prototype or a demo environment—and gather actionable feedback in real time. In this case, the usability testing sessions gave us the feedback (and a vote of confidence) needed to help us make the final required tweaks and improvements before we released this feature for general availability. Plus, as Audra noted, User Research was able to immediately pass along the insights captured during our usability testing to other Braze teams, helping to inform additional template initiatives across the organization.

Final Thoughts

Our organization’s work on building out the template library for the Braze platform’s drag-and-drop IAM editor served to solve a key user issue, thanks to careful collaboration across multiple teams. But that effort is just one example of the many initiatives in flight at Braze to drive even stronger ease of use across our products. Going forward, our teams will continue to partner and share learnings in order to build on this foundation for our different product areas.

Want to learn more about the Braze Product, Design, and Engineering (PDE) organization and how we work together to support smart, scalable product development? Check out this piece from Brian Wheeler, SVP, Engineering, Braze.

Interested in working at Braze? We’re hiring for a variety of roles across our Engineering, Product Management, and User Experience teams. Check out our careers page to learn more about our open roles and our culture.