I had been experimenting with different sitemap, wireframe, and userflow kits, but couldn’t find the right one. Most of them include hundreds of different arrow symbols, templates, decision blocks, states, multiple color schemes, and more.
Those userflows looked pretty cool as Dribbble shots for other designers, but I had to spend extra time to explain it to my clients. It was also a nightmare to maintain it and make any changes.
I realized that there is a problem that designers have to deal with these days: it’s so easy to find another tool for designers, but it’s much harder to find the right solution.
So, I ditched all of the tools and focused on what a perfect website sitemap and userflow should look like. I worked on a new method, tested it on a number of real client projects, built a tool for Sketch and Figma around it, and finally removed all of the extra elements to keep it clean and simple.
See how easy it is:
1 As few symbols as possible.
The userflow grows only in two directions (right and down) which helps reduce the number of arrows and possible scenarios. There are only 26 symbols total that will fit in one screen in your assets sidebar. No more elements that you never use.
2 Sitemap, userflow, and wireframe in one.
Now you can show it all in one screen. It’ll help you design a better user experience and make sure there are no gaps in navigation around the website. Use annotations to explain every piece of it. Your clients will love it.
3 Focus on content (mobile first).
Those mini wireframes show only the page sections which helps focus on the content. With mobile-first methodology, it’s presented all in one column flow. This will help you confirm with the client that you have all of the individual sections covered in your website plan. You can even skip hi-fi wireframes completely.
4 Map out email sequences.
A user’s flow doesn’t end on the web, but the experience often extends to the email sequence. You can now plan it all in one screen to make sure the entire conversion funnel is designed.
5 Sample website projects to learn from.
Check out some sample sitemaps and userflows of common types of websites. You can learn from them and reuse them for your own projects.
6 Expandable symbols/components for faster work.
Symbols and components were designed to expand in a smart way that lets you work faster without resizing individual arrows and blocks. It saves you time and looks perfect.
7 Make it yours.
You have the flexibility and power to tailor all of the single elements to your own workflow and designing method. You can customize the arrows, blocks, and colors. Use it as a template only and make it yours.
8 Use color codes.
Use colors to highlight certain sections or show different page templates. It helps identify elements more quickly and makes your sitemaps more interesting. It’s all up to you how you use it.
9 Designed for Sketch and Figma.
Stop paying for other sitemapping and wireframing tools and use the same software you use to design the actual mockups and prototypes. You can keep it all organized in one file and present it to your clients by sharing a link just like you share your mockups.
10 So easy, everyone can use it.
It was designed in such a way so that everyone can use it. There is a starter template that you can use and just duplicate the already existing elements to build your own sitemap and userflow. You can also watch video tutorials and learn how to use it step by step.