Ajax User Interface for Kintera CMS

Overview

Kintera Sphere provides a robust and powerful web site publishing solution. Easily create and update web sites, drive engagement with interactive features like photo gallery, bulletin boards, e-cards, and personalized web site content. The CMS sites module includes more than 160 online tools, WYSIWYG (What You See is What You Get) editing tools, workflow controls, templates, publishing scheduling, personalization, file sharing and reporting. Allowing users to raise and save money, get your message out quicker, build affinity and reinforce their marketing messages. Users are be able to increase productivity with easy-to-use tools such as surf-to-edit and content and article listings.

One of my primary charges as a Product Architect for Kintera was to improve the user experience and efficiency of their proprietary content management system. I wrote and designed 6 product functional specifications and managed expectations, timelines, and engineers and QA personnel.

Replacing Ektron Editor
The first task was to replace Kintera’s current WYSIWYG Ektron editor throughout Sphere to be compatible with IE7 and backwards compatible with IE6. This was no easy task as there are were 16 slightly different instances all of which contained custom dialog windows proprietary to Kintera’s infrastructure. After that spec, there was a follow-up release for Firefox compatibility as Kintera made the business decision to informally support the browser for their Apple Mac clients.

AJAX User Interface
Kintera has a decent content management system however it was often hindered by load times, pop-ups, and productive workflow. My task was to improve this experience by converting it to the first AJAX driven interface in Kintera Sphere. WE took an incremental approach by dividing it into 4 product specifications.

  1. General UI & Site Structure
  2. Content Management
  3. File Libraries
  4. Revisiting & Cleanup

The specifications added new functionality such as drag n’ drop menu trees, rollover contextual information, edit in place, modal dialog box (stylistically similar to lightbox), multiple pages or pieces of content open and the same time. Ultimately the functionality included a completed revised middle tier development architecture to separate back-office presentation from the code layers making it easier to update, manage and make changes in the future using object orientated interfaces.