Connected Content API Builder

A Hack Day Project

ROLE
Research and Design

TEAM
1 Product Manager, 4 Engineers

DURATION
2 days

IMPACT
Hack Day Award; Became a Future Initiative

Introduction

Hack Days have always been a highlight for me—they’re a chance to step away from day-to-day work, collaborate with new teammates, and explore different parts of the product. I find that kind of cross-functional energy incredibly valuable.

For one Hack Day, a PM pitched an early-stage idea aimed at helping users configure and test API calls that template custom data into Braze messages. I hadn’t worked with this team or product area before, but I was excited to take on a fresh challenge. I teamed up with four engineers, and by the end of the event, we had delivered a complete product brief, detailed UX requirements, a prototype, and a working proof of concept.

About Connected Content

Connected Content is one of Braze’s most powerful personalization tools. It lets brands deliver 1:1 messages by pulling in real-time data from a customer or partner API at send time. When a message is triggered, Braze calls the API and templates the response directly into the message—so each user sees content tailored specifically to them.

It’s a core part of many customers’ messaging strategies, especially as users now expect relevant, personalized experiences. We’ve all received a generic email or push that feels completely off—Connected Content helps brands avoid that by keeping their messaging timely and personal.

Examples

Connected Content is a foundational part of Braze, especially for our most advanced customers. It’s used to power dynamic, personalized messaging at scale. Some common use cases include:

  • Language translations

  • Weather data

  • Exchange rate convertors 

  • Product catalogs

  • Loyalty points and promotions

In a case study, Overstock used Connected Content to send emails and push notifications highlighting recently viewed or saved items when prices dropped. This strategy drove more users back to their website and app, and resulted in email open and unique click rates that were 3x and 9x higher than industry benchmarks.

The Problem

Despite its power, Connected Content can be difficult to work with. Below is an example of the code required to generate a simple line of text: “It is going to be sunny 5 times in the next 5 days.”

Most of the code handles reusable functions—calling the API, managing variables, and setting up conditional logic. The final yellow-highlighted line is where the dynamic content gets templated into the message.

This complexity makes it challenging for marketers, many of whom aren’t comfortable writing or debugging code. Any mistake can result in broken messages or incorrect personalization, making this a high-risk, high-friction task.

By abstracting out the reusable logic, we could significantly reduce the code required to personalize messages—making the experience faster, safer, and more accessible.

What We Knew

  • Connected Content is widely used by our most advanced and high-value customers

  • The current experience isn’t user-friendly—even for developers

  • Key features are hard to discover and require manually writing complex code

  • Competing platforms offer more intuitive, guided solutions

Why a block builder?

Customer Benefits:

  • A plug-and-play UI makes setup more approachable and significantly reduces user errors

  • Visible configuration options and limits reduce reliance on documentation

  • Agencies can easily connect third-party services on behalf of less-technical customers

Internal Benefits: 

  • Fewer support tickets and setup-related questions

  • Smoother onboarding for new partners building Connected Content integrations

  • Reduced on-call engineering load, with more reliable customer requests that stay within size and timing limits

Desk Research: Competitive Analysis

In order to figure out what a builder could look like, we needed to do some competitive and comparative research.

Below is an example from a competitor, with structured inputs, laid out for ease of use.

Desk Research: Inspiration

Here are a couple API builders that the team looked at where you fill out the fields, run the API request, and preview the response.

Concepts

Based on the PM’s requirements and insights from competitive research, I explored a couple of layout concepts. One placed all inputs on the left with previews on the right; the other stacked them vertically. The stacked layout would have required tabs in the top panel to accommodate all inputs, which risked hiding important fields. I ultimately moved forward with the left/right layout, where everything remained visible and easily discoverable.

Next, I partnered with the PM to identify all necessary form fields and incorporated sample code from a common weather use case to complete the mockup below. In the top-left panel, users enter the API URL, configure authentication parameters, and define a response name. The middle section includes options for retry behavior, aborting on failure, and caching. In the bottom-left panel, users can extract specific data from the API response, assign variable names, and save them for use in messages.

On the right, two previews appear: the composed API request and, below it, the API response, complete with status, response time, and payload size. Users can click "Run request" to generate updated previews based on the current inputs.

Leveraging Connected Content

With the new builder, once users compose and save a Connected Content call, they can easily reference it when creating messages—like a push notification. Instead of working with a large, complex block of code (shown on the left), they now just insert a simple reference to the saved call using its identifier.

Prototype Validation

With a potential solution in hand, we were eager to test it. Since this wasn’t an official project and we only had about a day and a half, we couldn’t recruit customers—so we turned to the next best option: colleagues across the company.

We focused heavily on Pre-sales, speaking with four Solutions Consultants. They frequently demo sophisticated Connected Content use cases for prospective customers, understand the need for a plug-and-play builder, and are always easy to pull into a conversation (some of my favorite folks to collaborate with).

We also gathered feedback from Solutions Architects, a Support Engineer, and a Customer Success Manager—since they’re the ones working directly with real customer code and troubleshooting issues in the field.

Usability Script

The PM and I quickly put together a script and scheduled live usability sessions, asking participants to create a reusable Connected Content call to template weather data into their messages. At each step, we asked what they expected to happen before clicking anything, posed open-ended questions about what felt missing or confusing, and gathered feedback on adoption potential, competitive positioning, and the overall impact for customers.

Research Insights

From the internal sessions, we learned:

  • The current process is slow, error-prone, and requires a lot of manual back-and-forth. The new solution eliminates the need for browser extension workarounds.

  • It’s a strong fit for non-technical users, aligning well with our core marketer persona—marketers are generally not comfortable writing Connected Content code.

  • The new design makes configurations much more discoverable. Structured inputs clearly surface all available flags and features, making setup easier to understand and debug.

  • Competitors offer catalog tools that are more marketer-friendly but don’t fully meet the same user needs.

  • Participants ranked this solution among the top three improvements that would make marketers’ lives easier—alongside better email and in-app message editors.

  • The solution will improve demos: about 75% of Solutions Consultant demos involve Connected Content, and as one person put it, “I always hide the Connected Content code and hope they don’t ask to see behind the scenes.”

Final Design

 

🏅 Hack Day Award for Customer Project 🏅

After presenting our full-featured design alongside a working POC built with Braze’s Beacon Product System, we were honored with an award in the Customer Project category, earning recognition across the company.

Outcomes

We didn’t just deliver a prototype and POC—we also prepared all the research insights and next steps, setting the stage for a team to carry the project through to launch. The PM and I had already synthesized and saved user session recordings and transcripts, and we had identified customers for additional research and early access testing.

Here’s what we handed off:

  • Refined prototype with team alignment and buy-in

  • Functional POC covering core UX flows

  • Synthesized and archived internal user session recordings and transcripts

  • Identified target customers for further research

  • Documented additional use cases for future consideration

  • Wrapped up specs and design to-do’s

For the next phase of research and design, we nominated accounts by pulling from:

  • Customer Success Managers’ recommendations in Slack

  • Direct customer feedback collected in Productboard

  • Looker data, including:

    • Largest accounts using Connected Content

    • Connected Content users with the highest Committed Annual Recurring Revenue

    • Accounts running the most campaigns/canvases with Connected Content

    • Customers using campaigns/canvases with rate limits and retry/cache configurations

Reflections

  1. This project required a good amount of technical onboarding. While I had designed API builders in the past at Wolfram, the output and usage within Braze messages brought added complexity.

    It was incredible to see just how many high-value accounts rely on this feature—and to understand how central it is to Braze’s platform. The Connected Content builder has the potential to help teams personalize messages faster and with greater confidence, reducing errors and saving time. By enabling true 1:1 personalization, it helps brands deliver thoughtful, relevant experiences that resonate with customers around the world.

  2. I’ve always loved Hack Days, and this was one of five Hack Day awards I earned during my time at Braze. I even joined the committee tasked with improving and streamlining the program. We made it more inclusive by inviting people across the company to pitch ideas and come together to build them—and we later expanded the initiative into team-level innovation weeks. I also discovered just how eager engineers are to be part of the design process, often overflowing with ideas they just need help visualizing.

  3. I believe these moments of innovation are incredibly valuable, fostering a collaborative and creative environment. This project gave me the chance to explore new areas of the product, connect with new colleagues, demonstrate the impact of design, and showcase the strength of our Beacon Design System.

  4. Most importantly, we moved fast. The progress we made in just a few days is a promising signal that the dedicated product team can pick this up and drive it all the way to launch.