Why-are-Frames: The holy grail for Product Managers!

Ever been in a situation when you had a mental image of something, you tried your best to explain it to someone however the listener just could not fathom what’s going on in your mind? Enter Wireframes.

There may be multiple times in a Product Manager’s life when they conceptualized this great app/ website idea in their head and want to translate it into words but could not do justice to it? Well, maybe that’s it is said that pictures say a 1000 words. Even I faced the same problem when I and my partner were conceptualizing the website page of our startup. I wish I had known about wireframing back then.

It’s never too late right? Now that I know what wireframes are and how they can simplify our lives, I developed wireframes of how the MakeMyVideo mobile application/ website should’ve looked like.

I used two very cool tools, let’s dive into them:

1st Wireframing Tool — POP [Prototyping on Paper]:

POP is a very fun, easy to use application which empowers you to translate your ideas into tangible apps within a matter of minutes.

Here’s what you will need:

A bunch of markers (and obviously a great idea!)

What’s next? Just draw out your ideas on a piece of paper so that POP can bring it to life:

My wireframes — Login page, Other pages, and Checkout page

Okay so what after you’re done drawing? Open the app and let it do its magic. I created a fully functional working wireframe of my app in less than 10 minutes. Check out the end product:

My awesome app in action! :D

Here’s what I felt was awesome about POP:

1. It is super user-friendly, trust me on this.
2. It lets you choose the device (iPhone 6, iPhone XR, Samsung etc) and enables you to get a complete look and feel of your app. Don’t get it? Check out my app here. Go ahead, play with it.
3. It lets you link pictures so that you can create a functional prototype from a set of pictures.
4. You don’t have to be UI designer to be able to do this.

There’s something that can be improved too:

1. There is no option to have a button which can be linked to exiting the play mode. So the “feel” associated with the exit button is something I missed.

2nd Wireframing tool — Balsamiq

If you know anything about wireframing, you probably would’ve heard of Balsamiq. This is another extremely simple yet incredibly powerful tool.

I used this to create a wireframe of the website of MakeMyVideo. Here’s how it looks:

Wireframe of the landing page of my website

Pretty cool right? And this took me just 15 minutes.

This tool is unimaginably empowering and if you have a clear mental image, you can make a very professional looking wireframe in less than 10 minutes.

Here’s what I loved about Balsamiq:

1. At the cost of sounding repetitive — It is extremely simple to use and very user-friendly.
2. There are already so many inbuilt pictures, icons, frames, symbols, and the list goes on. There is hardly anything that has not been included in the toolkit.
3. Coolest feature: It allows you to convert all the pictures into sketches! Why is that important? Ideally, wireframes are devoid of color and serve as a skeleton for the design. I chose to put color since I did this activity retrospectively.

What did I not like about Balsamiq? I don’t think there’s anything that I didn’t like. If you know something that needs attention, I would love to find out about that.

So what does this mean for Product Managers? It means that all you have to do is have a clear vision in your head and in a matter of minutes, you will be able to convert your vision into a tangible wireframe using these awesome tools.

How will that help? Product Managers often have to brainstorm with the UI designers about the expected design of an app/ website. Using something like this will make the communication much easier and reduce the scope of any rework due to communication gaps. (Because who likes rework?!)

If you know of other awesome wireframing tools, let me know in the comments section below. If this was useful, then show some love: