ABOUT THE 
PROJECT

OVERVIEW

Embrace books is a non-profit, free bookstore where people can take any book they wish with no qualifications or requirements.

THE CHALLENGE

Embrace Books wants to redesign their website with the hope that more members of the community will engage with the organization through volunteering or make a donation to their cause.

MY ROLE

I wireframed and iterated on the websites design based on stakeholder feedback using Sketch and published the final website design using Webflow.

PROJECT TIMELINE

This project was completed over the course of two months, with several weeks of downtime in-between.

UNDERSTANDING 
USERS GOALS

To kick off the project I wanted to establish the main goals of someone coming to the Embrace Books website, so that I could design solutions to accommodate their needs.

Learn About the Organization

People coming to the site may not be familiar with Embrace Books and their mission. It’s important for the site to present the organization’s mission and their location,hours, and contact information in a clear and engaging way.

Make a Donation

Donations are a vital aspect of maintaining a successful non-profit. For people to be compelled to donate, Embrace Books needs to establish that they are a reputable organization with a worthwhile cause. Images of people behind the organization and links to mentions in the press go a long way in establishing trust with people considering making a donation.

With these goals in mind, I analyzed the current site to identify where it succeeds in fulfilling these goals, and where there was room for improvement.

ANALYZING
THE CURRENT SITE

The main goals of a user coming to the site are to learn about the organization and to make a donation. I analyzed the current site to identify where it succeeds in fulfilling these goals, and where there was room for improvement.

Scanability

With a clear visual and navigational hierarchy people should be able to quickly scan the site to understand what the organization offers and find contact information.

To allow for maximum readability, a general rule of thumb is to have a website's text between 45 and 75 characters per line. The current site has text that spans the full page, making it difficult to focus on the content.

The website is laid out logically with the organization's mission and contact information at the top of the page with a FAQ and link to donations below. However there is no visual separation between sections of the site, making it difficult for users scanning for specific information.

Demonstrating Value

There are no images that indicate Embrace Books has a physical location or mentions in the press that speak to the value of the organization.

Making Donations

A single (non hyperlinked) web address is presented to make donations. A well-intentioned user must enter the url into their browsers address bar, which brings the user to an external site. They must then manually enter Embrace Books information to make a donation.

PRIORITIZING
FEATURES

I prioritized the following to increase the likelihood of donations and volunteers:

  • Separate the website's content onto different pages so that users can quickly find information.
  • Redesign the donation process so that they can be made from within the site, with as few steps as possible
  • Link to press mentions of Embrace Books to demonstrate value and establish trust

WIREFRAMING

I went through several iterations to establish the structure of the redesign. Initially the wireframes allowed for more images, however images provided by stakeholders weren't of a high enough qualitys weren’t high enough to justify their placement on the site.

FINAL DESIGNS

Once stakeholders approved the final designs, I published the site using Webflow to make the site fully responsive.

HOMEPAGE

Navigation

The redesigned site now has a traditional navigation bar with links to other sections of the site, along with social media links.

Press

It was important to call out mentions of Embrace Books in the press to establish trust with users. A video from a local new station is featured at the top of the page, along with links to other press mentions below.

'FAQ'

The FAQ has been redesigned to fit content into accordions so that users can find relevant information faster — without having to scroll.

Redesign

Original

DONATIONS PAGE

Implementing a payment system that allows donation to be made from the Embrace Books site without transferring to a different site is important to gain users trust, which will increase the likelihood of donations.

When the donation button is selected, a payment form overlay appears Users can select the amount of the donation, along with options for a one time or recurring payment.

CONTACT

Having a support network of volunteers help keep Embrace Books running. Providing a separate page with a contact form will increase the possibility of someone volunteering with Embrace books.

ABOUT

Stakeholders provided copy to describe the founding of the non-profit and its mission which I edited to convey this information as clearly and succinctly as possible.

Like what you see?

Let's chat.

CONTACT