Skip to end of metadata
Go to start of metadata

Abstract

"CiviCRM works great, but its visual design and layout could be better. Joomla! has great aesthetics and usability which would greatly benefit CiviCRM."

Integration will be a key to improving CiviCRM. Not only does it need to have its own distinct design, but it needs to integrate into Joomla! and feel as if it belongs. Integration of Joomla!'s aesthetics and usability into CiviCRM would improve the product, but having its own unique identity would be just as beneficial.

Consequently, this project will focus on building a strong design for CiviCRM and applying it not only to the UI but to the template system. Improving the underlying design would also improve the quality of the entire product. As a result, the project would begin with building a strong design and then shift to improving the UI and the template system using the new design standards.

Preliminary work would involve standards and design requirements. Documentation would be created to formalize the design process and ease future improvements to the theme. The documentation would also establish standards specific to CiviCRM and their unique needs. These documents would undergo thorough reviews before any further advancement on the project.

The design itself would rely heavily on HTML and CSS to provide a solid and flexible framework. Any changes would gracefully handle all major browsers with additional support for deprecated versions. It would also handle any possible accessibility issues, addressing concerns that arise from screen readers, scanning software and other methodology.

The template would also address the need for end user customization. In addition to being broken into modules that could be easily swapped by user created components, it would be easily adaptable and clearly commented for those desiring further customization. Additionally, the basic template would strive to provide even the most basic end user the ability to customize the theme. This could be achieved through something as simple as a color picker for the modules or a more complex user assembled puzzle piece approach to the template.

Detailed Description

A Short Introduction and Description:

I am Jon Volkman, a twenty-nine year old male living on the east side of Seattle, Washington. I am currently working towards a certificate in software testing and quality assurance. I have two Associates degrees, one in web design and another in database management. In my spare time, I enjoy reading a wide range of books and spend a fair amount of time on the computer. I also enjoy getting out and exploring Seattle and the surrounding area, finding new vegetarian delicacies and hanging out with friends.

Through school, work and other opportunities I have picked up many skills. In addition to CSS and HTML, I am well versed in PHP. Additionally, I have worked with PC hardware, and am familiar with Linux, Mac OSX and Windows. I also have experience within the print industry, working with the college newspaper for three years. My passion for writing was utilized with the newspaper as a writer and eventually as Editor in Chief. That role also gave me experience managing a small team producing a weekly newspaper, overseeing everything from advertising to the actual layout. I also helped with the production of the college arts magazine for two years. Additionally I am a trained barista who has spent the last two years doing quality assurance on a wide variety of Xbox, PS3 and PC games.

Projection Definition:

In looking to participate in Google's Summer of Code, I read through hundreds of project ideas and possibilities. Yet I paid the most attention to Joomla! and the needs for CiviCRM. Reading through the project ideas, I was most intrigued by the following statement:

"CiviCRM works great, but its visual design and layout could be better. Joomla! has great aesthetics and usability which would greatly benefit CiviCRM."

Integration will be a key to improving CiviCRM. Not only does it need to have its own distinct design, but it needs to integrate into Joomla! and feel as if it belongs. Integration of Joomla!'s aesthetics and usability into CiviCRM would improve the product, but having its own unique identity would be just as beneficial.

Consequently, this project will focus on building a strong design for CiviCRM and applying it not only to the UI but to the template system. Improving the underlying design would also improve the quality of the entire product. As a result, the project would begin with building a strong design and then shift to improving the UI and the template system using the new design standards.

Project Planning and Description:

Original Project Idea from Joomla! Summer of Code 2008 Project Ideas,
Code 08006: http://docs.joomla.org/Code_08006

Until May 26:

Preliminary work on the project would commence upon approval. In the weeks before May 26, the student would begin familiarizing themselves with Joomla! and CiviCRM, paying close attention to their respective designs. Any existing documentation would be provided to the student for review. The student would also query the mentor for any design preferences and they would begin to work together towards a basic, mutually acceptable design philosophy.

May 26 - June 3:

On May 26, the project would formally commence with the student beginning creation of documentation for the new design and standards. Working with the mentor, the student would review and update any current documentation, creating new, CiviCRM-specific documentation as needed. These documents would address any conflicts in regards to design philosophies and ease future upgrades to the project.

Standards for toolbars, menus and the UI would be agreed upon and documented. Basic design standards would be introduced, agreed upon and added to the new documents. The documentation would also address any possible accessibility issues arising from the use of screen readers, scanning software and other methodology. Work on these documents would wrap up by June 3, giving the student a full week to review, update and, if necessary, create any new documentation.

June 3 - June 11:

At this time, the mentor would work with the student to audit the new documentation. Ideally, with the mentor's approval, the student would have a group of two or three peers perform the audit. Afterward, any changes to the documentation would be implemented as seen fit and subject to another audit. This would ensure that before any formal work on design of CiviCRM was started a clear and mutually accepted path was defined. It would also allow future upgrades to be based upon these standards and not subject to the whim of the current designer.

June 11 - July 11

The project would enter the formal design phase by June 11. The student would utilize the newly created design and standards documentation to create a mock up of CiviCRM's new look. Special attention would be given to the color scheme and any layout changes. Additionally, any potential UI alterations would be addressed. With approval of the mock up, implementation of the changes would begin by June 18.

During this period, the student would also delve into Joomla!'s template and component system. By researching Joomla! while implementing changes to CiviCRM, the student will gain special insight into how they can work together. This knowledge will aid the student in ensuring that Joomla! users maintain a sense of familiarity even while working with CiviCRM.

At this time, the concentration for the student would be on the framework of CiviCRM. By initially tackling the underlying frame and strengthening the foundation, the overlay would be that much stronger. A solid foundation would yield a much easier to control UI and template system. The bare bones of the new design, including possible UI and template system changes, would be ready to review by the end of the second week in July.

July 14 - August 4

With July 14 signaling the middle of the project, the mentor and the student would use this time to review the project's status. In addition to the midterm review, a process check would be initiated to ensure that the documentation created at the beginning of the project has been followed. Upon completion of these tasks, the student would begin building out the new design.

As the student expands the design, their attention would turn to the different components. Considerations for the UI, the menus and items such as the user dashboard would be addressed. Care would be taken to ensure that users sense a link between CiviCRM and Joomla!, despite their respective uniqueness. Cross browser compatibility would be ensured and any special accessibility needs implemented. As a final step, the code would be checked for standards compliance and reviewed for any potential optimization. The student would wrap up these tasks by August 4.

August 4 - August 18

August 4 would begin the final stage of the project. At this time, the student's work would be audited against the documentation. The student would strive to find any potential defects in the code while utilizing the project as an end user. The mentor would work with the student on any suggested tweaks or special, project-specific needs. Ideally, the project would be audited by a group of two or three actual end users and any the feedback addressed before conclusion of the project. The project would wrap up on August 18 and at that time both the mentor and the student would begin the final evaluation.

Labels:

Creative Commons License
Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution-Share Alike 3.0 United States Licence.