Catholic Charities of the Archdiocese of Washington

HELP THAT EMPOWERS THOUSANDS OF PEOPLE

Catholic Charities D.C. is the social ministry outreach of the Archdiocese of Washington, operating in 29 locations. Since 1929, the agency has been delivering food, shelter, and medical care to people in need, regardless of their social, economic, or religious background. 

The collective efforts of over 800 employees and numerous volunteers are dedicated to the mission of aiding the most vulnerable in their communities. With 47 programs spanning nine domains, including food assistance, healthcare, mental health, employment, job training, immigrants and refugee services, and more, the organization provides vital support.

The strength of the organization is fortified through collaborations with various partners, including government agencies, nonprofits, foundations, businesses, individuals, schools, and churches.

WEBSITE AIMED FOR CHANGE

For the Catholic Charities D.C. team, the organization's website plays a crucial role in providing information to its diverse audiences on how to seek or offer help. The current website at that step was established in 2018 and hadn’t been updated since then. There was no documentation, and the communication team struggled with every new change they wanted to make to the existing content. 

The site's navigation and information architecture, with intricate menus, presented usability issues. The team aimed to inject more vibrancy into the overall corporate brand visual representation, making the website attractive to the younger generation while ensuring it remains user-friendly for more mature audiences.

DISCOVERY WORKSHOPS & PROJECT OBJECTIVES

Our partnership with Catholic Charities D.C. kicked off with a series of discovery workshops. Spearheaded by our dedicated business analyst, this process involved close collaboration with the communications team. Together, we pinpointed the site's primary users, delving into their needs, existing challenges, and goals for each persona.

With this information in hand, we identified and outlined functionalities geared toward alleviating the pain points of each target group, enhancing their experience on the website to be more efficient and enjoyable.

With this information in hand, we identified and outlined functionalities geared toward alleviating the pain points of each target group, enhancing their experience on the website to be more efficient and enjoyable.

Overall, we defined three primary goals for the new website:

In addition, our goal was to equip the site management team with a user-friendly mechanism for editing existing content and adding new content without requiring technical expertise or involvement from the engineering team. We devised a detailed project roadmap, accounting for all the business and technical challenges identified during the discovery phase.

NEW VISUAL LOOK & COMPONENT DESIGN

With a clear understanding of the site’s audience and how to help each type of visitor navigate their journey, it was time to craft a visual design that conveyed the brand’s essence.

Our design team presented several options for the new color scheme, design components, and page wireframes, engaging in detailed discussions with the Catholic Charities D.C. team. Our goal was to center the site’s design around components that could provide both consistency and variety. We managed to create a visually appealing style that evokes positive energy, trust, empathy, as well as love and hope.

Overall, we created designs for 20 main pages, including Home, About Us, Get Help, Ways to Give, Volunteer, and more. For pages of separate programs and events, we created templates with multiple components that can be mixed depending on the content specifics. The choice of colors, headings, and other visual elements aimed to guide visitors through the abundance of information intuitively. Furthermore, we created a responsive layout that seamlessly adapts to all device types – be it computer, tablet, or mobile.

IMPROVED CONTENT ARCHITECTURE & NAVIGATION

Rebuilding the website’s information architecture was one of the project’s most challenging aspects. The old site’s structure was too complex to follow and confused most visitors. We focused on developing clear paths for all user personas, made critical adjustments, and created a new site map. 

The solution of the lousy navigation was complex from a tech perspective, but resulted in an easy-to-use upper menu. Because each main section now had a menu type specific to the category and its content, users no longer needed to click several times to find the necessary information. The upper menu now helps users quickly navigate across different domains, activities, and programs.

ADVANCED SEARCHING EXPERIENCE WITH PROGRAM FINDER

Previously, people seeking help on the Catholic Charities D.C. website could use internal site search, but it was a rather insufficient experience. The on-site search configurations were very basic, the results often irrelevant, and this functionality needed improvements. We also received a request for a location-based search from the CCDC team. 

Five Jars engineers built a custom REST API to integrate this functionality, ensuring smooth work between the back and front ends. With the new searching functionality integrated, users can now either type in the related keyword in the search field or use filters to narrow down the results. The programs can now be filtered by type of help, location, age of people participating, as well as name.

Since the website's launch, the Program Finder remains the most visited page.

VOLUNTEERING CALENDAR & ON-PAGE WIDGET

The event calendar emerged as a crucial feature for the volunteer community. We not only enhanced its design but also integrated necessary plugins and add-ons to ensure its optimal functionality. The ability to subscribe to the calendar updates via Google Calendar, iCalendar, Outlook 365, and other systems was added as well.

Our tech team additionally developed a custom calendar widget that can seamlessly be integrated into different pages without requiring the expertise of a tech specialist. This widget showcases selected event types that are relevant to the specific page it is placed on. The immediate access to information on activities and events in relevant sections of the website now ensures that this information is more accessible and reaches the intended audience.

CUSTOMIZABLE CONTACT FORMS

Contact forms for program participants, volunteers, and sponsors were to contain different fields, and the data from the submitted applications were to be sent to different organization departments and branches. To address these requirements, we created four types of contact forms that are already integrated into the necessary pages and added several templates that can be edited and added to new pages via the website admin panel.

STREAMLINED CONTENT MANAGEMENT

Making site administration straightforward and simple for everyone working with it in the organization was a top priority and one of the initial team’s requests. So, we created a backend that is both highly flexible and rigorously accessible for people without deep technical knowledge. 

In the new admin interface, content of every type starts with a default layout and default components. Site moderators can remove or add new components from the sidebar. All without requiring an engineer to change the code or site configuration.

Ahead of the release, our team provided guides and conducted several online training sessions for the Catholic Charities D.C. team, demonstrating all the functionality in real time.

• Library of 100+ pre-built and editable components, each with a clear, specific use
• Support for embedding multimedia and media library categorization for quick navigation across files
• Every page on the website can be changed quickly, without engineering team involvement
• Detailed documentation on all the aspects of the content creation process
• Online workshops and governance for best practices in the WordPress CMS

COMPLEX CONTENT MIGRATION & SMOOTH SITE LAUNCH

Simultaneous with the unveiling of the completely revamped pages, we performed a complex migration of the relevant existing content. Our team configured automated export and content mapping, ensuring its smooth integration into the new system.

Leading up to the launch, the Five Jars engineering team meticulously crafted a detailed pre-launch checklist for the new system. This ensured that even the slightest tech nuances requiring caution were taken into account and anticipated. The new website underwent thorough checks for hosting, domain settings, security, performance, SEO, and more.

OUTCOMES ACHIEVED

The revamped website now effectively caters to the diverse needs of all target audiences, be it individuals seeking help through Catholic Charities' numerous programs, those eager to volunteer, or potential donors. With the updated design and navigation, there are quick entry points that bring all visitor types to necessary pages and encourage tangible actions.

Updated information architecture ensured that the communication on the website became more feasible, consistent, and efficient. All pages are component-based and can be easily created and customized by site moderators. The admin panel is adapted to the team's needs and does not require any technical skills for effective work.

Our team was especially keen on contributing to such an impactful organization, changing the lives of thousands of people for the better. We are glad our work has brought the marvelous team at Catholic Charities D.C. closer to their goals. Today, our collaboration continues. Five Jars further supports the CCDC team with their digital journey.