Designing for Growth: Books Beyond Bars

Team

Michelle Kung, Manasi Muke

My Role

My major contributions were in the form of conducting user research, proposing an Information Architecture, designing wireframes for the Homepage, Take Action page, and About page. I also conducted user testing with wireframes, helped develop the brand identity and the content strategy guide, and designed the final prototype.

Tools

Balsamiq, InVision, Adobe XD

Final Product

Interact with our Prototype here.

Design Problem

How might we enhance the current Books Beyond Bars website in a way that better reflects their work and helps them grow?

Project Overview

Books Beyond Bars is a prison book program. Their mission is to provide reading materials to incarcerated individuals in New York prisons. They advocate for policies that support prisoners' access to information and encourage literacy, education, self-empowerment and personal growth of these individuals in order to provide a brief escape from the dehumanization of the criminal justice system. ​ The purpose of the redesign was to help BBB grow as an organization and tell the story of their work and its impact through the website.

Project Goals

• Tell a compelling story to effectively communicate the importance of BBB's work and to bring in more donations, funds and partnerships through the website.

• Clearly communicating the impact of BBB's work.

• Making the website content easy to consume and understand, broken up and visually interesting.

• Helping BBB establish its own digital presence independent of CAL, but ensuring that it is still connected to CAL in some ways.

• Giving BBB room to grow. So that when they have the capacity to expand, it doesn't need to be redesigned from scratch.

A Summary Of Our Timeline

Understanding The Stakeholder Needs

"We can only do what we're doing only if more people see us and are enticed to donate. The website it important to explain to others what we do and how prison resources aren't enough for the incarcerated people."

From our client meetings, we understood that BBB's current website is pretty new. We also learned that the revamp must include a lot of key changes that better reflect the work that BBB does. Our clients expressed several needs, the following being of utmost importance:

• Growth that is sustainable and lets them fulfill more requests.

• Growth as a separate entity from the Center for Appellate Litigation- their parent organization, but still some connection to it in some ways.

• Educating more and more people on the limits of prisoners' access to information and literacy.

• Wanting to connect with more people in order to expand their operations.

Understanding The Users

Since the website is relatively new and BBB doesn't have analytics set up yet, it was a little difficult to pinpoint who the exact users of the website were. BBB was in dire need of more funds and individual donations in order to sustain and grow bigger. Which meant, the primary users of the website would be Funders and Individual Donors.

The secondary users of the website would be Lawyers from different law firms - those making requests for their clients, friends and family of the incarcerated individuals, student organizations, and individual volunteers. To understand what aspects of an organization's website are important to funders, we interviewed someone who writes grants for non-profits. Additionally, to understand the donor behavior on non-profit websites, we interviewed a few people who frequently donate to non-profits. ​ We consolidated our findings in the following key insights

Competitive Research

We asked the clients to list a few websites that they like and why. This was to understand their preferences with examples and to be able to look at how information is structured on non-profit websites. We did an in-depth analysis of these websites, what works, what doesn't and why. We identified several patterns and noted what we could take inspiration from.

Revising The Information Architecture

We learned that BBB's website needed a lot of new content for them to be able to tell their story the right way.

Once we had a clear idea of the content, we came up with the rough information architecture. This was done on the basis of two things-

• User research that guided the priority of content

• Competitive analysis that offered us various ideas on content structure

Card Sorting

With the rough information architecture, we conducted card sorting with 6 participants. Our aim was to understand if the hierarchy of the content and the labels were logical to the user.

Moving on, we finalized our Information Architecture-

Building The Foundation

The current BBB website has minimal content, which meant we had numerous options to explore when it came to designing the look and feel of the website. But, our clients are restricted in terms of having the website built. Meaning, they only have one person on the team who would complete the redesign on either WordPress or Wix. We also had to ensure that the design would be quick and easy to implement. All these considerations had to be taken into account when thinking of the design.

Wireframing

We quickly put together wireframes for key pages of the website and tested them with representative users to get an idea of whether the flow of things made sense to them.

One recurring comment was that the 'Learn More' header was very vague and the participants had no idea about what kind of content to expect the page to have. We explored a few options and renamed it to 'How We Help' to better reflect the page content. Our user test participants liked the 'How it works' and the 'Ways to contribute' sections.

Final Design

We explored several possibilities and inspirations but soon we realized that it would be difficult for our clients to generate all this new content and put it on the website within the suggested time. ​ As a result, we scaled down on the level of fidelity- focusing more on the structure of the content and the story-telling. Our final product was drastically different from where we started. It was more important to focus on helping BBB successfully communicate its story through the website. We also had to account for the fact that although the Books Beyond Bars team does not have a lot of content now, they WILL need it in future in order to grow and have a digital presence that's effective in helping their cause.

Following is a breakdown of the final website design-

Home Page - Hero Image

How It Works Section

​ Home Page

Compelling information about importance of books and reading, with relevant image. This is to attract more users to understand the cause and compel them to donate.

The organization's mission front and center for the funders to see.

The 'How It Works' explains how BBB works. That ensures the transparency of BBB's functioning to the funders and donors. This shall also help build trust.

The impact statistics shows key impact of BBB's work.

The 'Creative Showcase' is a space that flaunts the work of BBB's clients- the incarcerated people. This helps the website visitors understand the impact of BBB's work.

Impact Page

Annual impact report for the funders to see, and key statistics that highlight the impact of BBB's work.

This sections offers details about the prisons that BBB ships books to. This is useful for the users who might want to send someone a book.

Client testimonials laid out in an easy to scan manner. Key sentences from the testimonials could be extracted and highlighted to grab attention.

Take Action Page

Ways to contribute clearly laid out to make it easier for users to make a decision.

Amazon wishlist widget added to the website to ensure that potential donors look at the wishlist first.

About Page

Team pictures add a personal touch to the website and help greatly in building trust.

A timeline visualizes growth and emphasizes impact.

How We Help Page

A list of organizations that BBB has partnered with in the past. This is helpful to build an image and also bring in more partnerships by influence.

The 'Learn More' section has relevant resources for the users to educate themselves about prison issues and prison libraries.

Additional Deliverables

We recognized the client needed more than just a prototype to be able to grow. We housed the content structure and some design ideas for story-telling within the prototype. To ensure that the website had easy to consume content, we came up with an in-depth content strategy guide.

We also presented them with a possible road-map that they could follow in order to grow their presence.

Reflections

If given more time, I would like to work with more 'actual content' from the clients and explore the possibilities of how that could be better designed to tell Book Beyond Bars' story. I would also like to conduct more user testing to identify the issues in our current design and fix those. ​ Our clients were fairly satisfied with the product we presented to them. They appreciated that we came up with suggestions for a lot of crucial new content and also handed in a comprehensive content guide to support that. They also agreed with us on the future directions for BBB.