User Flow Diagram Basics

User flows are one of the most helpful yet misunderstood tools in the UX industry today. Some designers avoid them and some struggle to full wrap their minds around them.

But user flows don’t have to be so confusing. Follow along with me as I show you the basics of user flow diagrams.

🏆 //////////// Join my members community to get access to perks:
You can get this starting and ending design file

👋 ////////// Join the Discord Server and meet other creatives

------------------------------------------------------------------------------------

🤝 //////////// My Courses, Templates, Free E-Books, & 1:1 Mentorship

👋 ////////// Follow me on Social

📫 ////////// Sign up for my Monthly Newsletter

------------------------------------------------------------------------------------

🖥️ ////////// I build most of my websites using Webflow

💻 ////////// I host all my websites with Hostinger

🎵 ////////// Elevate your videos with record-label quality music from Musicbed

📸 ////////// The Equipment I use

[calischweder]

I literally searched for this video from you this morning. What perfect timing, thank you for creating this!

[nataliiabulaieva]

Thank you for the video, Jesse! Really love how detailed you were in explaining all nuances of user flow. The only thing I'd add is more context on the website you're creating this user flow diagram for. From what I saw, I gathered that it's most likely an e-commerce website but adding more details on the case study would help me better understand the diagram :)

[BhawinJagad]

Dont you think Figjam could be a better way to showcase this? 🤔🤔

[Elrykkstorm]

Your content is amazing! I love hiw you break you things down in a ckear and concise manner, without losing any of the deeper understanding required.

[kylelewis]

Thanks Jesse, you make not just one diagram but all the diagrams make sense to me finally.
I do not know why I had such a hard time understanding it all.
I really love the idea of combining Wire-Frames, Site-Maps and Flow-Diagrams together.
Also thank you for the tutorial on Flow-Diagrams, you make things simple and really express alternatives and or options, I like that.

[ruksanakabir]

Thank you Jesse.. so clearly you explained it.. I appreciate for it.

[carolinseng]

Amazing summary Jesse! As always. I'll definitely recommend this to my students.

[bmpmusic]

Absolutely informative Jessy! Thanks for a wonderful video on user flow diagram

[Zaeolaowo]

Really glad I found this page today. Thank you for this informative tutorial.

[Nicole-zevc]

Super helpful! Been looking for a resource like this. Did you use a Figma plugin or UI kit for those pieces or just create yourself? Thanks!

[mengqimwangi]

Thank you so much for the explanation! I am working on user flow for my capstone project, this helps me a lot!

[NyuvelUX]

This was very helpful. Thank you so much.

[manpreetparmar]

thank you so much sir for this amazing video. I love the way you have explained the user flow diagram.

[torikaziz]

thanks, you are my savior i will praise you

[smdev]

Thanks a lot for this! Really straightforward and memorable explanation!

[cilabdispod]

Jesse this is the best content of this topic, well you are using figma for creating a user flow diagrame.. do you usually use figma for that? Is there any better suggestion to do so

[vmcfmvct]

That is just an incredibly arcaich flowchart...extremely useful any project in all work areas though

[imani]

Woudl've been nice to have the Figma template

[annanuss]

Thank you kind sir, you're doing wonders!

[heba]

when we use user flow is it at the end of our website ? i mean in which ux process user flow lay