Flow builder: three layouts to pick from

Usability round, step 3, the last screen. The flow builder is where marketing builds an automation: a trigger, then messages, questions and actions on a canvas. audit-automation built a real one (a price enquiry from an Instagram comment, saved to LeadRat): 9 min 57 s, 49 clicks, 16 typed entries. Each option shows that flow at 1440 and one screen on a phone. Pick one, or name the parts you want from each.

What is off now

From the apple-design review of audit-automation's shots of that build (u1shots 02 to 12, 1440), its friction list, and this lane's own shots of the list and a canvas at 390.

What works and stays: steps read left to right with named exits ("On reply", "If no reply"); each card shows the message itself; the test as a chat you play the customer in; the draft saving itself. The canvas keeps ManyChat's colours in every option: his ruling of 2026-07-31, recorded in flow-canvas-tokens.css.

A

One bar, controls at the edge

One bar holds the flow's name, its state as a switch you can flip here, and only Test and Publish as buttons; Undo, Redo and the rest shrink to icons and a menu. The canvas controls sit in one strip at the bottom left, away from the cards, and the step you click opens on the right.

1440 · The LeadRat step open, a field picked from a list

390 · A question step, editing

  • LeadRat fields and the value to send are both picked from lists; typing stays possible for a fixed value. The list drawn is the fields CM already sends (name, contactNo, notes, enquiry); a longer one needs LeadRat's field list.
  • The step says before you test that it needs the contact's phone.
  • A new step lands in view, beside the one it follows.
  • Trade-off: the right panel covers 400 px of canvas while a step is open.
B

A list you read top to bottom

A second view of the same flow: its steps as a numbered list, edited in place, with each branch written under the step it leaves ("If no reply after 1 hour, go to 5"). The canvas stays one click away for flows that branch a lot. ManyChat offers the same as its Basic Builder.

1440 · The list view, step 3 open

390 · The list view works on a phone

  • A straight flow like the price enquiry is built without dragging a wire.
  • The same flow, the same draft: switching views changes nothing.
  • It is the one view that works on a phone.
  • Trade-off: two ways to edit one flow; a flow with many branches still wants the canvas.
C

The test beside the canvas

Test opens a phone at the right: the post, the customer's comment, the public reply under it, then the private conversation. Each step on the canvas gets a tick as the test passes it, so you see where the customer is.

1440 · A test run, waiting at step 3

390 · The test on a phone

  • The test shows what the customer would see, in the order they would see it.
  • What a test cannot do is said in one line where it happens ("LeadRat: would save; needs a phone").
  • The public reply shows, or says why it would not post.
  • Trade-off: while testing, the canvas is 400 px narrower.

In every option

Runs, in words

"Executions" becomes "Runs". Each step is named by its own first words, errors say why, and a row opens that step's runs, not the editor.

NowBecomes
2 runs · 0 finished · 2 going on now2 runs · 0 finished · 2 waiting for a reply
Look at this message · Message · 2 · 2"Hi! Happy to help with prices…" · reached 2 · 2 not sent: the 24-hour window had closed
Look at this actionsSave the lead to LeadRat · reached 1

Plain words on the canvas

NowBecomes
Waiting for Text from the contactWaits for their reply
Reply: Text · first_nameTheir reply is text · Saves to: Budget (the field's name, never its key)
Then go to: not connected yetThen: the flow ends here
In the test: Sent (held: a test sends nothing)In the test: shown, not sent
This is the version that runs now (while Off)Published. It runs when you turn the flow on.
Click a step to edit it (a pill over the canvas)Gone; an empty canvas says it instead

And