18F/foia-hub — pull request #40 by konklone (2014-08-15 20:58:57+00:00)
Title: Prototype

This pull request merges in the work @vz3 @jackiekazil and I did on a very rough, aspirational prototype of a FOIA request process.

Some things to bear in mind: it does not handle all the requirements one would imagine for a FOIA request system. It is not "designed". In fact, it is laid out (and screengrabbed below) for a mobile phone, so that we can focus on interactions rather than aesthetics and filling space. It also doesn't "work", in the sense that no requests are emailed or otherwise transmitted out of the system (though they are saved).

Functionally, the below is a Jekyll site, using the code in this repository, [18f/foia-hub](https://github.com/18F/foia-hub), and at request-time, talks to a Django API in [18/ffoia-core](https://github.com/18f/foia-core). It uses contact data in [18f/foia](https://github.com/18F/foia/tree/master/contacts) from an associated [Python scraper for FOIA.gov](https://github.com/18F/foia/pull/4). Our other repo, a Node app at [18f/foia-search](https://github.com/18F/foia-search), is not used here.

The home page...

![demo-home](https://cloud.githubusercontent.com/assets/4592/3938417/a73da246-24b9-11e4-935c-13b1a48c4626.png)

...is pretty bare and nothing works! The search box doesn't point to anything, and the blog post snippets are just ripped from [OIP's FOIA blog](http://www.justice.gov/justice-blogs?component=416).

Clicking the "Request" tab at the top brings you to an agency selection screen. It is blunt, just an agency name selection, using Twitter's [typeahead.js](https://twitter.github.io/typeahead.js/examples/) library. It defaults to showing all agencies:

![demo-requests](https://cloud.githubusercontent.com/assets/4592/3938478/5506d0aa-24ba-11e4-9160-affb7bbcfd2e.png)

But supports autocomplete:

![autocomplete](https://cloud.githubusercontent.com/assets/4592/3938509/c2e821be-24ba-11e4-8bd5-5315bcff8bc9.png)

Only GSA and OSTP work.

There's obviously a lot more to be done there, like matching on keywords, descriptions, and even FOIA response metadata and documents, to get people routed to the right place. Also, these are populated by the ~99 top-level "agencies" as listed on FOIA.gov, and it probably makes sense to put some lower-level "offices" with their own strong identity and independent line of work (like the FBI) alongside top-level agencies.

Selecting an agency brings you to a landing page for them, with a basic description of their agency, and some common FOIA requests. This description is taken from existing data, but should really be better optimized for FOIA. The "common requests" section was written by me.

![demo-request-1](https://cloud.githubusercontent.com/assets/4592/3938521/0a96c5d8-24bb-11e4-965c-cfbad2186392.png)

Some basic contact information - name and email, no phone number or address requested. Optionally, we added a couple date fields to help scope the request in a structured way.

![demo-request-2](https://cloud.githubusercontent.com/assets/4592/3938656/60010b18-24bc-11e4-85ea-6b220f8894af.png)

The date field pops out a pretty spiffy date picker, using [pickadate.js](http://amsul.ca/pickadate.js/).

![demo-request-3](https://cloud.githubusercontent.com/assets/4592/3938679/a7d08e5a-24bc-11e4-9e3b-d51b032d33f9.png)

We also have a couple of GSA-specific fields on the GSA form, as adapted from their [current online form](http://www.gsa.gov/portal/content/103778).

![demo-request-4](https://cloud.githubusercontent.com/assets/4592/3938685/be4a0cd8-24bc-11e4-9027-64e997d58326.png)

Finally, we have a couple form fields around fees. We tried to collapse a somewhat complicated question (can we proceed with any fee-incurring work? if so, how much will you bear?) into one input field. The fee input field syncs with the bolded number automatically.

If the waiver box is checked, a text field appears to fill out.

![demo-request-5fees](https://cloud.githubusercontent.com/assets/4592/3938703/09f3e636-24bd-11e4-904f-87b1603fb9f6.png)

When a request is submitted, a success message is shown, with a simple auto-incremented (and zero-prefixed) tracking number assigned, along with the agency's contact info. This doesn't actually initiate any emails right now, though the request data is stored in a database.

![demo-request-done](https://cloud.githubusercontent.com/assets/4592/3938715/31c6adba-24bd-11e4-8126-67b622d17d54.png)

Some things we're working on next:

* [Moving the templates](https://github.com/18F/foia-hub/issues?q=is%3Aopen+is%3Aissue+milestone%3A%22Sprint+3%22) out of Jekyll and into Django using [jinja2](http://jinja.pocoo.org/).
* [Integrating search into the prototype](https://github.com/18F/foia-search/issues?q=is%3Aopen+is%3Aissue+milestone%3A%22Sprint+3%22), using documents from [State](https://github.com/18F/foia/pull/11) and [FOIAonline](https://foiaonline.regulations.gov/foia/action/public/home).
* [Refactoring our contact data](https://github.com/18F/foia-core/issues?q=is%3Aopen+is%3Aissue+milestone%3A%22Sprint+3%22) scrapers and structure