CMS Major Redesign

Redesign of complex navigation, dashboard, and implementation of a new consistent visual language.

Sneak peek of the new look and feel of Kentico CMS.

My role
hypotheses, prototypes, evaluation process design, moodboard, graphic design, UI styleguide, implementation review

More detailed description avaliable at a blogpost serie or in my barcamp presentation.

Issue

Old navigation was complicated and users had problems with adopting information structure. Web agencies using Kentico CMS reported many hours spent in training with their clients and inconsistent UI was not helping the learning process either. Moreover, the old-fashioned look and feel cost our sales representatives several important leads.

Old UI in the Pages application.

Complex navigation.

Old UI in the Newsletter application.

Old-fashioned design.

New Navigation Prototype

We believed that by replacing the tree-oriented ribbon toolbar with a customizable personal dashboard we would improve the learning process and make navigation easier. The prototype consists of a new application list and a personal dashboard for the most popular applications, demonstrating the new navigation approach via sidebar and breadcrumbs. Moreover, brand new tabs save more than 20% of the layout. The clickable prototype is available at http://kvasnovsky.net/temp/dashboard.

The Prototype of a new navigation

Visual Language

Moodboard

Everyone had their own idea how the new UI should look like and the moodboard helped us to reduce innumerable options to the final one. It is based on three previous variants and was evaluated with the stakeholders.

Design Principles

Graphic rules were instituted into every building block throughout the system, e.g. skeuminimalism, text as interface, accessible colors, etc. The main motto of the visual redesign was The best design is invisible.

New look and feel moodboard.

Design System

The research revealed that our development workflow had to change significantly since not only aesthetic but also development trends have radically changed over the past few years. Style Tiles approach helped us to deliver the graphics in 12 weeks from the research to the deployment of the HTML/CSS component library.

Design system of new Kentico UI, part 1.
Design system of new Kentico UI, part 2.

Evaluation Process

Held at Kentico Connection, which is Kentico community conference taking place in Boston, Sydney, and London. Feedback on our hypotheses and the new visual language was gathered from almost 10% of all the web agencies using the Kentico CMS. After a quick demonstration and Q&A at our UX kiosk attendees were asked to complete of a Likert Scale questionnaire and a semantic differential.

Likert Scale questionnaire
Semantic differential for visual appeal evaluation

Outcome

After evaluation and small adjustments we were able to prepare backlog, which led to two MVPs that were again evaluated with the community via webinars.

Reworked tabs and the new navigation in the Newsletter application

Reworked tabs and the new navigation in the Newsletter application.

The application list

The application list.

The personalized dashboard with favourite applications

The personalized and customizable dashboard with favourite applications.

Component Library

Sideproject of the redesign was a dynamic visual representation of all components, so both developers and designers could make consistent decisions in the future. It also unified our vocabulary and made maintenance easier.

Component library for new Kentico UI.

Skip to another project:

Contact

Meet me on my social networks.

Matej Kvasnovsky on LinkedInMatej Kvasnovsky on FacebookMatej Kvasnovsky on InstagramMatej Kvasnovsky on TwitterMatej Kvasnovsky on GoodreadsMatej Kvasnovsky on Vimeo

Or say hello in person on my trips where I love to take Instagram pictures. You can also join me on a streetball court and shoot a few hoops with me and my friends.