Hi, I'm Siddhant Rajagopalan, a second year Undergraduate student studying CSE from IIT Bombay.
As part of my GSoC 2014 project which is to improve the usability of CiviMail, I have come up with 2 mockups. I would appreciate feedback regarding which mockup would be a superior fit.
Aim of the Project
Browser based applications are becoming the de facto web standard. CiviMail is an important component that has a high impact. Current workflow in CiviCRM is lengthy and multi-step process. It would be easily converted into simple javascript application, using modern framework such as AngularJS. AngularJS is a leading javascript framework and building on it should be a good example for future CiviCRM usability improvements.
Research Link: http://wiki.civicrm.org/confluence/display/CRM/Research
UI Mockup
After researching various competitors in sending bulk mailing, I have come up with 2 UI versions of mockups.
The mailing interface will now act as a single page application.
It will be written in Angular JS, a JavaScript framework.
UI Mockup 1
This mockup is in the form of an accordion.
Here is a link to the complete mockup.
http://wiki.civicrm.org/confluence/display/CRM/UI+mockups+1+%3A+ACCORDIAN
UI Mockup 2
The mockup is in the tab format.
Here is a link to the complete mockup
http://wiki.civicrm.org/confluence/display/CRM/UI+MOCKUP-2+Tab+form
Advantages of accordion format (UI Mockup 1) over current civiMail UI
The entire civiMail will be loaded onto a single page.
The accordion will have 3 options instead of the original 5
Track and Respond and Mailing Content will be merged, as will Test and Send and Schedule.
When all the required fields of a particular bar of the accordion have been completed, a check mark will appear for that bar to signal completion.
The save and continue option will be more dynamic since we can do portions of all steps, without having any completed and save the mailing in that state. Earlier if we were saving after doing a portion of step 3 which in that case was mailing content, step 1 and 2 needed to be completed. That restriction no longer exists.
So if we are unsure about a particular field in a step, we can move on to further steps and save the mailing. We can then go back to the aforementioned field at a later time.
An accordion ensures there is no need for a previous and next button, since everything is happening on the same page, simply by selecting the appropriate bar.
Advantages of the Tab format(UI Mockup 2) over current civiMail UI
The tab format of UI mockup 2 is a single page application.
This means we can go from one tab to another without the page reloading. Unlike current civiMail UI, the tabs are interactive.
Instead of 5 tabs, there are only 3 tabs. Again Track and Respond and Mailing Content have been merged along with Test and Send and Schedule.
In the current civiMail UI, if we want to go from Select Recipient to say Schedule and Send, we need to use the next button multiple times to carry this out. This becomes tedious and is not user friendly.
However in the format of UI mockup 2, we can do this directly, by just clicking on schedule and send in the tab bar. Thus we are making the tab buttons interactive.
Since it is a single page application, this will happen without the page reloading making the UI user friendly.
Even in this format, the save and continue button will be more dynamic than the current civiMail UI.
Comparison Between UI Mockup 1 and UI Mockup 2
Both accordion and tab format will behave as single page applications.
In the accordion format, we can see all the steps of the mailing process on the same screen.
In the tab format, at a time we can only see one particular step of the mailing process.
The tab format shows the user less information on one screen. The accordion on the other hand shows all the information which can get confusing.
However, seeing all steps of the mailing on the same screen can also be an advantage
The accordion format gets rid of the previous and next button which the tab format does not do.
Visually, the tab format will look similar to the current civiMail UI, so current users will not need to adapt.
The accordion format will be a complete change.
Thus both have advantages over one another.
Plan for next 9 weeks
Week 1-3:
1. First prototype of the new CiviMail UI
2. Minimal set of tests to ensure working of the prototype
Week 4-6:
1. 2nd iteration based on the feedback from early alpha testers
2. A blog post with details of the new version and requests of feedback from the community
3. Deploy a public demo instance
Week 7:
1: Document work done
2: Create plan to migrate other civiCRM components to a similar framework
Week 8:
1. Testing and bug fixes
2. Merge new code into CiviCRM master
Week 9:
1. Project wrap up and buffer week
2. Final blog post: Learning, what’s achieved and roadmap for further improvements
Way Ahead After the Project
Researching various bulk mailing systems has shown that responsive templates are an essential feature that civiMail is missing out on. The user should be able to build these templates easily using something like drag and drop functionality.
Have ready made templates for various kinds of bulkmail, like newsletters and announcements, or surveys and so on.
Using civiMail as an example, model the entire civi UI using AngularJS since it is the way forward and it is much more user friendly.