See and Do: A very simple approach to building user flow and mockups

As a non-developer founder at your technology startup, there’s one thing you can do more than anything else.

A plan to acquire, nurture and grow users (customers) with as little no money.

Sometimes, though you just need to develop a prototype or mockup, which you can show to potential customers, and drawing it on your mind or writing it with words wont suffice.

In the 5 steps to building your own SaaS application, I outlined the list of things you need to do before you start the coding. After you have developed the day in the life audit, you should be able to come up with the objective of your app and the pain point it solves.

The next part is to take that pain point and translate it into screens and flows.

Any “app” screen comprises of 2 of the most basic and important elements – information and actions.

What the user sees is “information”.

What the user can do is “action”.

There are other elements as well such as navigation, input elements, errors etc. but for now we will ignore them.

See and Do Information and Action User Flow
See and Do Information and Action User Flow

Once you have the idea that your user to see something and do something, then regardless of # of screens, you just have to keep outlining the see and do in an iterative fashion.

After an user clicks on your mobile app or comes to your website, then they will see the splash screen and then “setup an account” for example.


Top 3 things users want from your app
Example of the Top 3 things users want from your app

So the information is your splash screen logo and the login is the action.

Then based on the action you have to show the next screen and next set of actions.

You have to keep iterating the see and do until you reach the list of top 3 things your user wants from the application.