Context
Moxo (formerly Moxtra) is a business collaboration tool that helps businesses collaborate with their clients through branded apps and websites. In previous updates, we introduced the ability for companies to create and assign "action items" to their clients.
Action items can be created and shared within any conversation, simplifying complex interactions and improving auditability.
These action items were designed to formalize standard business processes, such as requesting a signature, getting approval, or requesting files. While these action items were generally well received, they were often overlooked in the conversation and did not work well in scenarios where businesses needed to assign many action items.
Action items shared within the chat were often buried by ongoing conversations, making them easy to forget about.
Flow Conversations
Our team was tasked with designing a new feature called flow conversations, intended to improve businesses' experience working with clients on more advanced projects. Flow conversations consist of multiple assigned action items required for conducting business and chat functionality to ensure easy collaboration.
My primary focus for this task was building the flow template library and template creation experience.
Flow Template Library
For the initial release, businesses can only initiate flow conversations through templates. Shockingly, the flow template library is where they view, manage, and create these templates. Each template is represented by a card object that contains high-level information for each specific flow template.
Clicking anywhere on the card directly opens a preview window of the template, while hovering reveals shortcut buttons to either use or edit the flow template.
Creating Flow Templates
To create a new flow template, the user begins by giving it a name and an optional cover image and description. They also have the option to keep the flow template private or share it with their team. The second step is to define the roles (e.g., Customer, Financial Advisor, Realtor, etc.) that will participate in the flow.
After entering this basic information, the user is taken to a full-screen page to continue creating their flow. The left panel has three tabs:
Add Tab: Contains a list of drag-and-droppable action item types that the user can use to build their flow.
Roles Tab: The user can add, edit, or remove roles as needed while building their flow here.
Details Tab: All previously entered basic information can be reviewed and edited in this tab.
While the roles and details tabs redundantly allow users to enter the basic information they previously provided, adding the initial step of asking for it upfront was essential to keep them from dropping into the builder empty-handed. Asking for those details ahead of time encourages the user to begin planning out their workflow before dropping them into the builder, and adding the tabs into the builder ensures they can adjust things as necessary in the process.
The workflow itself is built and previewed in the center canvas. Actions are added to the workflow by dragging them from the left panel or clicking the plus buttons between steps within the flow. Additionally, the starting point of the flow has an option for adding an optional welcome message that populates the chat panel upon creating a flow conversation via this template.
After dropping an action type into the workflow, users can select from templates they previously created to autofill the details or manually enter them to create an action from scratch. Regardless of their choice, the user is then taken to the action creation interface to enter or adjust the action details and, depending on the action type selected, map the roles of the action template to the roles of the flow template.
Once an action is added, the user can drag it around to change its order in the workflow or click it to open its preview to the right. Hovering on an action reveals three quick actions: edit, duplicate, and delete.
The top right of the canvas contains a toggle to choose whether this workflow can be completed in any order or should run sequentially. In the future, as more advanced configuration settings are added, this option will likely be relocated. For now, the goal was to make this configuration setting readily apparent and easy to access.
Conclusion
Initial feedback on flow conversations and the flow template builder was positive. Streamlined collaboration on complex business processes between companies and their clients helped reduce lost business opportunities.
Future work on this feature will primarily focus on supporting more advanced use cases and features, such as support for automation, variables, and branching workflow paths.
