Founded in 1991, The Cara Program is a Chicago-based non-profit that empowers men and women affected by homelessness and poverty with the skills, confidence and resources to secure and sustain quality jobs and achieve long-term success. Since their founding, they have placed more than 2,500 individuals into full-time, rewarding positions with leading Chicago area companies such as ABM Lakeside, The Hilton Hotels, JP Morgan Chase, Sodexho, and more.

The Cara Program sought a redesign of their static website, one that engaged visitors by quickly delivering key information that was clear and concise, and could be easily maintained by Cara staff. Being a non-profit website, they also needed a way to accept donations, recruit volunteers, allow visitors to join their mailing list, and recruit sponsors and employment partners. In addition to being able to simply accept donations, they wanted to eventually “empower” donors to use social media and/or other outlets to spread the word, champion their cause and help others donate or otherwise support. The ability to share some content also needed to be a feature on The Cara Program "child" program websites: Clean Slate, Quad Communities and Career Pathways.

Duo Consulting was chosen to implement their goals and Drupal was the platform chosen.

Why Drupal?

Drupal was the platform of choice because it provided the features and functionality the Cara Program desired, and integrated with CiviCRM, a free, open source CRM and their current source of event management.

Design and Architecture Direction

When we approached the new architecture for The Cara Program, we knew there would be some challenges. On the old site, it took a lot of reading and scrolling before you could understand a program’s purpose, and what it did for the students. We needed to tell the story of The Cara Program concisely, so that new users could orient themselves to the program and partner programs without having to wade through 2+ pages of content. We also needed to allow users to take a deep dive into detailed information when it was relevant to their search.

The solution we came up with involved simplifying the main navigation into 3 main buckets: a discovery bucket for users looking to find out what The Cara Program is and what it does (What We Do); a metric bucket for users wanting to know the effectiveness and reach of the program through statistics and explanations (The Impact), and finally, a call to action bucket for users looking to get involved (What You Can Do).

Within each bucket, we wanted to provide two tracks for accessing information. The first track was the fast track for users skimming the website. This included short one-to-two sentence overviews, without page refreshing. The second track was integrated into the first track, so when a user found the category relevant to their research, they were given an option to read more about that topic and dive deep into the content. This content strategy allowed users who skim information to skim more effectively, and those doing in-depth research to easily access full pages of information.

We attended motivations, met volunteers, and toured classrooms. One theme from all of our experiences is that The Cara Program was all about movement: movement to get your attention, movement to take your life in a new positive direction, movement to make a difference today.

We were inspired to make sure the site design captured the energy and movement of everyone involved. We went to work on UI patterns like the infinite image scroller on the homepage, attracting the user with vibrant imagery. Video and events weren't buried on an internal page; they expanded to a full frame on the homepage. We also placed the private and commercial donors into a ticket stream on the bottom of each page, to show how their contributions help keep the program running.

Functionality
Homepage

The homepage slideshow is controlled by 2 Views (well, 1 View with 2 block displays); one that displays the 3 scrolling images shown with Semantic Views (so we could easily control the markup, which can become an issue when using custom JavaScript), and another that displays the global text in the top left area. The scrolling effect is all frontend, created using some jQuery/JavaScript niceness.
The 3 sections immediately below the scrolling images are controlled by a View, which displays a nodequeue of “homepage spotlight” content.. Content added to the queue can have a scheduled publish or unpublished date, allowing for automatic promotion or demotion. Each display style has a particular taxonomy term associated with it. Depending on which term you select, the output will be styled to match. A video will display the play button with custom text, an event will display the enlarged date, and announcements will display the map of Chicago. Clicking on either one of those items replaces the scrolling images with the content from that item (again, some jQuery/JavaScript niceness).

The scrolling ticker in the footer area is a list view, which is modified to scroll using the front end.

Inner Pages

The inner pages generally follow one of three formats:

• Tabbed display of teaser content below the main navigation
• Display of image below the main navigation and links in the sidebar
• Menu Block display only (no image or content below main navigation)

To help accomplish this, all content is categorized by the section in which it appears (“what we do”, “the impact” etc). A page may also contain a secondary tag, which is useful for other reasons. Depending on what “section” you are in (or menu path or both), content will be displayed differently.

Clicking on any of the 3 main links at the top takes you to a page that displays a View using the Tabs display, showing the teaser of the first 3-5 items in that section (see note on displaying content for someone skimming the website). Clicking the “learn more” link takes you to a page with no image or content below main navigation, but 4-6 links to other pages within that menu, which in turn are created using the Menu Block module.

Clicking on any content in the “About” section (content in the About Us menu) takes you to a page that displays an image, which has been assigned to the same “section” as the page below the main navigation. This gives you the option toadd a unique image for each page in the “About” section.

Key Modules

For the Drupal pros out there, here are some of the key modules we used for the site:

CiviCRM

CiviCRM was chosen because in our experience, organizations with needs like The Cara Program's benefitted greatly from a CRM solution, as opposed to a few forms that just capture data. CiviCRM provided the ability to easily create custom forms that collected various types of information from collected data group volunteers, sponsors, donors, and mailing list subscribers, and track all activities (follow up phone calls, appointments, meeting, email, snail mail) with those persons. Custom reports on this data could then be generated be exported in various formats, for potential import into desktop applications. It also provided the ability to potentially enable personal campaign pages, so donors could spearhead donation drives and we could provide them with the ability to embed donation widgets on their website.

Domain Access

This was allowed all four sites to share the same codebase, database and some of the same content, which meant new features enabled on one website were immediately available to all others, and upgrades and modifications to Drupal and/or contrib. modules only needed to happen once.

Honorable Module Mentions

Context: Used primarily to set theme variables when in certain “sections” of site.
Views (of course).
CCK (of course).

Drupal version: Drupal 6.x