Project Reclass
Redesigning a responsive website for a nonprofit organization.
Background
Project Reclass is a 501(c)(3) nonprofit providing education and vocational training in prisons and rehabilitation centers. At the time of this project, Reclass had just partnered with Howard County Corrections in Maryland and begun preparations to launch its newest curriculum, ReVision. Reclass had also recently expanded its mission from solely focusing on incarcerated veterans to serving incarcerated people from all backgrounds.
Defining the Problem
Project Reclass established its brand identity and website in 2019. Since then, the site has had many different editors, resulting in some major structural and visual inconsistencies. Several essential pages featured alignment issues, inconsistent visual hierarchy, and old web copy that didn't fit the pages' layouts. While the client didn't need a complete website redesign, they needed help updating several key pages.
Analyzing Other Nonprofits
To learn what works best for other nonprofit websites, I analyzed Project Reclass’s current website and four other education and rehabilitation-focused organizations: Code Your Dreams, The Last Mile, Brave Behind Bars, and Northwest Education Fund. At this point, I began to recognize several best practices for various pages, beneficial features, and effective patterns that users recognize when visiting nonprofit sites.
Assessing Reclass’ Website
Beyond the alignment and consistency issues, I noticed that most nonprofits feature a CTA in the top right corner of the navigation bar to draw users’ eyes toward a page or feature—usually a “Donate” or “Get Involved” page. Project Reclass’s CTA, on the other hand, was being used to promote an older curriculum that’s no longer their highest priority project. Perhaps it could be replaced with a higher-priority page instead?
User Interviews
The next step was to find out what the clients’ needs and priorities were. I interviewed Project Reclass’s two cofounders, Kunal Jha and Tay Nishimura, to gather insight about the organization’s mission, values, and identity. I also interviewed two other current members of the organization to learn about their experience working with Reclass and using its website. During our sessions, I encouraged participants to have the Project Reclass website open in front of them, allowing me to learn how they navigated the site in real-time.
Affinity Mapping
After concluding these interviews, I sorted my findings using an affinity map based on the areas where my interviewees experienced pain points, general website issues, and the organization’s identity and mission. Thanks to the insights provided by the founders and other members, I determined three primary issues to tackle for this site redesign:
1. Better visibility for the organization’s curriculums and partnerships
2. A way for volunteers to apply through the website
3. A more visible and attractive Donate page
Defining the Users
Based on the clients’ insights, I developed two user personas for the types of people I would be designing for: the donor and the volunteer.
Therese, the prospective donor, recently learned about Project Reclass and their mission resonated with her. Before she makes a financial contribution to the organization, she needs to feel confident that Reclass is a reputable nonprofit worth supporting.
Miles, the new volunteer, is a college student seeking an internship with a nonprofit organization. He’s young and idealistic, and he wants to contribute to an organization that’s making a difference by helping justice-involved people turn their lives around. He will need to know about Reclass’ mission, the work he would be doing as a volunteer, and how to join the organization.
Prioritizing Tasks
After determining the site’s problem areas, it was time to prioritize pages, features, and flows. I decided to focus on the most critical pages— the landing page, About Us, Get Involved, Donate, and ReVision Curriculum pages— first. Because the clients wanted a way for new volunteers to sign up through the website, I would also need to design a volunteer application form and prototype the form submission flow. Later, I would have the opportunity to design the ToyNet Curriculum page, Blog, Our Team, and Privacy Policy pages.
A Better Sitemap
My first priority was redesigning Project Reclass's sitemap to match the users' mental models. Based on the clients’ wishes and other nonprofits’ best practices, I decided to place Reclass’ curriculum pages front and center on the landing page, where users can glean an overview of their outreach. These curriculum pages showcase the organization's products and outreach, so having them heavily nested in the original site’s navigation presented a major structural problem.
Improving the Navigation
To make the site’s navigation less confusing for users, I created a new menu item, “Curriculums,” to house the ReVision and ToyNet curriculum pages and moved the Team page to the “About” menu item to better align with nonprofit site users' mental models. I determined it was best to combine the two previous volunteer pages, Outreach and Technology, into one easy-to-locate “Get Involved” page. Because users are primed to scan for the Donate CTA in the top right corner of the navigation, I replaced the previous link to the ToyNet curriculum with a link to the Donate page.
The Volunteer Flow
The next step was designing the volunteer application flow. The volunteer flow follows the user from the landing page to the “Get Involved” page, where the user decides whether to fill out and submit the application form. I needed to design a form that gathers all relevant information from applicants without overwhelming them. Include too many fields, and Reclass could lose potential applicants.
Mid-Fidelity Concept
The next step was rendering the key screens in mid-fidelity to provide proof of concept to the clients. Since the clients reported difficulty maintaining consistency and alignment throughout the site, I designed the mobile and desktop screens simultaneously so the responsivity would be as close to 1:1 as possible. With easily replicable patterns, the clients will have an easier time maintaining the site in the future.
Testing the Volunteer Flow
Next step–usability testing! I gathered four participants to test the prototype for the volunteer application process. My objective was simple: to test whether users could easily locate the volunteer form and decide whether to apply. Participants shared their screens during testing while I asked questions about the page's copy, layout, and clarity.
Although participants reported no issues locating the Get Involved page or the volunteer form, they had trouble determining whether they fit the application criteria. I asked my participants several clarifying questions to understand this issue and asked several peers for feedback to locate the source of the problem.
Revisions
At the start of this project, the original Get Involved page contained limited information about what the organization was looking for in potential volunteers. During testing, I realized the written distinction between the “technology” and “outreach” teams needed to be clearer to inform prospective volunteers about their responsibilities. Someone unacquainted with Project Reclass’ internal jargon requires a clearer written context to understand the distinction between teams.
I tried several layouts before settling on a series of bullet points detailing the types of jobs and specialty areas the organization was looking for. When later usability testing participants were asked for their preference between these two iterations, they unanimously preferred the bulleted list format and felt that the second layout better informed their decision to apply.
On To Phase 2!
Until this point, I needed to limit this project's scope to the “Landing,” “About,” “ReVision Curriculum,” “Get Involved,” and the “Donate” page. For the second phase of this responsive web redesign, and because this is a redesign Project Reclass plans to implement in the future, I needed to flesh out every page I couldn't fit within the original project's scope– the “Privacy Policy,” “ToyNet Curriculum,” “Our Team,” and “Blog” pages.
Final Mid-Fidelity Screens
Project Reclass’ founders intended for the “Our Team” page to highlight Reclass members' contributions to the organization. These summaries are highly detailed, albeit lengthy, so I designed each card to be expandable. Although Reclass only collects voluntarily provided information, having a “Privacy Policy” page reassures users that their information is secure. The final curriculum page for Reclass’ flagship program, ToyNet, features a CTA link to the ToyNet emulator, which provides an interactive preview of ToyNet's first module.
The Final Product
After successfully completing all ten responsive screens and flow testing, it was time to render the screens in high-fidelity, present my final revisions to the clients, and ship the finished product! The clients were thrilled with the updated screens, new pages, and revised website copy. Although the website desperately needed this update following the expansion of Reclass’ mission, much of the site’s visual identity required only minor alterations to align with the organization’s updated mission.
See For Yourself!
Thanks for sticking with me until the end of this project! Want to see these responsive desktop and mobile screens in action? Tap the button below to interact with the fullscreen prototype in Figma!
What’s Next?
Ten responsive screens and one fully redesigned website—done! Now let’s talk about what I’m doing right now for Project Reclass.
I’m in the process of coordinating with Project Reclass and a WordPress developer to implement the redesigned website. The old website is currently hosted on WordPress, so the organization will continue working with that platform to ensure a seamless transfer of data and assets. It’s been a privilege to design a website for an organization that helps people in prisons and rehabilitation centers turn their lives around. With the redesign nearly shipped, I’m excited to see what the future has in store for Reclass!
