I'm building a tool that connects the different aspects of the UX process


Welcome, @jochemgerritsen!

That’s awesome, man! Can you tell us anything about it? I’m looking forward to hearing more and helping out already.

Information that will change our lives!

Thanks @dougcollins for the interest! Sure, I can tell a bit more :slight_smile:

Our goal is to make a tool that has different interconnected parts. In short, design elements like personas, customer journeys, information architecture and pages are all connected and used in relation to each other. At least, that’s the goal. The prototype we’ve made now can be used to make conceptual wireframes by just typing. It’s simple, but I guess it’s a good first step.

This gif shows a bit of what it can do:

If you’re interested, just send me a message so we can talk more :slight_smile:


Hey, that’s some very cool stuff! I’d love to hear more. I’ll drop you a PM.


Could you please explain what is the input and what is the output?
I am unable to make the correlation from the gif.


Hi @Sridhar, sure I can. The input is the ‘command’ that you can see in the top text field. It says:

w menu
video;w2, who-why

The output is the simple wireframe that pops up near the end of the GIF, made out of a bunch of blocks or squares.

Let me explain how it works. The ‘w’ stands for ‘wireframe’, so the application knows you’re making a wireframe. Every separate line is a separate row in the wireframe, and everything that’s put on the same line (such as ‘video;w2, who-why’) is put on the same row in the wireframe. The ‘w2’ explains the width of the ‘square’ we just made (in this case, the width of the video ‘square’ should be 2 units).

Of course, you can make much more complex wireframes with squares that have different widths and heights. I can show you a more extensive example (again, in a gif) if you’re interested.

Does that make sense?


It seems to be a complex way to generate a wireframe. Coders might like it but not sure about the majority of the designers.