Flow Builder
Background
Postscript is a company that focuses on SMS marketing and helping ecommerce brands design and operate SMS programs that keep users engaged and happy while driving substantial new revenue. During my time there, I worked on various projects including one called Flow Builder. The flow builder tool was a way for our users to create campaign flows, a way to send single-message or multi-message campaigns to a specific customer segment or an entire subscriber base. For example, one of our users might use flow builder to create a campaign flow to build hype around a product launch or send subscribers curated content like holiday recipes, makeup tutorials, and more. My team and I built this project using react flow and react-dnd, which allowed for draggable pieces that would allow users to create a visual tree of events for the campaign flow.
The Product
Upon creation of the campaign, the user would be directed to first select the segment that they wanted the messages to eventually be targeted towards. Another neat thing about it was that Flow Builder is a visual tool, so the users configure the actions by clicking and dragging. So, afterwards the user would have a couple of actions that they could drag onto the grid to symbolize the flow of events they wanted for their campaign. These actions were: Send Message, Delay, A/B Split, and Wait for Event Split.
Send Message
With the send message action block, upon the user dragging the action block onto the flow would have the option to fill out input field that would become the copy that would eventually be sent to users. In this input field we indicated to users when 160 characters would be reached so they would be aware that it would be sent in multiple messages and also gave customers the option to customize their text further by giving the option to add emojis, tags, and other specialized characteristics.
Delay Action
The delay action block gave users the option through an input field to select a certain duration of time whether that be days, minutes, or hours that indicated the waiting period between sending a message or another action that the user separated it between in their flow.
A/B split action
The A/B split action gave our users the option to break out their segment into divided parts. So for example, half of the previously selected segment could experience one flow and receive one form of a text message while another designated segment would receive the other. With this feature we gave users the option to distinguish what exact percentage they wanted their user segment to be broken up into. We also gave users the option to break out into more than two branches and provide even more different flows. AB Splits work simply by tracking a list of numbers, like [33, 33, 34], each of which corresponding to the likelihood of a branch being activated. The number of numbers is the number of branches. We just save that to the action, and the BE randomly assigns subscribers to each branch depending on the likelihood. the FE is only responsible for tweaking those numbers, nothing else
Formik was used to control all the data that a user could use to configure each step, so depending on the type of action we could enforce certain rules to ensure that data was all sensical and valid. Formik also handles our error states, in conjunction with Yup for writing the validation rules. When saving a valid Formik form, that data is then saved to the overall Flow state, which is the whole flow: the actions, the title, etc.
