Stop Family Violence

Web 2.0 content management and interactivity (2008-2009)

Stop Family Violence is a not-for-profit organization whose mission is to promote action against domestic violence at the local, state, and national levels, and to provide outreach and support to victims of abusive relationships. With an active and award-winning web site since 2000, SFV came to Gorges in 2008 to bring its web presence to the next level, including an updated, user-friendly, and interactive design for the public site, and a more flexible and powerful content management system at its foundation.

(click the numbers to see more) Screen Shots

Stop Family Violence Home Page

High-Level Requirements

After years of creating and maintaining content on her first website, our client had a large number of specific desires for the new content management system, and we sought to understand and meet her needs through many interactive design sessions. At the highest level:

The content management interface must be simple and straightforward enough for technical novices, yet flexible and powerful enough to satisfy the advanced needs of our experienced, web-savvy client.
Because the client's goal was to build a strong online community around the anti-domestic violence mission, the system must support a high degree of user interactivity via a suite of user story, volunteer, signature, commenting, and flagging tools to invite active visitor participation.

Content Management System Highlights

After extensive analysis of the client's specific requirements, Gorges determined that existing third-party content management systems would not be able to meet the overall project goals, so the Gorges user interface designer set to work designing a full-featured, custom content management system to do the job. Among the highlights of the CMS:

Desktop-Like Responsiveness Using JavaScript and AJAX

In order to give the content management system the flexibility and responsiveness of a desktop application, we chose to build the interface entirely in JavaScript, selecting the ExtJS JavaScript framework for its powerful AJAX capabilities and extensive library of UI widgets. This means that once the application has loaded, editors can view, edit, and manipulate any part of their site without having to wait for additional pages to load, as in a traditional web application. With its extensive use of advanced JavaScript UI elements, including trees, drag-and-drop, data grids, menus, pop-up windows, tabs, WYSIWYG editors, closable panels, toolbars and status bars, buttons, and tooltips, the system has the look and feel of a desktop work environment.

Full-Featured Content Creation and Management

The ExtJS tree widget is used to implement an interactive site map complete with context menus and drag-and-drop to move or copy pages to another location.
As in a desktop application, editors can work with multiple open tabs, simultaneously editing pages, managing images and documents, searching the site, managing overall site settings, and so on. A change to any open tab, or to the site map, instantly propagates throughout the rest of the application so that all data is kept in sync.
In addition to the primary content of each page, reusable content elements can be created and, using JavaScript drag-and-drop, positioned on page sidebars and in the central viewing area of the home page. These elements can contain custom text, images, or videos; or encapsulate and link to other site pages. As a site editor creates these elements, they are stored in a central repository where they can be edited and reused on other pages.
Image and document managers allow editors to upload and delete images and PDF files and edit their metadata. These files can then be inserted onto site pages through a browsing widget.
Our client wanted to offer editors an array of page types to hold different types of content with different display templates, such as news stories, event announcements, opinion pages, blogs, grant and job announcements, and so on. When site editors create a new page, they first select a page type, and then are provided with a page-type-specific template into which they can add their content. These categories also provide a basis for site visitors to search for various types of content (e.g., all events, or all job announcements). We created a custom tool for our client to manage the page types so that the categories could evolve over time.
Site editors can apply both predefined and invented tags to their pages which site visitors can use to access related content.
A form response manager allows a site editor to view all the responses that have been submitted for the various forms on the site, which include contact forms, volunteer forms, petition and sign-on letters, and user stories. The responses can be viewed and edited, and in the case of user story submissions, can be removed from public display or flagged for inappropriateness.
Pages can be added to multiple locations on the site. Menus and breadcrumbs will be displayed appropriately for each location, but the pages are not copied but merely referenced in multiple places, so that updates to the page apply to all locations.
New pages and folders, and changes to existing pages and folders, can be previewed before going live.
There are multiple user roles and access privileges, including system administrators who can add and manage page types and other users; and site editors who can add site pages and then modify or delete that content.

The Public Site

The public site, as well as the "back end" of the content management system — the software layer that mediates between the user interface and the database — were built using the powerful rapid-application-development framework Ruby on Rails. Interactivity and web 2.0 features are provided using the small and fast jQuery JavaScript library to create a slideshow of featured content, accordion and fly out menus, light boxes, and client-side form validation.

Designing for the Future

The client has a broader plan for the future, which includes offering the content management system to other anti-domestic violence organizations around the country as a cost-effective means for them to create and maintain customizable, branded, professional-quality websites. A key feature would be to help participating organizations populate their sites with rich, up-to-date content by pooling pages from all the member sites to create a library of news, commentary, research, action alerts, and media. This would benefit sites in two ways: a site could facilitate the dissemination of its own content by adding it to the library for display on sister sites, and it could augment its own content with library resources created by other sites. Sites would share content, not by the conventional method of linking to offsite pages, but by drawing library content directly and seamlessly into their own pages.

Although multi-site and library support were not part of the initial deployment, by understanding the client's larger goals we built key architectural support structures into our software design from the beginning, thus avoiding duplication of effort down the road.