Embrace books is a non-profit, free bookstore where people can take any book they wish with no qualifications or requirements.
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.
I wireframed and iterated on the websites design based on stakeholder feedback using Sketch and published the final website design using Webflow.
This project was completed over the course of two months, with several weeks of downtime in-between.
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.
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.
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.
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.
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.
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.
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.
I prioritized the following to increase the likelihood of donations and volunteers:
I went through several iterations to establish the structure of the redesign. Initially the wireframes allowed for more image content, however assets provided by stakeholders weren't of a high enough quality to justify their placement on the site. I adjusted the page layouts to compensate for the lack of original image content from Embrace Books.
Once stakeholders approved the final designs, I published the site using Webflow to make the site fully responsive.
The redesigned site now has a traditional navigation bar with links to other sections of the site, along with social media links.
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.
The FAQ has been redesigned to fit content into accordions so that users can find relevant information faster — without having to scroll.
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.
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.
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.
