1.2 App Prototype

1.2.1 Link to the Prototype for my WebApp “HowTo”

Link to working prototype:- https://pr.to/DR5OQC/

Link to PDF of the prototype:-https://drive.google.com/open?id=0Bzu8slNuOb02QUxDeTk0N2FoWGM

Kindly visit this link and post your reviews as comments in this blog.

1.2.2 Screens and their info

Essentially the app consists of four different functionalities. There are 4 screens to handle login/signUp/Forgot_Password/profile activities, one screen to show the Q&A in a form of a News feed, one screen to display the results of a question and one for posting the questions and to answer any question one wants , summing up to a total of 7 screens.

1.Login screen

There’s not much to discuss about it except for the efforts that were put in by me in order to get the “tabs switching” activity work. I had to spend about an hour to get the tabs to switch ,such that they point to the proper screen and to get the active tab highlighted.

2.Home Page

Home Page

This screen is the Home Page. It serves the questions in form of News feed. This screen has options for getting questions specific to a topic or a subcategory in that topic. This screen also has a button to go to Q&A screen as well as a search bar to search for your query before posting it to the forum. User could view/edit her profile as well by clicking the button in the top-right.

The main issue that I faced while making this screen was with the “scrollable container”. It took me hours to make the transition between the sample answers.(Try clicking “Android Apps” and “Social Networking” buttons). But this, taught me a lot about wireframing as well as proto.io

3.Search Results screen

Search Screen

This screen basically displays the search results and allows user to post his/her question if it is not present in the “already asked” question. Using the Database it would also display the category(s) in which the question was grouped into , if already asked.

4. Q&A screen


This screen allows the user to post a question on the forum as well as to answer any question she wants. The questions that could likely be answered by the user are also shown to her as a suggestion.

1.2.3 Experience with Proto.io

I got a chance to attend a webminar hosted by the company that I intern at, Hasura where Alexis Piperides , the founder of Proto.io was the speaker. It motivated me to choose Proto.io for making the wireframes and it turned out to be quite helpful. I was able to make the things, the way I imagined.

But the journey was not all sugar-coated. I got stuck with a “scrollable container” and had to spent a lot of time to fix it. But as always, a bit of googling and hard work ended up in a successful endeavour.

Proto.io is a wonderful platform. The UI is extremely user-friendly. They also have good tutorials to get you started. I would advise you to at least try it for wireframing. You can try their 15 days trial.

Please try out my prototype at https://pr.to/DR5OQC/ and your feedbacks are welcome.