In my previous post about HandyFEM user flow I used Figma and ChatGPT to create a user flow for may app. This time I asked claude.ai, and I've got a much more complete version.
First of all I explained Claude all about my app, and I tried creating a prompt to create my chart in RapidChart, because I saw a post about it, but unfortunately it didn't work as expected, the chart was never built, and I tried several times, I even tried to make a smaller one, but nothing was built at all.
So I asked claude.ai for alternatives to RapidChart, and I decided to give a try to Mermaid.
It gave me a good enough result, already more complete than what I've done before, but with less visual references... so I copy/pasted my previous diagram and suggested to integrate both ideas.
new diagram:
Color-coded:
Yellow = Buttons
Light blue = Forms
Teal = Screens
Purple = Decision points
Blue = Professional UI
Green = Client UI
Red = Admin UI
Gray = System processes
The diagram shows the actual interface elements and navigation flow, making it practical for your developers to reference when building the app!
(Disclaimer: I had to iterate a few times in Claude, to get the correct flow, as the admin flow was incomplete).
The following image is just an unreadable screenshot for a reference, it was too large to attach in real size:
UI/Navigation flow and User journey flow:
Top comments (0)