UX design case: Efficiency

I spent 8-9 months working for EPiServer with their CMS, specifically version 7.5. EPiServer had recently released version 7, which was fundamentally different from the previous versions, and was supposed to be the epitome of usability for the editors working in the product. As with many huge redesigns, the first version needs polishing to come to its full potential. The redesign, making room for great new features, meant a new way of thinking around the basic editing. 7.5 was made to remedy that. In the words of Peter Sunna, product manager, “The main theme for EPiServer 7.5 CMS has been efficiency: all our main personas, ranging from the new developer to the marketer should be able to do the most important tasks faster. It’s the small details that make the whole difference.”

Peter Sunna and I, including the design and development team, was hard at work for those months, making life more fun for the editors. The method used looked in short something like this: First, I observed the users working in the system, taking notes of how they used the feature today. Then, I co-designed a new version together with the design team. I would create a prototype of the new version and go back to the users for feedback. After a few short iterations, we would hand over the design to the development team. When they had built the new version, I would revisit the users for an extensive test to get feedback, sorting out bugs, etc. in time before the release. The techniques used for the usability research and testing were as lean as we could make them.

Below I list a few of the improvements that we made, showing what it looked like before (when applicable), as a prototype, and as a finished feature.

Layout management

In EPiServer 7 CMS, blocks were introduced to avoid having thousands of static templates. First, you could only place blocks and they would be automatically layouted. In 7.5, we added the possibility to decide layout for the block. This is fully customizable in code, so if you want to be able to change between red and blue backgrounds (apart from different width) it is just a matter of adding that. A user, Maria Sognefors of 7minds, comments “In EPiServer 7.5 they have now added layout management which is very good. […] This is particularly good when concerning the advanced editor’s need for freedom to work with content without involving a developer”.

New link dialogue

A link dialogue can sound like a trivial matter, but when you add, change and remove links many times per hour, it needs to be efficient. The old dialogue was confusing with several tabs for almost the same thing. We did a quick fix that was supposed to be just a prototype, but the users loved it. They said it was way easier to learn, so we kept it like the prototype.

On-page editing

Another big thing with EPiServer 7 CMS, was that the connection between the content and the actual page was supposed to be stronger. We got inline editing for headers and some other elements, and instead of changing to another tab for rich text properties and the like, we got a pop-out window (as can be seen on top of the image below). This was better than 6, but stunted the efficiency of the editors. The solution was real on-page editing of these most important elements. Like Peter Sunna said, “This is a big improvement and has been highly praised by editors in our user testing”. The comment from Maria Sognefors was “on-page editing is now for real”.

Create block from page

The interaction pattern for creating a block in EPiServer 7 CMS was to create a block, save it somewhere and then drag it into the place where it was going to be used. This sounds less awkward than it actually was. Our solution was to create a shortcut in the content area where you could place blocks and save it automatically in the storage for that page instead. This meant fewer steps for the editors and not needing to bother with rummaging through the storage space when having lots of blocks. As Maria Sognefors said, “simple and easy!”. A big help for that latter problem was to introduce storage space for a specific page, before all blocks were stored in a shared space.

I’ll end this with another quote from Maria Sognefors, “When the first version of EPiServer 7 was released about a year ago I was fairly negative over editing work. This since I felt that the tool for me as an experienced and active editor got ceremonius. With version 7.5 I want to give a pat on the back to Peter Sunna and the team at EPiServer, because things got better and better. There’s a big focus on editing work [in 7.5] with both small and large improvements, and I like it!”