We need a Wireframe of iwalkfreely web app

[rabishah]

Yes. We need a wireframe of iwalkfreely app for a better understanding and communication of MVP.

[rabishah]

What will be the content for our home page? I was looking through the template to decide what content will go to the home page/app?

1. the original I Walk Freely Post. 2.a chart/graph that summarizes the post
2. A Form/WISYWIG Editor for user comment or their own personal story
3. Links to previous Code For Nepal project and code for Nepal website

Is there any original post/blog that we can embed into the home page. Make the home page like https://medium.com/ blog page where you can put in your story so that the whole society can see?

As per @Raashul 's queries regarding content's on Home page, lets use this issue to discuss on the same agenda.

[Raashul]

I am planning to start coding for the project but I don't know what the template and the structure will be like? Should I wait for the content as it seems to be a blocker for me. What do you think of us mocking a dummy page with fake content and graphs to get this project up and running? Please give me some idea on how to approach as I am very confused on how to start. @rabishah

[Raashul]

Do you think we can first play around with the tools instead of waiting for the wireframe? I am not very adept with wireframes and I think this is turning out to be a blocker for us. Lets move this ahead as quickly as possible. I need some directions on how to move forward. Thanks a lot, @rabishah.

[rabishah]

Homepage

[rabishah]

Stats / Visualization / Interaction page

[rabishah]

@prashishh Need you input as you must be having a clear picture of the problem statement.

[rabishah]

@Raashul Don't wait for any wireframes etc. As of now, start integrating the template we've finalized in #3

[Raashul]

Thanks for getting back. I will start implementing the template and see what features I can add on the hompage.

[prashishh]

I was assuming that we would show visualization of the data that we collected from the survey and present them in our first page. We can show quotations & comments from women from the survey and eventually build a tool where they can add comments from the app.

The blog can be a different page where we can have opinions & ideas from women to share their experiences.

The first page would more be like an awareness page from the data collected from the survey.

[rabishah]

@prashishh So,what you are saying is, https://cloud.githubusercontent.com/assets/919742/19934200/eded1156-a13d-11e6-9791-a830e9da6af5.png is the home page.

[prashishh]

I would think a mix between both the screenshots is a good start --

Not strictly just showing the visualization like in wire frame (2), but a general discussion of the problem, the survey & future goals. Maybe http://www.arewelearningyet.com/ (single page).

Talk about Sexual Harassment in Nepal

---

Talk about the problem in context of Nepal

---

About the survey conducted

---

Data & Visualization

---

What can be done

---

I'm brainstorming, what do you think?

[rabishah]

@prashishh What you are saying is building a comprehensive blog. IMO, it makes sense as you would want to read the context before you get to the interaction / visualizations. I've scribbled a couple of design (rough).

And finally, with comments panel

[rabishah]

@prashishh A couple of questions I have in my mind

• What are we building? Is it just a single page catered to this particular topic?
• If we are building a platform / app, say if someone writes on a different topic, we will be providing only Granular Components.
  • Comments Integration
  • Survey data Integration
  • Templates (for now, its 2 column template)
  • Blockquotes
  • Responsive in Mobiles

@prashishh @Raashul @imsanju @studenton What are your thoughts on this?

[Raashul]

I am currently working on the home page with dummy content. So far I have the main stories related to the survery / main article with an option to write their own personal story related to this. Will be adding comments option and Chart analysis display as I proceed. I am mocking up the design from the sketch you told me to implement above.

[rabishah]

@Raashul make sure you branch out from develop branch. Let me know if you need any help regarding structures or any queries of the app.

[prashishh]

@rabishah - I don't think the application should resemble a blog. You are absolutely correct that it should just be a single page catered to this topic. I was visualizing some charts/tables with text/quotes animated in the single page & describing the problem in our society. They should be able to contact us directly from a form.

I don't think we have the resources to build an entire platform. We should either use granular components already available on the web instead of writing our own. What do you think?

[prashishh]

The comment section looks very blog-ish. I'd remove that.

[rabishah]

@prashishh I think the above design is a good start for @Raashul to get started with. It will be having visualizations, if need be, text/quotes animated and its a single page app.

But, what I would ideally want is, lets say someone wants to prepare a similar page, he / she should able to build it fast. And this we can achieve it once we make our integrations / components modular. For e.g. he / she should easily integrate comments, integrate with survey data etc. Or else, this would be yet another HTML page with significant effort which I would not be happy about.

Regarding web components, we won't be building one. Foundation already has it, so why build it?

[rabishah]

@prashishh Also, that comment section looks blog-ish, because its a screen shot taken from blogs 😸 Its basically a side panel that appears once you click on a Write A Comment button. The content / design will be ours.

[Raashul]

@imsanju This is the template we are implementing. I have started to design according to the template above. Will get more stuff done by the weekend and push it to github. Most of our work is on the client side right now so we're creating dummy content to finalize the design. Let's figure out how and where we are implementing the chart visualization. I am not familiar with d3.js so we can look into that.

[prashishh]

@rabishah - True! More reusable components would be amazing as a project. Also, instead of re-building the wheel, can we look into modules that are already there in the interweb? What do you suggest? We can get them and modify for our use and open-source it back to the community.

@Raashul - Do you have experience with modular web components?

[rabishah]

@prashishh Let's search for web comments when we need them. Giving back to the community would be an awesome feat with this projects. Let's not only build it, but also learn cool stuffs on the way.

[Raashul]

@rabishah @prashishh I have a question regarding the folder structure in the project. I was looking to d3.js to put charts into the home page. I am not sure where I should put my controller js files and the config files that I'll use for this purpose. I will need to make multiple controller files for comments/d3/adding posts etc

[rabishah]

@Raashul I would suggest you to create a folder, controllers, inside app/client/assets/js. Now, inside controllers, i would be creating files for each modules. For e.g., comments.js which specifically deals with comments. However, you should not create folders for adding / creating / deleting etc which are all verbs. Create for nouns. e.g. posts, comments, visualizations etc.

For config file, create a simple config.js. As the code grows, you can then separate it out in a folder with multiple files. The rule of thumb is, create folder structures which you are most comfortable with. 😸

[prashishh]

👍

[prashishh]

@Raashul - Can you post screenshots of the current design (and flow, if we have)? We could have the dev version as gh-pages. What do you think?

[prashishh]

@rabishah - I would suggest the have the sections in the page as modular sections. So we can pick and choose the sections in the single app.

Example: http://nextbillion.org/

[rabishah]

@prashishh Modular Sections as in template wise or functionality wise? What we can do is, lets say, we maintain a config file with configurable functionalities can also be template / sections and do a just-in-time compilations.