I created this project with the Astoria Digital team, a group of software engineers and designers who aim to build things to help our neighborhood.
The goal of this project was to teach the Freedom of Information Law (FOIL) request process, provide resources to complete a request, and describe the system critically so it can be improved.
The barrier to entry for people who want to be involved in state government is that they do not understand the system.
In my role as a volunteer with Astoria Digital, I researched 50-a and FOIL requests in New York State. I found that the research was intimidating, I felt that the expectation was that journalists and lawyers were the only ones who were meant to use Freedom of Information Law requests.
When I spoke to a community organizer with SURJ, she said that their work is primarily in education. She explained that a barrier to entry for people who want to be involved is because they are intimidated by the systems. This inspired me to use the research I had done on FOIL requests, and use it to design a tool that explains the system.
Who is this for?
The user I had in mind was someone who does not have a background in journalism or law, who wanted to learn about the FOIL request process in order to complete a FOIL request for the first time.
Sites like Muckrock provide a helpful tool to create requests and keep track of their status, and I wanted to supplement the functionality of tools like these with an introduction to the process.
I want to prevent the panicked feeling of being overwhelmed or discouraged by information that is difficult to find or sort through, so the project was designed with a friendly and frank guiding hand.
I researched 50-a and interviewed a journalist, a paralegal and an activist familiar with the process. I created the wireframes, and wrote the copy of the site based off of my research. With Chris Deluca’s help, I built the site using CSS and HTML.
Chris Deluca is a software developer who has been a wonderful mentor to me. We collaborated on the code, and I relied on his expertise to improve my understanding of HTML and CSS. Chris added his design sensibility to the header, footer and use of icons. He hosted it on github pages and then put it up on the Astoria Digital site.
Alex Fan created the branding for Astoria Digital, and the typefaces from his style guide were incorporated into the final design. The site could not use the exact style of the main website because the content of the site dictated it’s styling, but I worked to incorporate as much as the style guide as I could without losing the clarity of the format.
I began by researching 50-a, FOIL requests, and social justice groups that focus on police accountability. I created a document of my research so I could share my work with other groups.
Then I interviewed a journalist, paralegal and a community organizer. I asked them about the FOIL request process. I wanted to know what tools they used to complete FOIL requests, and I asked them questions about the process.
I’m most interested in what is frustrating about the system.
Reclaim New York has a friendly, engaging and colorful system map describing the process of the FOIL request. They lack a reference to the limitations to the process and the resources are all shared as static images and posters, which are not accessible to screen readers and difficult to see on small screens.
I wanted to include the problems in the system, so that someone coming to this for the first time can think critically about the process and be encouraged to dig deeper.
The initial idea of the site was to create a poster that showed the system. I created a map that outlined the process, and included all of the essential information.
As I organized the information in my notebook and created sketches, the structure emerged in the form of an annotated letter.
Everything you need to know about the process is in the letter, and the annotation was a chance for me to add what I was learning about the system and include links and resources.
This is the Request Letter section from the wireframes. Each part of the letter has it’s own heading and annotation. The background of each letter is white to read as a piece of paper.
You can see all of the wireframes on my the project page on figma, including the system map.
The mobile version of the site was a challenge, because the site reads best if the proportions look like a piece of paper. I used typography and layout to make sure that the small screen size worked just as well as the larger sizes.
These are screen shots of the final design which show how the layout of the page changes with the width of the screen.
Another challenge that had us muttering at our computer screens, was how to translate the blank space element of the wireframe into the website. The blank bars show that this is an element that needs to be filled in by the letter writer, but it needs to be distinct from form functionality.
The gray bars were difficult to translate into HTML and CSS while keeping it accessible to screen readers. Instead of trying to recreate the blank bars, we used placeholder text with a gray background to communicate the information that needs to be filled in.
What I learned
At the beginning of the project, Chris proposed that the design process be collaborative. Instead of creating a finished design and Figma and trying to recreate it in code later we built the design together. The design process was directly influenced by the constraints of web design.
Since I have a background in graphic design and an interest in learning about web development, and Chris has complimentary skills we were able to teach each other and give each of us a chance to participate in the design process. It was great seeing Chris mutter and play around with the code, it gave me insight into my own muttering.
How to help
You can contribute the project’s github , I would appreciate it if the work was fact checked and I would appreciate ideas on how to share this tool with people who need it.
I hope this project can teach people about the FOIL request process in New York State and support efforts to hold government agencies accountable.