Website design for a literacy nonprofit

The Problem

Jason Kelley, the founder of the Comics Appreciation Project (CAP), has an ambitious vision: to use graphic novels to boost children’s literacy in schools in Georgia and North Carolina. Since 2022, CAP had expanded significantly, growing from donating graphic novels to hospitals and children in foster care to being directly in the classroom, spearheading literacy programs for Title 1 schools. With this growth in reach, Jason needed a website that would both reflect the impact of his work in the community and possess elevated functionality that would prepare his organization for future expansion.

The Solution

For ease of explanation, I’ve broken the solution into three pillars: Discovery, Development, and Execution.

Discovery

Before making anything for CAP, I needed to have a solid foundation of their history, their milestones, and their goals for future growth. The information I gathered here would guide my design and development process for the course of the project.

I began with a series of calls with Jason, CAP’s founder. My other groupmates helped with asking him questions, and over the course of about two weeks, we gathered a document that gave an in-depth overview of CAP: their history, their objectives, and their future direction. Jason has big dreams for CAP, and I wanted to be sure that the website I developed would carry him to the next step!

Development

Alpha

My red flag for this project was that, even as the lead dev, I had never used Elementor, which was our client’s preferred website-building platform. So for our alpha, I decided to get my hands dirty and see what I could make with Elementor’s free version — basically a dummy site that would serve as a playground for me to experiment with Elementor’s unique functionality.

I won’t deny, making this site as incredibly frustrating, especially because I was using the free version of Elementor. Every good feature was locked behind a paywall, including advanced customization. Still, I was able to make a basic site that looked decent, which was enough to carry me to the Alpha stage.

Beta

For our Beta, I was finally given the keys to the kingdom: admin status on CAP’s WordPress site. But before I could make major changes, we first had to identify the pain points for the existing website through user testing.

Through that process, there were three main takeaways:

1. The website’s information architecture was poor and disorganized. Users had trouble navigating and finding information.
2. Many images, such as the header image on the original homepage, were too large and distracting.
3. Pages were cluttered with elements and blocks of text.

Once we had identified the main problems with the existing website, myself and my group mate Sophie Brewer began indeating the solution by making a complete wireframe of the pages we planned to build out in Figma.

From there, I was able to make a first draft of the new homepage, programs page, and about page. Initially, Elementor had a steep learning curve. I am used to having much greater access to customization when building websites using HTML, CSS, and JS, and Elementor buries that level of customization rather deep within its functionality. It is a drag and drop website builder, and while I wanted to keep it simple for simplicity of future maintenance, at times I became incredibly frustrated with its limitations. I had to download plug-ins at times to do things that would have been simpler to do with code, for example.

But after many long, frustrating montages, I was able to create drafts of three pages: Home, About, and Programs.

1.0

Moving into our 1.0, it was time for me to dig in deep and expand the website’s design, implement key features, and build out basic layouts for every page. I won’t lie — this was the hardest part of the project yet. Building out the pages alone was daunting, but I also had to deliver on the functionality.

There were three key upgrades CAP needed:

1. A booking system for their graphic novel class lending sets.
2. A streamlined donation platform.
3. An updated blog page for their graphic novel book reviews.

Beginning with the booking system, I researched several options for CAP. Because they are a small operation without a large inventory, the plug-in needed to be light enough for their current needs while simultaneously accomodating future growth. Once I had decided on an option and the plug-in was purchased, I spent some time using custom CSS and adjusting the form to fit CAP’s needs. I also used the Google Calendar API to integrate the bookings into CAP’s Google Calendar.

The donation platform was a bit more difficult; most vendors charge a service fee, cutting into the amount of donations that actually go to the cause. Luckily, our client had already been using Zeffy, a fee-free donation platform for non-profits. From there, I used Zeffy’s documentation to implement custom donation forms for three different purposes: 1) Share Care Boxes, 2) Scholarships, and 3) General Donations. Zeffy provides shortcodes for each form made, so implementing them throughout the website using Elementor’s shortcode widget was simple.

Strangely, the blog page — which I thought would be the most simple — gave me the biggest headache. Due to CAP’s high volume of blog posts, a filtering and tagging system was needed. There was no simple way to do this with code, but with the help of two different plug-ins and several hours of rewinding the same YouTube video, I was able to get it to work.

1.1

Fortunately, I didn’t pull many a late night during the 1.0 for nothing. If I was in the mines for the 1.0, during the 1.1 process I got to see the sun and really focus on polishing what I had initially made.

At this point, the rebranding portion of the project was also complete, so I updated the pages with consistent typography and a new color scheme. I focused on additional cohesive visual elements, such as updated headers and footers, custom buttons and donation banners, and consistent hero elements, and icons. I also made templates for page layouts I used repeatedly so that the client would easily be able to create new, consistent pages in the future.

1.1 was part of our final checkpoint, Checkpoint 4, and also as a part of this checkpoint, I made website documentation for the client. The purpose of documentation is so that the client — or future developers — can take what I made and recreate/repurpose/edit it. The documentation included instructions for the plug-ins I installed, best practices for website layouts, tips for maintaining a consistent visual identity, and instructions for how to use the Elementor templates I made.

Execution

At this point, the website was ready to hand off to Jason Kelley, CAP’s founder. With the two weeks of class, I focused on polishing our project website (check it out!) and preparing for SLAM. There was much to do: scripting for presentations, designing our SLAM booth, doing dry runs of presentations and heading back to the drawing board.

At the time of publishing this, SLAM is in about a week. I can’t really believe it’s over! I’ve learned so much in this class; I’ve taken all the design and development skills I garnered through previous courses and blended them together into a scaleable product that will do an abundance of good in schools throughout Georgia. At times, the work was overwhelming, and the problems seemed insurmountable. But I found that each time I tackled one of those moments, I was stronger to jump over the next hurdle, and the next. Standing at the end, I’m proud of what my team has made. For years, CAP will use what we built to help reach more kids, and tell the stories worth sharing. If reading this has inspired you, or if you have a loved one who could use the joys of reading in their life, please head to the new Comics Appreciation Project website and join their mission to give back.