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!

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!

The Machine

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.

I thought about the benefits and the constraints of tools like NPR’s Book Concierge, NoveList and Goodreads Listopia to create the design. 

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. 

Thank you!

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