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!