# Why I made a flowchart canvas the main journey editor instead of a step list

In NxtForm I made a vertical flowchart the default way to build candidate journeys, with the old step list kept as a second view, because a list hides who goes where.

**Project:** [NxtPeople](https://www.superflow.design/work/nxtpeople.md)  
**Date:** Oct 2026  
**Themes:** [UX patterns](https://www.superflow.design/decisions/topic/ux-patterns.md), [Forms](https://www.superflow.design/decisions/topic/forms.md), [Data-heavy UI](https://www.superflow.design/decisions/topic/data-heavy-ui.md)

## Context
NxtForm is the module of NxtPeople, a multi-product HR SaaS platform, where recruiters build candidate journeys: question flows that candidates fill in to apply. The editor was a list of steps with question cards. Journeys are rarely straight: an answer can send a candidate to an extra step or end the application, through tags attached to answers. In the list, those routes were invisible.

## Options considered
- **Keep the step list and improve it**: familiar and dense, and cheapest to build. Routes stay hidden in tag fields, so recruiters cannot check who goes where without reading every question.
- **A document-style editor with inline "when / then" rules**, as Tally does: fast to type in, but branching still reads top to bottom, and drop-outs are easy to miss.
- **A flowchart canvas as the main view, with the list kept as a second view of the same journey**: shows structure and routes directly, but it is the most expensive part of the build and needs layout rules so it does not turn into spaghetti.

## Decision
I chose the flowchart, called "Path", as the default, and kept the list as "List". Both edit the same journey and share the same detail panel on the right, so switching views changes how you look, not what you can do. This follows Typeform, which lets you build in a list and see logic on a map.

I set four rules to keep the canvas readable:
- The path runs top to bottom, so a straight journey still reads like a list.
- Only answers that change the route get a line. Tags that only store data draw nothing.
- There are two kinds of route. A detour (orange) sits in a side lane and returns to the main line. A drop-out (red) runs to the "Sorry" ending.
- Labels show the answer text, never the technical tag.

Routes are set in the panel with a "Goes to" dropdown per answer, not by dragging lines. Most recruiters are not comfortable drawing logic on a canvas, but everyone can use a dropdown. A "Test path" switch lets you pick answers like a candidate and lights up that one path.

## Outcome
Too early to measure. The canvas exists as a clickable prototype and a build brief, and still needs sign-off from the senior design authority. Two signals will show whether it was worth the cost: how many journeys use routes at all, and whether recruiters stay in Path or switch back to List.

## What I'd do differently
I would pull the routing data before designing the canvas, not after. If most journeys turn out to be straight lines, the list should be the default and the canvas the extra. I would also check earlier whether routes are stored on the question or on the step, because the panel design depends on it.

## Images

![Old NxtForm editor. Left: a narrow list of steps with question titles, technical labels like 'template id 21' and placeholders 'geef module titel in'. Right: wide question cards with 'Heeft vraagtype', 'Heeft tags', 'Heeft property', paging 'pagina 1 van 5' and a red banner 'Er zijn enkele fouten gevonden'.](https://www.superflow.design/_astro/before-list-editor.DXahwsqS.png)

Before: the journey is a flat list; which answers lead where lives in tags you cannot see.

![New Path view. A vertical line of step cards. From the question 'Hoeveel personen heb je ten laste?' orange dashed lines lead to two narrower detour steps on the right, labelled 'Partner' and 'Partner – andersvalide · Kinderen – andersvalide'. A grey line labelled 'terug naar hoofdlijn' returns to the main line. A red dashed line labelled 'Nee' leaves 'Kan je in het weekend werken?' on the left. The right panel shows a table 'Antwoorden en routes' with a 'Gaat naar' dropdown per answer.](https://www.superflow.design/_astro/after-path-with-routes.Bm2scCkw.png)

After: detours, the return to the main line and drop-outs are visible at a glance; routes are set in the panel, not drawn.

![List view of the same journey. Steps as cards with all questions visible. Detour steps are indented with an orange label 'Alleen bij: Partner'. Under the routed question, short lines read 'Partner → Inkomen partner'. The right panel is identical to the Path view.](https://www.superflow.design/_astro/after-list-view-same-journey.DEMycoYQ.png)

After: the list stays as a second view of the same journey, with the same panel, for people who prefer it.

## Related decisions

- [Why I made editing a separate workspace instead of a tab](https://www.superflow.design/decisions/editing-as-workspace-not-tab.md): In NxtForm I moved journey editing out of the tab bar into its own workspace with a clear entry and exit, because a tab hides that you are changing something candidates use.

## Facing a decision like this?

[Book a free sparring session](https://www.superflow.design/contact)