Unlocking $2M ARR by Automating Enterprise Workflows

Implementation took months per customer—our CTO had to hand-code every custom workflow. This bottleneck was costing millions in delayed revenue and lost deals.

We created a visual, drag-and-drop workflow builder that let implementation managers configure complex approval flows without code. We also added templates so customers could self-serve common scenarios.

Impact

• Reduced implementation time from months to hours.
• Drove $2M ARR growth.
• Eliminated engineering bottleneck—no more hand-coding required.
• Empowered non-technical users to build enterprise-grade workflows.

Role

End-to-end product design, from research with implementation team through final UI and templates.

Approach

Since the product itself required a very high level of interactivity we decided to skip designing in Figma or other static tools and go straight to developing a working prototype. We used one of the standard libraries that offered this functionality out of the box, which allowed us to move fast, validate ideas first, and polish later.

In practice we reversed the typical design process: first we designed and built a working version, then ran usability testing on the live prototype, and only after several iterations did we polish the UI and apply the Yokoy design system.

We also formalised the underlying state machine: defining status nodes such as New, Draft, In approval, In review, Needs revision, Ready for export, Exported, Rejected, and Archived, supported by dedicated Condition, Activity, and Approval nodes.

Research & Testing

We ran two rounds of testing: 8 participants in the first round with the initial iteration of the workflow designer, and 5 participants in the second round with the same flows styled using the Yokoy design system.

The core scenario: imagine you have to configure a cost object approval flow for an invoice customer using the workflow configurator. Participants uploaded a provided file, explored the canvas and toolbox, and then adapted the flow as requirements changed.

It's ugly but it works

Our prototype stared as very primitive and didn't look very good, but it worked. We had a working prototype that we could test with users.

Analysis Summary: Workflow Configurator Usability

The workflow configurator suffered from conceptual misalignment and UI friction. Users applied mental models from desktop applications (save/open) and standard flowcharts (start/end), which the tool in its early version often violated.

Core pain points

• The "Condition" node paradox: users intuitively expected logic like "all" vs "any" approvers to be a property inside the approval node, not a separate structural box.
• Actionable vs. static connections: people were confused by line styles and did not know when a line represented a simple path versus when it required a manual user action like clicking "Submit".
• System verbs & logic: labels such as Edit, Download, and Upload created fear of loss; users wanted Duplicate, Save, and Open instead.
• The "black hole" effect: users felt trapped in detail views without clear Back or Exit buttons, and the lack of a way to "test" a flow before publishing created high anxiety.

Actionable Improvements

Based on testing we created a prioritised improvements list.

High priority quick wins

• Rename verbs: change "Edit" to Duplicate, "Download" to Save, and "Upload" to Open.
• Standardise lines: use solid lines for all paths and add a label or badge (for example "Submit") on lines that require user action.
• UI safety: add a Back arrow in the node detail view and enable the Delete key.

Structural & future improvements

• Visual anchors: add explicit Start and End nodes and apply the Yokoy design system for a less "primitive" feel.
• Validation: prevent saving a workflow if a node is missing a required action or connection.
• Test mode: provide a sandbox to run an invoice through the logic before going live.
• Grouping: allow grouping of nodes into containers to hide complexity in large flows.

Managing Complexity with Grouping

Large enterprise workflows quickly became visually overwhelming. To keep them understandable, we introduced grouping and node containers that collapse complexity into meaningful chunks.

Instead of seeing dozens of individual steps, users could work with logical units — for example a “Cost object approval” group or a “Tag approval” group — and expand only the part they needed to adjust.

Power Features for Power Users

Advanced implementation managers pushed the tool hard and quickly surfaced a set of “power features” that would turn the designer from usable into indispensable.

• Test / run mode: simulate an invoice running through the flow and show exactly which path it takes.
• Versioning & history: see who changed what and when, and roll back if needed.
• Better debugging: surface which workflow processed a given expense or invoice for faster support.
• Cleaner lifecycle management: archive and delete unused workflows, and clearly distinguish published vs. drafts.

Pro Features: Expanding Monetization

We expanded monetization by turning the workflow designer into a tiered product. Pro features gave power users and larger accounts a reason to upgrade while keeping the core builder accessible.

• Templates: Pre-built workflow templates for common scenarios (e.g. cost object approval, PO vs non-PO flows) let customers self-serve and get value faster—templates became a key pro offering that reduced implementation time even further.
• Locked nodes: Advanced condition and activity nodes (e.g. custom logic, supplier-based rules, matching alerts) were placed behind the pro plan. Users could see them in the palette and understand what was possible, but adding them to a flow required an upgrade.
• Clear upgrade path: By keeping the free tier fully functional for basic flows and surfacing pro nodes with clear lock states, we created a natural upgrade moment when teams hit complexity limits.