1.2 Prototyping/Wireframes

Ankur Srivastava
Jun 19, 2017 · 3 min read

Sometimes it is easy to think upon an idea loosely, but when you really sit and pay attention to the details, you find yourself stuck at the finest of the facets.

Being a programmer and a developer, I have faced this a lot many times. Then the best solution is to have a rough skeleton prepared, so that you can always quickly brush through what you are up to.

Thus, Prototyping or making Wireframes for your to-be app basically gives you a rough sketch of how your application will finally be working. This Prototype has minimalist of the features in comparision to the real application that you will build.

Therefore, Hasura also gave us the task of making prototypes /wireframes of our app idea. For this purpose, they provided us with a powerful tool known as Proto.io, which is a popular online application to create dynamic and highly interactive prototypes. Besides this, Hasura also arranged a webinar, delivered by Alexis Piperides, CEO of Proto.io.

So basically, a prototype is “a product that is designed and built to test a new design. The prototype is used to correct mistakes and make [the design] more user friendly” (wiki.answers.com). It is a “fully functional working model of a final product” (onlineschools.org).

Whereas, a wireframe is a visual illustration of one Web page. It’s simply meant to illustrate the features, content and links that need to appear on a page so that your design team can mock up a visual interface and your programmers understand the page features and how they are supposed to work. One of the main purposes of a wireframe is to show you where each item should be placed on a page. (Usability.org)

So now, highly charged with these events, I proceeded to prepare a 3 screen prototype of my idea using that very tool. According to this model, my app will have 3 screens purely for describing the app features, and 1 screen for SignIn/SignUp process.

Description of the Prototype:

Screen 1 : DashBoard

This screen is the Landing Page of the application. It contains user’s information, and all the boards that he has. This page also lets user to Create a new board, or pick anyone of already existing boards to manage the tasks in them.

Screen 2: Create Board

Here, the user will be able to create new Kanban boards. It will basically cover all those fields needed for the creation of a Board.
Besides those 3 states (to-do, in progress, done) that every board offers, user can also add or delete their own custom states according to the need.

Screen 3 : Manage Board

As the name suggests, this screen provides with the actual power of a Kanban board. The users will be able to track their task progress as well as make changes to the board, and save it.

Signin/Signup Screen:

As to use this app, user needs to register first, hence this screen simply fulfills the task of authenticating a user or registering a new user.

Well, after making the prototype for my app, it dawned upon me that creating a model is also a tough job to do. I really felt like coding these features, while making the real app, might be a lot easier job to do than this :D.

But then it also gave me a better picture to my idea, and now I know what is that basic block that connects a vague idea into a real product.
And also using Proto.io made this task go easy. It was a good experience.

Here is the video of the interactive prototype that I built.