Document Status

3/1/05: Wireframe mockups are currently being developed for each of the screens shown in the UI flow-chart below. We will update this page - adding new active links - every few days as additional pages are ready.

• Scope
• Giving Feedback
• About the Mockups
• Overview of v0.1 CiviCRM Pages/Components
• How CiviCRM Fits into CivicSpace/Drupal UI
• Links to the Prototype Pages

Scope for v0.1

For the initial release, the UI should cover primary use cases for input, browse, search and output (via export) of core CiviCRM entities - e.g. Contacts, Groups, Relationships. Things that are NOT targeted for this initial release include reporting above and beyond printing of basic contact lists, and complex rules-based searches

Giving Feedback

We want your feedback! Please shower us with comments, creative blasts, questions, etc.

Where should I submit my feedback? You can help keep the 'conversations' focused by using the 'Add Comment' form on the page where the particular mockup is displayed. (General feedback can be added to this main page.) If you have ideas that are better explained with a 'picture' - feel free to attach sketches, screenshots, etc. to the pages (use the Attach File link in the Page Operations menu - on the right side of each page).

Help Us Focus on User Tasks

We anticipate that a wide variety of folks will be using these screens...

• community organizer
• volunteer for an arts organization
• staff member for a client services organization
• etc.

We've listed a few of the anticipated primary user goals and tasks for each screen. We'd like input on fleshing these out - AND then feedback as to how well the proposed functionality, layout and language fit the tasks. Feedback related to consistency, clarity of language, superfluous complexity, and appropriate 'prioritization' of data and functions are also very helpful.

Feedback example... Feedback which describes how a specific task could be better facilitated is really helpful. "I would most often come to this screen to <task description>, but the button for this is hard to find. Consider moving it to the top right corner of the page..."

About the Mockups

These 'drawings' are intended to reflect current thinking on

• which UI components we will deliver for v0.1
• how functionality is organized
• what elements are needed on each screen
• how should they be arranged (by default)

What about help text?

Although there will be free-standing help pages and documentation, we are strong believers in including 'help' (explanatory) text inline as a first 'line of defense'. This text is not yet included in the wireframes. We would welcome specific suggestions about what inline help text would be most useful.

Don't worry about 'pretty'... These mockups are "wireframes", AND the final screens will be 'skinnable' (via themes). So we are pretty much ignoring graphic design issues at this stage (i.e. colors, typography, etc). That being said, if anyone is interested in helping us out with visual design contributions - let's talk!

Overview of Screens

How CiviCRM Fits into CivicSpace/Drupal UI

CiviCRM will be installed as a module - and then should appear as a top-level menu option for users with 'admin' level roles by default.

When an admin user clicks on the "CiviCRM" menu option - the default Browse Contacts screen is displayed. We are planning on invoking a separate set of page template(s) while the user is in the CiviCRM module context in order to focus the user on CRM related tasks. These template(s) will probably suppress most of the non-CiviCRM page components - other than the user's main navigation menu. This will be particularly helpful for multi-page wizard interfaces such as Import.

Links to Mockups

Links will be added here as screens are available for review.