A web app for book recommendations

Missy is a web app that helps you find a list of book recommendations within a theme. The site is focused on children’s books and topics that would help adults have difficult conversations with children.

These are all the important documents that made up the project that you can have a look through:

The Design Document

The Wireframe Prototype

The Mood Board

The Final Prototype

Estefania and I worked together at an independent bookstore in New York, and as booksellers in the children’s section of the bookstore we noticed a pattern that parents wanted to find books that helped them talk to their children about important topics.

Estefania came up with the idea, and she will be building the back end functionality of the site.

I created the design document, prototypes and branding for the project.

We chose to limit the books to children’s books, and have a set amount of themes on the site to choose from. The ability to include your own theme, or to select a broader range of age groups would be functionality we could add later. To make up for the fact that you can’t input your own theme in this version, I included a section of the site for users to suggest themes that are missing.

The tool Estefania is using to create the functionality of the site works as if a real user is operating a browser. We asked ourselves: how can we make this better than someone just doing a google search?

The site map shows the way a user would input information to get a list of book recommendations.

After we finished creating the design document together, I made the site map and the wireframes. I created the mobile wireframes first, and you can click through the prototype.

I then created the brand identity of the project. I created a moodboard to inform the direction of the branding, and library posters were a primary inspiration for the direction of the visual identity of the project.

At first we thought the name of the project should be a fictional character that solves all her problems by reading books, like Hermione or Matilda but after I drew a charming black cat we decided to name the project after Estefania’s cat, Missy. 

I used style tiles to show the illustrations, colors and typefaces together before I started working on the final prototype. It was a way for us to talk about typeface, color, and the way that it fit in with the illustration before I started putting the final prototype together.

I designed a system for the way the books would be displayed on the site. This way the books would be uniform, and it would make the code more efficient because we wouldn’t have to include the book cover image.

Then I created the final prototype. Since we loved the cat illustrations so much, I wanted to include them on every page to add some playfulness to the experience.

I had to make intelligent guesses in the prototype and make choices before we knew how the web app would work.

The next step of the process is to build the site, and prepare for things to change based on what we learn about how the site will function once Estefania goes deeper into creating the functionality of the site.

I would like to be able to test the prototype and see how parents of young children would use it.  I would like to know how what we experienced as booksellers in a community bookstore translates to a web app.

Thank you!

If you’d like to talk to me about this project, please  write to me or find me on twitter!

Creating a Guide to the FOIL Request process in New York State

Overview

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 project is on github the wireframes are on figma and the research on this google document. The site is up and running at foil.astoria.digital!

The Challenge

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. 

The Team

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. 

The Process

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.

System Map

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. 

The Letter

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. 

Thank you!

If you’d like to talk to me about this project, please  write to me or find me on twitter!

Branding for Technically Spiritual

As the marketing intern at Technically Spiritual, I created the branding for the podcast and the graphics for social media posts. You can see the style guide in my portfolio.

I collaborated with the host of the podcast to create the brand’s mark to fit the vision of the project. When I started working with the podcast’s marketing team, there was an existing logotype and mark. My first assignment was to develop the mark and create new options.

I began by refining the existing mark. I established a white that was a pale cream to reduce the contrast between a pure black and pure white. The existing logotype used Cormorant Garamond, and we kept it because the elegant typeface suited the sophisticated look of the brand.

The initial mark was created before I joined the team and was influenced by a moodboard that was created by Prerna Manchanda (the host). It used circles around the logotype to reference loading, but it felt too close to existing UI. We also wanted to distinguish ourselves from other podcasts on mindfulness, and wanted to avoid the circle as a mark (On Being uses the O in On Being as a graphic mark).

We worked on different ways to expand on the mark, thinking about rays of light, loading bars and circular elements. The goal was to reference the UI of loading and themes of the podcast like mindfulness and connection to nature.

The rays of light expanded on the circular loading symbol and connected to nature in the minimal and abstract aesthetic of our brand.

Although I the rays were my favorite strategy, it was not my role to make the final decision.

We went with a rule that uses a gradient to fade out. It references an essential element of graphic design and the idea of loading by referencing the convention of a progress bar filling in from left to right.

It was the right choice for this brand. It was important to keep the mark minimal and classic, without overtly referencing the topic of the podcast. With a name like Technically Spiritual, it is a good idea to avoid too literal a visual reference to those terms because the name is evocative.

I learned how to work with a close knit team and realized the vision of the project by creating a graphic representation of the podcast. I’m grateful for the experience of working on the mark for a brand, and expanding on it through the style guide and marketing graphics.

You can see the way the mark fits into the rest of the branding materials in the style guide.

Thank you!

If you’d like to talk to me about this project, please  write to me or find me on twitter!

Web design on Glitch

Glitch is a delightful tool for working on website design, I’ve been designing sites using HTML and CSS to develop my skills. Here are a few new projects.

This site about the Aurora is my most recent project, where I use grid layout to organize the content. The challenge was creating a smooth transition between a large window and a small one, which you can see if you click on the image and play around with the browser window.

The Emily Dickinson poem was a great way to work with typography on the web, and adjust it as the window size gets smaller which you can see by adjusting your window. The small window keeps in mind a user on their phone, who would need a smaller font since they would be holding the screen closer to their eyes.

The Jane Austen site is a multiple page website that uses layout methods for the navigation, and for areas of text like in the visit page. It also includes a section for the author’s books where you can read the first chapter of each of her novels. The site shows the fundamental design elements of a website, as well as the skills involved to build a site.

I’m still making projects, and they will be updated on my Glitch profile page.