Published
Monday, April 24, 2017 - 14:43
Written by

Not too long ago, we wrote a little blog post about some of the work we’ve been doing for CiviHR's new user experience and visual design and after months (and months) with our paintbrushes out it’s finally time to take the lid off the next phase of that project... integrating that look and feel into CiviCRM core…

The outcome is a new “Theme” extension for CiviCRM called “Shoreditch” that you’ll soon be able to download and install to completely update the look and feel of your CiviCRM installation!

The “Shoreditch” Theme

The new look and feel is based on the style toolkit that you can find here:

https://invis.io/V4AOSDWKE

We’ll follow with some more technical details of the theme in a later blog post, but what you of course want to see is how does this actually look… and in true Extreme Makeovers style here’s some of the before and after’s from the new theme:

Old: Dashboard

New: Dashboard

Old: Contact record

New: Contact record

Old: Advanced search:

New: Advanced search:

We’ve also had the opportunity to attack whole modules of CiviCRM...

CiviCase

One of the first modules was CiviCase.

Our focus has been on simplifying the experience, keeping everything you need to know about your case on a single screen that features friendly pullout-style windows (much like task management software Asana). At a glance the updated improvements are:

  • An updated case list from allowing you to search by case type or status in a single click

  • A timeline view showing case history

  • A check box system allowing users to quickly check off tasks

  • Colour coded tags

Case list:

Case Summary Screen:

Case activities/timeline:

The above are static designs, but to understand how it all fits together we’ve created this little gif of the work done so far...

Notice how you can move between cases smoothly and review activities in the feed without needing to click in and out of modal windows :)

We’ve also added icons, logos and colour-coded tags to make the system both visually appealing and easy to use. Watch this space for some more updates coming soon on this project!

Mosaico

We’ve also worked to integrate the MOSAICO library more fully with CiviCRM.

For those who missed the original Blog post this is a project to replace the CiviMail email editor with a responsive ‘drag-and-drop’ interface (a-la-mailchimp!), allowing CiviCRM users to create beautiful emails with ease.

We’ve created another little gif to see it all in action!

The new Mosaico extension uses the new styles to good effect to make a simple, clean wizard interface for creating your mailing.

 

So where are we at?

The new Mosaico extension is in final testing before release and we hope to have it available in the next week or two. It will be designed for v4.7 but there will also be an unofficial backport for v4.6 users also available. The intention is that after a little bit of road testing this will become the default mailing editor for CiviCRM and will "ship with CiviCRM core".

In terms of the Shoreditch theme we’re still in heavy development…  we’re about 60% of the way through the whole interface for CiviCRM, but there’s still a lot of work to do… (for example picking some final colours… be-where you may need sunglasses for the next image:)

We’ll be starting a “make it happen” campaign to raise the funds to complete the work shortly and if you think you can contribute please do get in touch (jamie@compucorp.co.uk) and we can hopefully get this initiative completed.

You can get the current version of the shoreditch extension at the link below but note that it is undergoing daily changes and probably not suitable for production quite yet (but feedback is welcome anyway!):

https://github.com/civicrm/org.civicrm.shoreditch

Work on the new CiviCase is ongoing and we would roughly expect this to be completed by the end of the summer, along with a number of other improvements to the CiviCRM user interface that we are hoping to include!

We’ll be showing off the new user interface in more detail at CiviCON St Louis, so really hope to see you there!

Right, back to the canvas...

Caio!

 

Comments

Wow, this is very impressive!

Thanks for this hard and splendid work!

This is really exciting!

Great to see this is happening and is already in progress.  I think it is an important step forward.  Well done.

I've only had a quick glance through, but I'm pretty sure you guys have put a lot of work in to this.  All the best and more power to you!

Looks very nice! Good work Jamie. One question though. If someone is using the old civicrm theme and installs mosaico does that still work?

Looks really nice.  I look forward to the day when it is complete and live for use users.

I'm hoping this is all responsive!

Long overdue!