If you started with a template or an existing flow, you can begin by testing how the flow currently works. You can then make changes to the structure to bring it in line with what you’re imagining.

If you’re starting from a blank slate, the process is more open. A good way to begin is to prototype the front-end experience first. You can use the HTML Form capability of an HTTP connector to represent user-facing pages and the Custom HTML Message capability of another HTTP connector to represent messages displayed to the user. Use these capabilities to build a prototype and figure out how you want users to progress. Test the user experience to make sure it matches what you imagine.

Using the HTML Form capability of the HTTP connector is a great way to prototype user inputs without having to write any HTML code. For messages displayed to the user, the Custom HTML Message capability provides a quick way to print out data. As you get closer to making your flow pixel perfect, you can substitute in the Custom HTML Template to give you full control over the HTML, CSS, and JavaScript.

After you have the user-facing piece assembled, you can add nodes to perform backend actions and replace the test HTML forms with pages that match your style and branding.

To map out the logical execution of your flow, start by using the Functions connector. This allows the logical evaluation of outputs from previous nodes to determine forks in the flow. To make your flow more functional, you can add REST API calls or connectors that can interact with external systems.