Why I built a new Sitecore UI?

TL;TR go to the new Sitecore UI screenshots here

I’ve been learning how to work with various CMSs for the past 10 years. Having spent the past 3 years working exclusively on Sitecore, I can relate that it’s one of the most difficult to tame. In fact, the learning curve is so high that most of the new authors I know didn’t like it at first.

Although Sitecore UI looks very promising at the beginning, when you start using it, you quickly see it’s limitations and flaws.

Sitecore UI and the ribbon

Sitecore interface hasn’t really changed since version 8, and today its designs look very outdated. To me, the main issue is the ribbon (probably inspired by the Microsoft office Ribbon, introduced in 2007). It’s is a UX paradigm from the past that takes too much space on the screen and doesn’t really help readability and discovery, specifically in the context of a CMS.

One other point is that the content editor looks cluttered and clunky. It really gives you the feeling to be stuck in the 2000s with small pixelated famfamfam icons.

In content editor mode, you have actions that can be performed in 3 different ways (i.e: Publish, open Media library, switch language) or with a crazy clic-clic-clic sequence. The wording is not every-time in place. Often, It’s painful to get what you want because lots of things are hidden under the ribbon, context menus, or tabs.

Also, there are no visual clues to let the authors know when something is loading or to identify which are the most used actions they need (i.e create, preview, publish, unpublish…). You don’t really know how to start or where to go.

My challenge: build a modern and user-friendly Sitecore UI

With the support of the features already implemented in Sitecore Author Toolbox Extension, my main objective was to refresh the Sitecore UI and give it a clean look that inspires confidence and is easy to understand for the end-user.

Here is the list of 10 things I got in mind when I started this project:

1. Give Sitecore a fresh look that helps the authors focusing on the most important: content.
2. Add space and contrast to the UI, content tree in particular
3. Get rid of the ribbon!
4. Provide a unique way to search for content and media
5. Keep and re-emphasis common actions (Create, Preview, Save, Publish, Unpublished)
6. Remove duplicate and all the unnecessary items that clutter the UI
7. Add a breadcrumb
8. Build a new user menu under your profile picture
9. Make the UI retina-display compatible by using smooth fonts and SVG icons
10. Final touch, make it your own by choosing any accent colour and help people with vision deficiencies (Protanopia, Deuteranopia, Tritanopia, Achromatopsia) as suggested by Adam Najmanowicz, to be checked with the latest Google Chrome

The new Sitecore UI

I’m happy to show you the first screenshot of my work. This new Sitecore interface is still under development but it’s already available in the release 2.2 of my Sitecore Author Toolbox extension as an experimental feature. And yes, you can already give it a spin on your Sitecore instance (8 and above) by installing Sitecore Author Toolbox 2.2 🙂

Create an item

Panels

The content tree

The ribbon

Sitecore Search

Action bar: Preview, Save and Publish

Choose your colour

New user’s menu

Conclusion

Although it’s available as an experimental feature, I managed to implement most of the 10 ideas I had in mind.

What I’m missing the most now is feedback from users. This feature has been shipped in Sitecore Author Toolbox extension 2.2 but is deactivated by default. (See screenshot down below)

Please activate it in the extension options, and send me your feedback on twitter, it would be highly appreciated!
Thanks for reading 😉
Ugo