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:
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.
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.
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.
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.
The process behind designing a book recommendation web app
The book recommendation web app is part of the website design The Speculative Bookshop a website for a bookstore that specializes in science fiction and fantasy books. The goal of the app is to help someone find a book recommendation by answering questions based on books they have read before.
The best way to find a new book is to find someone who shares the same taste as you and knows what new books are coming out, and has read widely so you don’t miss out on a classic or a book that is well written but didn’t get a lot of attention when it came out. This design is meant to take the knowledge of a well informed bookseller and translate it into a recommendation tool for a bookstore website.
People ask for recommendations when they need help finding the next book for themselves, their child or as a gift. All of these users can help find the right book if they know what the reader likes already.
Since I am working on my portfolio projects alone after my coursework in UX design, I wanted to take advantage of my experience in customer service.
Turns out I’ve been conducting user research all along, as a bookseller.
The research for this project happened over the course of the years I worked as a bookseller, and I used my memory of giving book recommendations to inform the design.
I used observations of customer interactions to inform the way that I gave book recommendations. I analyzed my experiences giving recommendations, and identified patterns in those experiences to create a solution for recommending books.
The easiest way to talk to someone about finding the right book is knowing what they have in mind when they are looking for something. A book you love is a great mental model for books you want to read in the future, and a couple of books gives you a better picture of the taste of the reader.
Each interaction with a customer was an interview, where I asked them specific questions about what they were looking for. After a while, my questions became more pointed and my line of questioning more efficient.
As a bookseller, I would start by asking, what have you read lately that you liked? If they didn’t have an answer to that I would ask, what have you hated? Sometimes they have a stronger reaction to what they don’t like, and it’s fun talking about books that annoyed you or tortured you in school. I would give them a couple of suggestions and give them the summary of that book, and based on their reactions to my first ideas I would pick out the next few books.
When you love to read, the tragedy is finishing a book you loved and having to search for the next book.
That dry spell in between good books is something I’d like to shorten as much as possible, and this tool is meant to fill that gap.
The Machine starts with a question about the age of the reader and the genre they are interested in.
Once they choose the age or genre, they are given popular titles from that genre (classics, bestsellers, award winners) because there is a good chance that they would have read some of them. If they don’t recognize any on the list they can add their own. This way, there is a starting point and based on the themes of the books they chose the Machine can start to narrow down their suggestion.
The user is given the choice to narrow down the selection by entering books they hate, the list can be populated with controversial titles as well as the choices from the previous question. This way, books can be filtered out based on the themes in the books they didn’t enjoy.
Then, the user gets the option to get the best choice or to browse some titles. The best choice would be chosen based on the themes it has in common with the books it entered. The option to browse would include a wider range of options.
At the end, the user has the ability to learn about the system by finding out why that book was chosen, showing the themes that it pulled from the books they like (and excluding the ones they hate) along with the book summary and links to booksellers reviews.
Then the user is given the choice to try again, get more ideas or to reach out to a particular bookseller, if they have a question too nuanced for the Machine.
My goal was to translate the personal book recommendation experience to a web app, and although the benefits of talking to someone in person is the connection you make and the excitement you share about a book, I think the expertise and process can be shared by both methods.
I learned to translate what I observed about book the recommendation process into a process to something that can be replicated by a machine.
Next time, I’d love to work with a team to collaborate on research and testing.
I designed a way to find book recommendations, designed by a bookseller but carried out through a program. I learned how to take my experience and translate them to design research.