From an idea to a Prototype

By
Since I posted about my app idea White Board, next step is to create an functional and interactive prototype or wireframe, which is the working model for the app idea.

Hasura recommended to present the idea in only 3 screen app. There are many apps and websites to create prototype or wireframe and what we were recommended was proto.io . We had a webinar about App Wireframing / Prototyping with the CEO of proto.io , which motivated me and we got to know the new trend of app development.
Here is the summery of prototype for my app idea White Board .



I created prototype for my app idea WhiteBoard as a web application in just 3 screens where the welcome, login, signup and profile screens are not included. Please note that this is not the final product, just a prototype.
Screen 1 : Conversation
In this screen, group chat is shown and there is also navigation pan to switch between different groups. This group chat is similar as other applications, we can send attachments such as picture, audios, videos, documents and any other file.

Screen 2 : White Board
Every group has it’s own whiteboard. On this board we can sketch or draw or write anything and that is visible to all group members. 

There are different drawing tools on the left pan and different colours for not mixing things up in one colour also to make sketch interactive. After drawing that project or state of board can be saved as any standard picture format. We can switch to group chat within no time.

Screen 3 : Manage Group
On this screen we can manage all our groups we are in. All the information about the group is here. We can here

  • Create new group
  • Delete an existing group
  • Add a user to a group
  • Remove a user
  • Change access label for a user

On the top navigation bar, there is an icon of user, on clicking which we are navigated to the user profile screen. On the right side there is a 3 Bar icon, which opens side navigation menu.

User Profile
So this is been prototype for my app idea. Link for the full WhiteBoard Prototype .
Please give your feedback about this post and the prototype.


What's Next?

Next Blog Post is about setting up development Environment. Stay tuned!

Comments

Post a Comment

Popular posts from this blog

User Feedback & Testing of White Board

By
Image
As in my previous posts, I’ve described about all screens of my app  White Board.  You can check here — App Screen 1 (UI + Backend Integration) If you are familiar with my previous post and app idea then you know what I did before, otherwise just check my app… medium.com App Screen 2 (UI + Backend Integration) Task 5.1 Hasura Internship. Week 5 task medium.com App Screen 3 (UI + Backend Integration) Task 6.1 Hasura Internship Week 6 Task medium.com This one is for user feedback about my app and testing of the app for any bug. When I completed my app with required functionality as I described in MVP in my first blog post at the beginning of my journey. Idea for an APP | First step to internship This article is about my brainstorming for an idea which can be used an MVP. medium.com Testing and fixing bugs is one of the important part in order to build a successful application. Anyhow a person can’t do this all alone, so it is a better way to get feedback from others as w
Read more

Idea for an app | First step to internship

By
Image
It all started when I joined IMAD (Introduction to Modern Application Developement), an MOOC provided by NPTEL in association with Hasura. I completed the assignments and appeared in the final test, scoring an overall of 84%, which, much to my delight, landed me an internship with Hasura. First week task The task in the first week was to come up with an idea for an app that can be demonstrated and used as a Minimum Viable Product (MVP) with just 3 screens. I discussed this task with a few of my friends and researched the internet for viable ideas. After long sessions of discussion and surfing the internet, I finally settled on the idea for an app for a  Collaborative   White Board . The idea   The idea of the app is pretty simple, to create an online platform for collaborative brainstorming by a group/team of people from across the globe. This sort of brainstorming is usually required for startup ideas, projects or the onset of any form of development in a group.
Read more

Playing with the Octo-Cat

By
Image
After I done with setting-up dev environment, next task of Hasura Internship was to learn git basics. https://octodex.github.com/images/dojocat.jpg Git is not a programming language or an IDE About Git Git is the most commonly used  distributed version control system . Git is a mature, actively maintained open source project originally developed in 2005 by Linus Torvalds, the famous creator of the Linux operating system kernel.  GitHub  is a company that provides a platform to do version controlling Git allows a team of people to work together, all using the same files. And it helps the team cope with the confusion that tends to happen when multiple people are editing the same files. Version control in simple terms is nothing but making flags/check points as significant changes are made to your code/work so that you can always go back to whichever version was last working properly or whichever version you want to use at the moment. Why Git and Github? Version contr
Read more