Public Lab Wiki documentation

This page attempts to track the current status of WhereWeBreathe design process.

Time estimates:

1. Setup & communication: 39h
2. Site architecture and database design: 22h
3. Template coding, form and graph implementation: 76h
4. User login, security & privacy: 52h

WhereWeBreathe

Public Lab is collaborating on a project to enable people facing indoor formaldehyde air contamination to better understand the effects of exposure, exacerbating variables and potential mitigation techniques. Participants can advance and collectivize scientific knowledge of chronic formaldehyde exposure's effects by selectively sharing health and symptom information with others experiencing similar issues. The site will feature a series of questions related to exposure and symptoms, and site users will be able to tell their stories and exchange information with others, anonymously if they wish.

Tech stack

We are planning for a Node.js website with:

• express framework
• mongo database with Rails-like mongoose ORM (see https://github.com/publiclab/infragram-js for an example)
• user authentication
• Bootstrap interface with mobile (fluid) layout: http://getbootstrap.com
• graphs with d3: http://d3js.org/

https://github.com/publiclab/wherewebreathe/issues

Web development phases

1. Setup & communication

Minimum viable product:

• Features:
  • user registration, email confirmation, password reset
  • collection of answers to various questions in database for each user
  • user toggle for public/private responses (all or nothing)
  • display of aggregate answers and (for public users) individual answers/narratives
• Interface: this Phase 1 will include the following pages/pagetypes:
  • front page
  • signup page
  • welcome modal box upon first login
  • question form
  • graph display of answers page, with display of long-form narratives for each question
  • settings page with privacy switch
  • login/password reset page
• Questionnaire
  • current draft: https://docs.google.com/forms/d/1BvjKvH5dUFNjhhDdA4NNtsTHiXgurjJN3-c72mcrvFM/viewform

2. Site architecture and database design

• sitemap: see below
• MVC data models, futureproofing & planning for future possible PublicLab.org integration
  • database scalablity and how we store answers to questions.
• possible anonymous aggregate database download formatting in both conventional csv/excel and custom plaintext for analysis in stata - download popover on each graph page, bulk download from footer and/or settings page

Background: https://github.com/publiclab/wherewebreathe/issues/14 (bulk download)

3. Template coding, form and graph implementation

Basic look & feel

Wherever possible, we'll be using default Bootstrap styles to save time/effort and use consistent, familiar web idiom. Very minimal page w/ header & footer, following this design:

With 2 columns of useful links or information in the footer, with plenty of extra space, as on PublicLab.org; light grey on white.

Mobile compatibility

Fluid layout (see https://github.com/publiclab/wherewebreathe/issues/5) should allow for a workable mobile view with minimal tweaking, but some elements will be hidden on mobile browsers to simplify layout:

Front page

• static content, or possibly displaying one dynamic graph
• introduce the project, and display some graphed data. How much and what kind of data can we show?
• mockup forthcoming

Discussion continuing at https://github.com/publiclab/wherewebreathe/issues/15

Dashboard

• we will simply display questions instead of having a "dashboard", for phase I
• A modal "welcome" box if you've just signed up to be friendly and orient first-timers. Also perhaps a status box (can defer to Phase II) with how many questions you've answered, tips or suggestions for next steps. These can use standard Bootstrap modal style, as long as it works on mobile.

Background: https://github.com/publiclab/wherewebreathe/issues/1, https://github.com/publiclab/wherewebreathe/issues/3

Question form

• questionnaire; current draft can be found here: https://docs.google.com/forms/d/1BvjKvH5dUFNjhhDdA4NNtsTHiXgurjJN3-c72mcrvFM/viewform?usp=send_form
• UI/UX testing/review of question form
  • this is something we can do somewhat informally, as the more serious UI/UX review could be after this beta project is launched, and could feed into Phase II revisions later.

Current mockups: none for question form, but can follow questions in draft survey above, and visual style established in signup page below.

Background: https://github.com/publiclab/wherewebreathe/issues/8, https://github.com/publiclab/wherewebreathe/issues/4

Graph and narratives display

• basic design in below mockups; further mockups showing different question types in progress
• likely d3, aggregate data serving and display discussion ongoing but likely bar graphs as shown in mockup
• privacy review: what info is actually exposed in this graph? Can individual contributor information be deduced? "Down-res'ing" or obfuscating identifying information

Current mockups:

Background: https://github.com/publiclab/wherewebreathe/issues/8

4. User login, security & privacy

• signup page design process (see mockup)
  • username & password creation & email-based recovery (closely follow process & design on http://publiclab.org/login)
  • UI/UX testing/review of registration: run through the signup process and "new user experience" a few times with varying types of users
• security/privacy of the database - starting with storing as little identifiable user data as possible
• privacy control panel/switch (see mockup)

Current mockups:

Background: https://github.com/publiclab/wherewebreathe/issues/7

Beta production server setup

• we have VMs available via our hosting provider and a donation from Rackspace... mostly this will be meeting/communicating with Dogi our sysadmin and getting login credentials, installing packages etc.
• security/privacy audit if possible
• access policy for team members (not part of web dev)

This page attempts to track the current status of WhereWeBreathe design process.

Time estimates:

1. Setup & communication: 39h
2. Site architecture and database design: 22h
3. Template coding, form and graph implementation: 76h
4. User login, security & privacy: 52h

WhereWeBreathe

Public Lab is collaborating on a project to enable people facing indoor formaldehyde air contamination to better understand the effects of exposure, exacerbating variables and potential mitigation techniques. Participants can advance and collectivize scientific knowledge of chronic formaldehyde exposure's effects by selectively sharing health and symptom information with others experiencing similar issues. The site will feature a series of questions related to exposure and symptoms, and site users will be able to tell their stories and exchange information with others, anonymously if they wish.

Tech stack

We are planning for a Node.js website with:

• express framework
• mongo database with Rails-like mongoose ORM (see https://github.com/publiclab/infragram-js for an example)
• user authentication
• Bootstrap interface with mobile (fluid) layout: http://getbootstrap.com
• graphs with d3: http://d3js.org/

https://github.com/publiclab/wherewebreathe/issues

Web development phases

1. Setup & communication

Minimum viable product:

• Features:
  • user registration, email confirmation, password reset
  • collection of answers to various questions in database for each user
  • user toggle for public/private responses (all or nothing)
  • display of aggregate answers and (for public users) individual answers/narratives
• Interface: this Phase 1 will include the following pages/pagetypes:
  • front page
  • signup page
  • welcome modal box upon first login
  • question form
  • graph display of answers page, with display of long-form narratives for each question
  • settings page with privacy switch
  • login/password reset page
• Questionnaire
  • current draft: https://docs.google.com/forms/d/1BvjKvH5dUFNjhhDdA4NNtsTHiXgurjJN3-c72mcrvFM/viewform

2. Site architecture and database design

• sitemap (insert here)
• MVC data models, futureproofing & planning for future possible PublicLab.org integration
  • database scalablity and how we store answers to questions.
• possible anonymous aggregate database download formatting in both conventional csv/excel and custom plaintext for analysis in stata - download popover on each graph page, bulk download from footer and/or settings page

3. Template coding, form and graph implementation

Basic look & feel

Wherever possible, we'll be using default Bootstrap styles to save time/effort and use consistent, familiar web idiom. Very minimal page w/ header & footer, following this design:

With 2 columns of useful links or information in the footer, with plenty of extra space, as on PublicLab.org; light grey on white.

Mobile compatibility

Fluid layout (see https://github.com/publiclab/wherewebreathe/issues/5) should allow for a workable mobile view with minimal tweaking, but some elements will be hidden on mobile browsers to simplify layout:

Front page

• static content, or possibly displaying one dynamic graph
• introduce the project, and display some graphed data. How much and what kind of data can we show?
• mockup forthcoming

Discussion continuing at https://github.com/publiclab/wherewebreathe/issues/15

Dashboard

• we will simply display questions instead of having a "dashboard", for phase I
• A modal "welcome" box if you've just signed up to be friendly and orient first-timers. Also perhaps a status box (can defer to Phase II) with how many questions you've answered, tips or suggestions for next steps. These can use standard Bootstrap modal style, as long as it works on mobile.

Background: https://github.com/publiclab/wherewebreathe/issues/1, https://github.com/publiclab/wherewebreathe/issues/3

Question form

• questionnaire; current draft can be found here: https://docs.google.com/forms/d/1BvjKvH5dUFNjhhDdA4NNtsTHiXgurjJN3-c72mcrvFM/viewform?usp=send_form
• UI/UX testing/review of question form
  • this is something we can do somewhat informally, as the more serious UI/UX review could be after this beta project is launched, and could feed into Phase II revisions later.

Current mockups: none for question form, but can follow questions in draft survey above, and visual style established in signup page below.

Background: https://github.com/publiclab/wherewebreathe/issues/8, https://github.com/publiclab/wherewebreathe/issues/4

Graph and narratives display

• basic design in below mockups; further mockups showing different question types in progress
• likely d3, aggregate data serving and display discussion ongoing but likely bar graphs as shown in mockup
• privacy review: what info is actually exposed in this graph? Can individual contributor information be deduced? "Down-res'ing" or obfuscating identifying information

Current mockups:

Background: https://github.com/publiclab/wherewebreathe/issues/8

4. User login, security & privacy

• signup page design process (see mockup)
  • username & password creation & email-based recovery (closely follow process & design on http://publiclab.org/login)
  • UI/UX testing/review of registration: run through the signup process and "new user experience" a few times with varying types of users
• security/privacy of the database - starting with storing as little identifiable user data as possible
• privacy control panel/switch (see mockup)

Current mockups:

Background: https://github.com/publiclab/wherewebreathe/issues/7

Beta production server setup

• we have VMs available via our hosting provider and a donation from Rackspace... mostly this will be meeting/communicating with Dogi our sysadmin and getting login credentials, installing packages etc.
• security/privacy audit if possible
• access policy for team members (not part of web dev)

This page attempts to track the current status of WhereWeBreathe design process.

Time estimates:

1. Setup & communication: 39h
2. Site architecture and database design: 22h
3. Template coding, form and graph implementation: 76h
4. User login, security & privacy: 52h

WhereWeBreathe

Public Lab is collaborating on a project to enable people facing indoor formaldehyde air contamination to better understand the effects of exposure, exacerbating variables and potential mitigation techniques. Participants can advance and collectivize scientific knowledge of chronic formaldehyde exposure's effects by selectively sharing health and symptom information with others experiencing similar issues. The site will feature a series of questions related to exposure and symptoms, and site users will be able to tell their stories and exchange information with others, anonymously if they wish.

Tech stack

We are planning for a Node.js website with:

• express framework
• mongo database with Rails-like mongoose ORM (see https://github.com/publiclab/infragram-js for an example)
• user authentication
• Bootstrap interface with mobile (fluid) layout: http://getbootstrap.com
• graphs with d3: http://d3js.org/

https://github.com/publiclab/wherewebreathe/issues

Web development phases

1. Setup & communication

Minimum viable product:

• Features:
  • user registration, email confirmation, password reset
  • collection of answers to various questions in database for each user
  • user toggle for public/private responses (all or nothing)
  • display of aggregate answers and (for public users) individual answers/narratives
• Interface: this Phase 1 will include the following pages/pagetypes:
  • front page
  • signup page
  • welcome modal box upon first login
  • question form
  • graph display of answers page, with display of long-form narratives for each question
  • settings page with privacy switch
  • login/password reset page
• Questionnaire
  • current draft: https://docs.google.com/forms/d/1BvjKvH5dUFNjhhDdA4NNtsTHiXgurjJN3-c72mcrvFM/viewform

2. Site architecture and database design

• sitemap (insert here)
• MVC data models, futureproofing & planning for future possible PublicLab.org integration
  • database scalablity and how we store answers to questions.
• possible anonymous aggregate database download formatting in both conventional csv/excel and custom plaintext for analysis in stata - download popover on each graph page, bulk download from footer and/or settings page

3. Template coding, form and graph implementation

Basic look & feel

Wherever possible, we'll be using default Bootstrap styles to save time/effort and use consistent, familiar web idiom. Very minimal page w/ header & footer, following this design:

With 2 columns of useful links or information in the footer, with plenty of extra space, as on PublicLab.org; light grey on white.

Mobile compatibility

Fluid layout (see https://github.com/publiclab/wherewebreathe/issues/5) should allow for a workable mobile view with minimal tweaking, but some elements will be hidden on mobile browsers to simplify layout:

Front page

• static, or possibly displaying one graph: https://github.com/publiclab/wherewebreathe/issues/15
• mockup forthcoming

Dashboard

• we will simply display questions instead of having a "dashboard", for phase I - see https://github.com/publiclab/wherewebreathe/issues/1 and https://github.com/publiclab/wherewebreathe/issues/3
• A modal "welcome" box if you've just signed up to be friendly and orient first-timers. Also perhaps a status box (can defer to Phase II) with how many questions you've answered, tips or suggestions for next steps. These can use standard Bootstrap modal style, as long as it works on mobile.

Question form

• https://github.com/publiclab/wherewebreathe/issues/8
• survey: based on: https://github.com/publiclab/wherewebreathe/issues/4
  • current survey draft can be found here: https://docs.google.com/forms/d/1BvjKvH5dUFNjhhDdA4NNtsTHiXgurjJN3-c72mcrvFM/viewform?usp=send_form
• UI/UX testing/review of question form
  • this is something we can do somewhat informally, as the more serious UI/UX review could be after this beta project is launched, and could feed into Phase II revisions later.

Current mockups: none for question form, but can follow questions in draft survey above, and visual style established in signup page below.

Graph and narratives display

• still ongoing in design phase, but https://github.com/publiclab/wherewebreathe/issues/8
• privacy settings page [need more info] https://github.com/publiclab/wherewebreathe/issues/2
• likely d3, aggregate data serving and display for different question types
• privacy review: what info is actually exposed in this graph? Can individual contributor information be deduced? Down-res'ing

Current mockups:

4. User login, security & privacy

• signup page design process (see mockup): https://github.com/publiclab/wherewebreathe/issues/7
  • username & password creation & email-based recovery (closely follow process & design on http://publiclab.org/login)
  • UI/UX testing/review of registration: run through the signup process and "new user experience" a few times with varying types of users
• security/privacy of the database - starting with storing as little identifiable user data as possible
• privacy control panel/switch (see mockup)

Current mockups:

Beta production server setup

• we have VMs available via our hosting provider and a donation from Rackspace... mostly this will be meeting/communicating with Dogi our sysadmin and getting login credentials, installing packages etc.
• security/privacy audit if possible

June 15th status of WhereWeBreathe design process:

This document is in progress; it needs:

• all the latest design decisions
• wireframes, etc copied in
• merging of the top and bottom docs, or cleaning up of the one with time estimates and replacing the top one with it

Time estimates:

1. Setup & communication: 39h
2. Site architecture and database design: 22h
3. Template coding, form and graph implementation: 76h
4. User login, security & privacy: 52h

WhereWeBreathe

Public Lab is collaborating on a project to enable people facing indoor formaldehyde air contamination to better understand the effects of exposure, exacerbating variables and potential mitigation techniques. Participants can advance and collectivize scientific knowledge of chronic formaldehyde exposure's effects by selectively sharing health and symptom information with others experiencing similar issues. The site will feature a series of questions related to exposure and symptoms, and site users will be able to tell their stories and exchange information with others, anonymously if they wish.

Tech stack

We are planning for a Node.js website with:

• express framework
• mongo database with Rails-like mongoose ORM (see https://github.com/publiclab/infragram-js for an example)
• user authentication
• Bootstrap interface with mobile (fluid) layout: http://getbootstrap.com
• graphs with d3 or flot (probably d3)

https://github.com/publiclab/wherewebreathe/issues

Web development phases

1. Setup & communication

• minimum viable product: what features the MVP has, wireframes of interface, details about current desired survey questions/data to go into the database

2. Site architecture and database design

• sitemap (insert here)
• MVC data models, futureproofing & planning for future possible PublicLab.org integration
  • database scalablity and how we store answers to questions.
• possible anonymous aggregate database download formatting in both conventional csv/excel and custom plaintext for analysis in stata

3. Template coding, form and graph implementation

Basic look & feel

Wherever possible, we'll be using default Bootstrap styles to save time/effort and use consistent, familiar web idiom. Very minimal page w/ header & footer, following this design:

With 2 columns of useful links or information in the footer, with plenty of extra space, as on PublicLab.org; light grey on white.

Mobile compatibility

Fluid layout (see https://github.com/publiclab/wherewebreathe/issues/5) should allow for a workable mobile view with minimal tweaking, but some elements will be hidden on mobile browsers to simplify layout:

Dashboard

• we will simply display questions instead of having a "dashboard", for phase I - see https://github.com/publiclab/wherewebreathe/issues/1 and https://github.com/publiclab/wherewebreathe/issues/3
• A modal "welcome" box if you've just signed up to be friendly and orient first-timers. Also perhaps a status box (can defer to Phase II) with how many questions you've answered, tips or suggestions for next steps. These can use standard Bootstrap modal style, as long as it works on mobile.

Question form

• https://github.com/publiclab/wherewebreathe/issues/8
• survey: based on: https://github.com/publiclab/wherewebreathe/issues/4
  • current survey draft can be found here: https://docs.google.com/forms/d/1BvjKvH5dUFNjhhDdA4NNtsTHiXgurjJN3-c72mcrvFM/viewform?usp=send_form
• UI/UX testing/review of question form
  • this is something we can do somewhat informally, as the more serious UI/UX review could be after this beta project is launched, and could feed into Phase II revisions later.

Current mockups: none for question form, but can follow questions in draft survey above, and visual style established in signup page below.

Graph and narratives display

• still ongoing in design phase, but https://github.com/publiclab/wherewebreathe/issues/8
• privacy settings page [need more info] https://github.com/publiclab/wherewebreathe/issues/2
• likely d3, aggregate data serving and display for different question types
• privacy review: what info is actually exposed in this graph? Can individual contributor information be deduced? Down-res'ing

Current mockups:

4. User login, security & privacy

• signup page design process (see mockup): https://github.com/publiclab/wherewebreathe/issues/7
  • username & password creation & email-based recovery (closely follow process & design on http://publiclab.org/login)
  • UI/UX testing/review of registration: run through the signup process and "new user experience" a few times with varying types of users
• security/privacy of the database - starting with storing as little identifiable user data as possible
• privacy control panel/switch (see mockup)

Current mockups:

Beta production server setup

• we have VMs available via our hosting provider and a donation from Rackspace... mostly this will be meeting/communicating with Dogi our sysadmin and getting login credentials, installing packages etc.
• security/privacy audit if possible

June 15th status of WhereWeBreathe design process:

This document is in progress; it needs:

• all the latest design decisions
• wireframes, etc copied in
• merging of the top and bottom docs, or cleaning up of the one with time estimates and replacing the top one with it

Time estimates:

1. Setup & communication: 39h
2. Site architecture and database design: 22h
3. Template coding, form and graph implementation: 76h
4. User login, security & privacy: 52h

WhereWeBreathe

Public Lab is collaborating on a project to enable people facing indoor formaldehyde air contamination to better understand the effects of exposure, exacerbating variables and potential mitigation techniques. Participants can advance and collectivize scientific knowledge of chronic formaldehyde exposure's effects by selectively sharing health and symptom information with others experiencing similar issues. The site will feature a series of questions related to exposure and symptoms, and site users will be able to tell their stories and exchange information with others, anonymously if they wish.

Tech stack

We are planning for a Node.js website with:

• express framework
• mongo database with Rails-like mongoose ORM (see https://github.com/publiclab/infragram-js for an example)
• user authentication
• Bootstrap interface with mobile (fluid) layout: http://getbootstrap.com
• graphs with d3 or flot (probably d3)

https://github.com/publiclab/wherewebreathe/issues

Web development phases

1. Setup & communication

• minimum viable product: what features the MVP has, wireframes of interface, details about current desired survey questions/data to go into the database

2. Site architecture and database design

• sitemap (insert here)
• MVC data models, futureproofing & planning for future possible PublicLab.org integration
  • database scalablity and how we store answers to questions.
• possible anonymous aggregate database download formatting in both conventional csv/excel and custom plaintext for analysis in stata

3. Template coding, form and graph implementation

Basic look & feel

Very minimal page w/ header & footer, following this design:

With 2 columns of useful links or information in the footer, with plenty of extra space, as on PublicLab.org; light grey on white.

Dashboard

• we will simply display questions instead of having a "dashboard", for phase I - see https://github.com/publiclab/wherewebreathe/issues/1 and https://github.com/publiclab/wherewebreathe/issues/3
• A modal "welcome" box if you've just signed up to be friendly and orient first-timers. Also perhaps a status box (can defer to Phase II) with how many questions you've answered, tips or suggestions for next steps.

Question form

• https://github.com/publiclab/wherewebreathe/issues/8
• survey: based on: https://github.com/publiclab/wherewebreathe/issues/4
  • current survey draft can be found here: https://docs.google.com/forms/d/1BvjKvH5dUFNjhhDdA4NNtsTHiXgurjJN3-c72mcrvFM/viewform?usp=send_form
• UI/UX testing/review of question form
  • this is something we can do somewhat informally, as the more serious UI/UX review could be after this beta project is launched, and could feed into Phase II revisions later.

Current mockups: none for question form, but can follow questions in draft survey above, and visual style established in signup page below.

Graph and narratives display

• still ongoing in design phase, but https://github.com/publiclab/wherewebreathe/issues/8
• privacy settings page [need more info] https://github.com/publiclab/wherewebreathe/issues/2
• likely d3, aggregate data serving and display for different question types
• privacy review: what info is actually exposed in this graph? Can individual contributor information be deduced? Down-res'ing

Current mockups:

4. User login, security & privacy

• signup page design process: https://github.com/publiclab/wherewebreathe/issues/7
• username & password creation & recovery
• security/privacy - both integration of security preferences into sign up, and the security of the database (mostly latter)
• UI/UX testing/review of registration
  • run through the signup process and "new user experience" a few times with varying types of users

Current mockups:

Beta production server setup

• we have VMs available via our hosting provider and a donation from Rackspace... mostly this will be meeting/communicating with Dogi our sysadmin and getting login credentials, installing packages etc.
• security/privacy audit if possible

June 15th status of WhereWeBreathe design process:

This document is in progress; it needs:

• all the latest design decisions
• wireframes, etc copied in
• merging of the top and bottom docs, or cleaning up of the one with time estimates and replacing the top one with it

Time estimates:

1. Setup & communication: 39h
2. Site architecture and database design: 22h
3. Template coding, form and graph implementation: 76h
4. User login, security & privacy: 52h

WhereWeBreathe

Public Lab is collaborating on a project to enable people facing indoor formaldehyde air contamination to better understand the effects of exposure, exacerbating variables and potential mitigation techniques. Participants can advance and collectivize scientific knowledge of chronic formaldehyde exposure's effects by selectively sharing health and symptom information with others experiencing similar issues. The site will feature a series of questions related to exposure and symptoms, and site users will be able to tell their stories and exchange information with others, anonymously if they wish.

Tech stack

We are planning for a Node.js website with:

• express framework
• mongo database with Rails-like mongoose ORM (see https://github.com/publiclab/infragram-js for an example)
• user authentication
• Bootstrap interface with mobile (fluid) layout: http://getbootstrap.com
• graphs with d3 or flot (probably d3)

https://github.com/publiclab/wherewebreathe/issues

Web development phases

1. Setup & communication

• minimum viable product: what features the MVP has, wireframes of interface, details about current desired survey questions/data to go into the database

2. Site architecture and database design

• sitemap (insert here)
• MVC data models, futureproofing & planning for future possible PublicLab.org integration
  • database scalablity and how we store answers to questions.
• possible anonymous aggregate database download formatting in both conventional csv/excel and custom plaintext for analysis in stata

3. Template coding, form and graph implementation

Dashboard

• we will simply display questions instead of having a "dashboard", for phase I - see https://github.com/publiclab/wherewebreathe/issues/1 and https://github.com/publiclab/wherewebreathe/issues/3
• We should have a modal "welcome"

Question form

• https://github.com/publiclab/wherewebreathe/issues/8
• survey: based on: https://github.com/publiclab/wherewebreathe/issues/4
  • current survey draft can be found here: https://docs.google.com/forms/d/1BvjKvH5dUFNjhhDdA4NNtsTHiXgurjJN3-c72mcrvFM/viewform?usp=send_form
• UI/UX testing/review of question form
  • this is something we can do somewhat informally, as the more serious UI/UX review could be after this beta project is launched, and could feed into Phase II revisions later.

Current mockups: none for question form, but can follow questions in draft survey above, and visual style established in signup page below.

Graph and narratives display

• still ongoing in design phase, but https://github.com/publiclab/wherewebreathe/issues/8
• privacy settings page [need more info] https://github.com/publiclab/wherewebreathe/issues/2
• likely d3, aggregate data serving and display for different question types
• privacy review: what info is actually exposed in this graph? Can individual contributor information be deduced? Down-res'ing

Current mockups:

4. User login, security & privacy

• username & password creation & recovery
• security/privacy - both integration of security preferences into sign up, and the security of the database (mostly latter)
• UI/UX testing/review of registration
  • run through the signup process and "new user experience" a few times with varying types of users

Current mockups:

Beta production server setup

• we have VMs available via our hosting provider and a donation from Rackspace... mostly this will be meeting/communicating with Dogi our sysadmin and getting login credentials, installing packages etc.
• security/privacy audit if possible

June 15th status of WhereWeBreathe design process:

This document is in progress; it needs:

• all the latest design decisions
• wireframes, etc copied in
• merging of the top and bottom docs, or cleaning up of the one with time estimates and replacing the top one with it

Time estimates:

1. Setup & communication: 39h
2. Site architecture and database design: 22h
3. Template coding, form and graph implementation: 76h
4. User login, security & privacy: 52h

WhereWeBreathe

Public Lab is collaborating on a project to enable people facing indoor formaldehyde air contamination to better understand the effects of exposure, exacerbating variables and potential mitigation techniques. Participants can advance and collectivize scientific knowledge of chronic formaldehyde exposure's effects by selectively sharing health and symptom information with others experiencing similar issues. The site will feature a series of questions related to exposure and symptoms, and site users will be able to tell their stories and exchange information with others, anonymously if they wish.

Tech stack

We are planning for a Node.js website with:

• express framework
• mongo database with Rails-like mongoose ORM (see https://github.com/publiclab/infragram-js for an example)
• user authentication
• Bootstrap interface with mobile (fluid) layout: http://getbootstrap.com
• graphs with d3 or flot (probably d3)

https://github.com/publiclab/wherewebreathe/issues

Web development phases

1. Setup & communication

• minimum viable product: what features the MVP has, wireframes of interface, details about current desired survey questions/data to go into the database

2. Site architecture and database design

• sitemap (insert here)
• survey: based on: https://github.com/publiclab/wherewebreathe/issues/4
  • current survey draft can be found here: https://docs.google.com/forms/d/1BvjKvH5dUFNjhhDdA4NNtsTHiXgurjJN3-c72mcrvFM/viewform?usp=send_form
• MVC data models, futureproofing & planning for future possible PublicLab.org integration
  • database scalablity and how we store answers to questions.
• possible anonymous aggregate database download formatting in both conventional csv/excel and custom plaintext for analysis in stata

3. Template coding, form and graph implementation

• Dashboard [need clarification]
  • we may simply display questions on the "dashboard" - see https://github.com/publiclab/wherewebreathe/issues/1 and https://github.com/publiclab/wherewebreathe/issues/3
• question form [ connected to DB, 24-40h]
  • https://github.com/publiclab/wherewebreathe/issues/8
• UI/UX testing/review of question form
  • this is something we can do somewhat informally, as the more serious UI/UX review could be after this beta project is launched, and could feed into Phase II revisions later.
• graph and narratives display [need more info]
  • still ongoing in design phase, but https://github.com/publiclab/wherewebreathe/issues/8
  • privacy settings page [need more info] https://github.com/publiclab/wherewebreathe/issues/2

Graph design

• likely d3, aggregate data serving and display for different question types
• privacy review [Need more info on what is specifically desired]
• ongoing design process: https://github.com/publiclab/wherewebreathe/issues/8
• [4-24 hours]

4. User login, security & privacy

• username & password creation & recovery
• security/privacy - both integration of security preferences into sign up, and the security of the database (mostly latter)
• UI/UX testing/review of registration
  • run through the signup process and "new user experience" a few times with varying types of users

Beta production server setup

• we have VMs available via our hosting provider and a donation from Rackspace... mostly this will be meeting/communicating with Dogi our sysadmin and getting login credentials, installing packages etc.
• security/privacy audit if possible

June 15th status of WhereWeBreathe design process:

This document is in progress; it needs:

• all the latest design decisions
• wireframes, etc copied in
• merging of the top and bottom docs, or cleaning up of the one with time estimates and replacing the top one with it

WhereWeBreathe

Public Lab is collaborating on a project to enable people facing indoor formaldehyde air contamination to better understand the effects of exposure, exacerbating variables and potential mitigation techniques. Participants can advance and collectivize scientific knowledge of chronic formaldehyde exposure's effects by selectively sharing health and symptom information with others experiencing similar issues. The site will feature a series of questions related to exposure and symptoms, and site users will be able to tell their stories and exchange information with others, anonymously if they wish.

We are planning for a Node.js website with:

• express framework
• mongo database with Rails-like mongoose ORM (see https://github.com/publiclab/infragram-js for an example)
• user authentication
• Bootstrap interface with mobile (fluid) layout: http://getbootstrap.com
• graphs with d3 or flot (probably d3)

Design process: https://github.com/publiclab/wherewebreathe/issues

Web development timeline:

Basic application setup, front page and layout templates

• express, mongodb/mongoose, jade or HTML/CSS

Database design phase

• models, futureproofing & planning for future possible PublicLab.org integration
• planning for possible future incorporation of lending library logistics, sensor data input and a multipication of toxins
• possible anonymous aggregate database download formatting in both conventional csv/excel and bianary so each possible answer can be a 1, 0, or "," if not answered for analysis in stata

Main HTML implementation

• Dashboard, question form, graph and narratives display, privacy settings page
• UI/UX testing/review of question form

Graph design

• likely d3, aggregate data serving and display for different question types
• privacy review

User registration

• username & password creation & recovery
• security/privacy
• UI/UX testing/review of registration

Beta production server setup

• security/privacy audit if possible?

Melissa's Rough Time Estimates

From the GitHub discussion (https://github.com/publiclab/wherewebreathe/issues), I can get a general sense of what is intended for WhereWeBreathe, however there are some pieces below where further clarification would be useful.

My estimates below are based on doing the same tasks with technology that I have used in the past. Any time I spend bringing myself up to speed on basic foundational skills not extremely specific to this project will not be billed for, but will affect delivery time.

I look forward continuing to work during the mentoring phase to familiarize myself with the tech stack desired for the WhereWeBreathe website!

Web Development Timeline Rough Estimates

Communication/interpretation:

• Initial: Communication on what the minimum viable product (MVP) for this phase of development is. Ideally there will be a summarized document of what features the MVP has, wireframes of some sort to communicate interface, details about current desired survey questions/data to go into the database. Etc [1-20h]
• Ongoing: As needed [1-30% of total time]
• Documentation: not referring to in-line code comments, but to extra documents. [As allocated].
• is this documentation you'll create, or for you to read? I'm assuming the former.

Basic application setup, front page and layout templates

• I wouldnt mind using part of the unpaid mentioning phase to get started on this piece of work. [8-16 hours total]

Database Design

• WhereWeBreathe: assuming final survey is similar to this. [8-24 hours]
• Models, futureproofing & planning for future possible PublicLab.org integration [unknown, need more information]
• this will be mostly just thinking about database scalablity and how we store answers to questions. I'm happy to provide guidance on this as we go, but it'd be great to have a phone session to hash this out. Models basically refers to database tables, in an MVC model of Model/View/Controller.

• ok

• Planning for possible future incorporation of lending library logistics, sensor data input and a multiplication of toxins. [unknown, need more information] This was put in by Nick, but is related to futureproofing discussion - but besides accommodating future additional questions and such, we don't need to do much or any coding/dev work on this until a later phase.

• possible anonymous aggregate database download formatting in both conventional csv/excel and binary so each possible answer can be a 1, 0, or "," if not answered for analysis in stata [4-24hours] (need clarification desired format for 'binary')
• i guess we mean boolean. I think this is Nick's addition but we can think of it mostly as providing standard .csv downloads based on our database, in which I think we'll be using JSON to store responses.

Main HTML implementation

• Dashboard [need clarification]
• we may simply display questions on the "dashboard" - see https://github.com/publiclab/wherewebreathe/issues/1 and https://github.com/publiclab/wherewebreathe/issues/3
• question form [ connected to DB, 24-40h]
• https://github.com/publiclab/wherewebreathe/issues/8
• UI/UX testing/review of question form [ Depends on resources allocated would benefit from assistance of external facilitator to guide testers]
• this is something we can do somewhat informally, as the more serious UI/UX review could be after this beta project is launched, and could feed into Phase II revisions later.
• graph and narratives display [need more info]
• still ongoing in design phase, but https://github.com/publiclab/wherewebreathe/issues/8
• privacy settings page [need more info] https://github.com/publiclab/wherewebreathe/issues/2

Graph design

• likely d3, aggregate data serving and display for different question types
• privacy review [Need more info on what is specifically desired]
• ongoing design process: https://github.com/publiclab/wherewebreathe/issues/8
• [4-24 hours]

User registration

username & password creation & recovery [8-24 hours] security/privacy [does this mean integration of security preferences into sign up, or the actual security of the database itself?] both, more on the database end of things though. UI/UX testing/review of registration [depends on resources allocated] would like to run through the signup process and "new user experience" a few times with varying types of users. I'm thinking ~10 hours?

Beta production server setup

Could probably do this with a VPS form Digital Ocean for $5/month in under 8 hours * we have VMs available via our hosting provider and a donation from Rackspace... mostly this will be meeting/communicating with Dogi our sysadmin and getting login credentials, installing packages etc.

• security/privacy audit if possible?
• yes, let's see how much time this is total and think about how much to dedicate to this.

June 15th status of WhereWeBreathe design process: