CiviCRM Is Getting a New User Experience – Shoreditch Theme

If you’ve used CiviCRM at all, you can surely appreciate that the interface feels like something that was developed in the early 2000s before the trend toward mobile-responsive designs ushered in the era of larger, cleaner, more modular page structures and design elements. If you’re using it on a desktop and have taken the time to get past some of the oddities of the interface, it mostly works pretty well. That being said, it definitely doesn’t inspire a sense of beauty, peace, or general well-being.

The shame here is that while the underlying structure of CiviCRM has undergone many iterations of updates to make it faster, sleeker, and more secure, the UX design has remained largely the same. All of that is about to change in 2018!

A Quick Look at the Nonprofit CRM UX Landscape

Let’s take a moment to acknowledge that while CiviCRM’s UX is dated, CRMs, in general, haven’t been exactly at the top of the list for most beautiful User Experiences.

Raiser’s Edge 7 vs. Raiser’s Edge NXT

Just a few years ago Raiser’s Edge from Blackbaud had one of the most hideous interfaces I can think of. Only recently with the launch of Raiser’s Edge NXT did they present something that doesn’t cause me to recoil in horror. Check out this comparison shot from Neon CRM’s recent review of the platform, and you’ll see what I mean.

Salesforce.com vs. Salesforce.com Lightning (LEX)

Similarly, Salesforce.com recently underwent a complete interface redesign that took their platform interface from something that felt dated to something that feels slightly less dated in 2016, and slightly revised that in Fall 2017.

One of the reasons these interfaces change so slowly is because of the enormity of the impact a single alteration can make. Not only does the underlying functionality and code have a lot of interdependencies that can break with these sorts of changes, but the tens of thousands of users can have a difficult time adjusting to changes in their workspace. One of the changes Salesforce.com made to their interface in 2016 was to alter their navigation menu from a horizontal top menu to a vertical left side menu. They had so much negative feedback from this one change that they switched it back in their Fall 2017 update.

CiviCRM’s New UX

Background and Effort

As with many great CiviCRM projects, this one was largely undertaken by a CiviCRM partner organization, in this case the Compucorp Team lead by Jamie Novak with funding for the project coming from the Zing Foundation. The CiviCRM core team has also contributed to the project. This is the single most significant retheming of the platform since it launched 13 years ago. This is no small task. This is not just a matter of changing some colors and fonts. This requires a complete rethinking of many of the underlying structural elements of CiviCRM and making sure proper hooks are in place to allow for making the platform responsive and providing support for changes to all elements of the interface—all while ensuring that none of the 1 million-plus lines of code are broken.

Already the project has involved over 20 contributors with a majority of the contributions coming from three or four individuals. Nearly 500 hours of effort have gone into this project, which has also included core platform changes. Started in 2015, this project is nearing completion now, after three years of labor.

To get a sense of how big a deal this actually is, consider this: Salesforce.com and Raiser’s Edge make hundreds of millions of dollars every year in sales of licensing and subscriptions through their platforms. Raiser’s Edge NXT (13-15K orgs) and CiviCRM (10-12K orgs) have fairly similar user bases in terms of size, yet CiviCRM operates like a nonprofit, offering their software for free and surviving off the contributions of the CiviCRM community, which totals a tiny fraction of the revenue these larger companies amass. It took these other companies many years to get to the place of making these sorts of significant updates to their platforms. CiviCRM, thanks to the dedication of the core team and community contributors, is making great progress in keeping up with the changing landscape in the nonprofit CRM market.

One advantage CiviCRM has that these other platforms don’t is that it is open source. The open-source model allows rapid development and rapid scaling because it is able to leverage the work of a community of contributors as well as other open-source platforms. The CiviCRM Mosaico extension was built on top of the great work of the folks who built the Mosaico email template project, greatly reducing the amount of effort required to bring that level of feature to CiviCRM users. Read all about CiviCRM Mosaico here.

First Look at the New Look

This is what you came for. So let’s dive right into what is changing with Shoreditch, the codename for the new CiviCRM theme framework.

Contact Dashboard

The new contact dashboard utilizes the screen real estate in a much smarter way, highlighting the things you use frequently. One feature you’ll notice is the introduction of a vertical left side menu instead of the not-useful, widgetized sidebar.

 

• I always felt like the tabs on the screen were more a part of the dashboard content than a menu. The sidebar is a smart way to highlight this differentiation.
• I can’t tell you how many times I’ve seen people hunting for the actions menu. Now it is clearly delineated through the use of color.
• I absolutely hate the yellow/green/gray color that was so pervasive in the old theming of CiviCRM. Now we have a restful light blue-gray color with a restrained and tasteful use of brighter colors to highlight important elements.
• I love that the top-level menu is a lighter color, allowing it to sort of fade away while giving the unique on-screen content the weight it deserves.

In a nutshell this revision eliminates the extraneous elements on the screen that have nothing to do with the content you are working on at the moment. The only global element that is visible is that top-level menu. Everything else on the screen is focused on the task at hand, which is previewing this specific contact’s details.

Activities

One of the features on the contact record that I really like in the new version is the activities feed.

Before – Main View

• In this before screenshot, everything looks fairly jumbled. There doesn’t seem to be any clear visual order.

Before – Detail View

• When I click to view an activity, I’m presented with a modal which takes me out of the context of the list of activities.

After – Main View

• The new presentation of the activities presents things in a nice timeline view with the date prominently displayed above each entry.

After – Detail View

• When I click to expand an activity it presents it to the right of the timeline, which helps me to maintain the context of the activity and easily click to the next one if I want to.

 

Search Results

Maximizing the use of screen space is huge with this UX update. Why have a big 27-inch monitor if your on-screen content width is restricted? It feels like I’m working on an old CRT monitor inside of my big flat screen. Perhaps search results and reports demonstrate this best. Look at the difference before and after for a search-result listing.

Before

After

Feature and UX Updates to CiviCRM Components

The new Shoreditch project isn’t stopping at just retheming the primary CiviCRM interfaces. There are second-level projects in progress too, including an overhaul of CiviCRM Cases and the work done on the CiviCRM Mosaico extension. These projects create new or refined functionality along with a UX rework. We already mentioned the CiviCRM Mosaico project, and you can read more about that here. But the CiviCRM Cases project is worth spending a little more time looking at.

CiviCRM Cases

Though CiviCRM Cases was built with Case Management in mind, it’s a great way to organize any contact-specific project where you have a series of repeated tasks or you want to keep track of everything related to an ongoing project in one place. Our clients have used it for managing slightly more complex membership-onboarding processes, managing grant applications, or even just good old project management with tasks and milestones.

Check out these before and after screenshots!

Before

After

If you’re like me, you had to look twice to see whether these are even presenting the same data. I like how it moves from high-level to detailed as you scroll down the page, and how the activities and milestones are highlighted so you can quickly see what’s happening across your “cases.” I also love that I can just click the “Activities” tab at the top to switch to an activities feed across all cases.

Gamechanger

Here are a few of the things people are saying about the new UX for CiviCRM.

“Beautiful! Wow, this is very impressive!” — Sean Madsen
“Looks really nice. I look forward to the day when it is complete and live for users” — ecotypes
“Awesome! This is really needed!” — dedicated web design

I Want It Now!

If you’re like me, you take one look at this and you want it right now! You aren’t alone. One look at the comments section of this introductory post about the project shows that there is pent-up demand for a friendlier CiviCRM User Experience. The first iteration of this should be ready to go by mid-2018, so, unfortunately, it’s not quite ready for primetime yet. But that shouldn’t stop you from getting involved. A project of this magnitude deserves lots of support, testing, and feedback. Here are some ways you can get involved:

• Donate money to the CiviCRM project.
• Download and test the Shoreditch Theme from Github.
• Report issues and feedback to the Github Project.
• Share this story with everyone you know. Get the word out!

Maybe we can work on a simplified menu for CiviCRM next. 🙂