It’s a typical day at the office and you’re clearing your inbox when you receive a new mail from your boss. Yay! It’s a new project. The email is a forward consisting of the project brief written by the stakeholder. It’s short i.e it’s a brief. By the next week, you’re expected to create wireframes to show the stakeholder(s) (not to mention your boss) to prove that you have a good understanding of the project and can take it forward.

How do you get started?

First things first – Read – Reread – and then read the project brief again

Before taking any steps, take all the time you need to read and understand the project brief given by the stakeholder. In all probability it should give you at least two things –

• What’s the problem that needs solving
• How it is expected to be solved

For everything else, bring out your favorite piece of note-taking tool – an app, software or plain ol’ pen and paper. Go back to the email and start noting down two things –

• What is to be built – This is a list of all features and functionalities that are clearly mentioned in the email that are to be built
• What you want answered – This is a list of questions and doubts you may have. Don’t guess or assume. Anything that’s missing needs to be addressed

Set up a discovery call

Once you have the above two lists with you, set up a discovery call with the stakeholders. This is when you explain what you’ve understood from the brief and also get your doubts addressed.

Getting started with wireframes

Many prefer to start with user stories and requirement documents, but I prefer creating the wireframes before anything else. It helps me visualize the product and it also makes it easier to convert into user stories.

Now comes the fun part – choose your preferred wireframing tool. Again it can be software or just pen and paper. Although pen and paper may not be so easy sharing across teams. I personally prefer Mockflow but there are many more to choose from.

To get started with wireframes, pick the most easiest screen you can think of. If you’re having trouble, start with the login and signup screens. Almost every platform will a have login and signup screen. It easy to formulate these screens and give you a good starting point.

It is at this point you can start researching what other solutions exist in the market similar to your project. Granted you may not find exactly what you’re looking for, but if you think outside the box, you may find some good references.

For example, I was recently given a project that consisted showing a lot of graphs and data-tables. I immediately went to moneycontrol.com and finance.yahoo.com. Note – my project was no way related to finance or trading, but both these websites show graphs very well, which I used as inspiration to create my “graphical screens” in my wireframe. In another instance, I had to create a screen that was supposed to show a huge list of patients and their info for a healthcare website. I drew inspiration from Google Sheets, particularly the ability to hide-show rows & columns and tiny font size and introduced it to my project.

In short, look for real life examples that can be airlifted into your project.

Wireframe and Prototype Tools

• Just In Mind
• Marvel
• Invision
• Mockflow
• Framer
• Proto
• Wireframe Sheets (if you prefer pen and paper)