Execution of Kentico 8 Redesign

MMP1

Dedicating three months to implementing the UI redesign felt like quite a long time, so we decided to split it into three one-month-long milestones, which we called Minimal Marketable Products. Each of these milestones offered improvements over the previous version. Each MMP had to be “complete” i.e. could not contain any work-in-progress features. These rules helped us stay focused and also gave us clear deadlines so that we could have an idea of when we would have a version ready for presentations and usability tests.

Day 0

The actual work on the UI redesign started on October 15^th. For the sake of comparison, here is the original state before the redesign was put in place.

First changes

At first, we added a new header with a User Menu on top of the application. We started with a process of removing unnecessary borders and gradients.

Application list

We wanted to remove the Ribbon toolbar, but it had to be done in small steps. Seen below is the first one, where we reorganized the header a bit and implemented the first version of the Application list.

End of MMP1: The Ribbon is no more

At the end of MMP1, we managed to remove the Ribbon toolbar completely and copied its navigation to the Application list. Also, from this point forward, it was possible to access the Site Manager’s applications from CMS Desk.

MMP2

While we started working on the second milestone, MMP1 was introduced to selected partners on a webinar and underwent series of usability tests. This allowed us to quickly implement most of the feedback we received into the second and third milestones.

Application dashboard and new contextual help

At the beginning of MMP2 we built the very first version of the Application dashboard and the new contextual help. We also added a search box to the Application list, which greatly sped up the navigation around Kentico.

New icons, breadcrumbs and reorganized applications

In the next steps we updated the iconography in Kentico. Many icons were not necessary and were removed, while the rest got changed by brand new vector, font icons. Breadcrumbs were merged together and moved to the header, which increased the available screen space.
We also reorganized applications to a new, task oriented structure. That meant that we had to remove the Site Manager completely and with this done, we renamed CMS Desk to Administration, with /Admin as URL. Apart from the new features, we updated several UI elements, such as inputs, buttons, and dialog windows; we also started reformatting the forms.
The big challenge was updating all of the typography. We knew we would not be able to change it all within a single MMP, so we did it iteratively with the whole redesign. We selected one element, for example the headers, and updated them. Then we moved to the paragraphs, and so on.

MMP3

In the last milestone, we mainly improved what was already implemented and continued updating typography and forms. One big feature was the implementation of vertical tabs.
At the beginning, we did another round of usability testing as well as a webinar for selected partners. Since we felt quite confident with MMP2, we also posted a public blog post where we allowed everyone to download the preview version.

Vertical tabs

We wanted to distinguish applications by category, so we added colors to these as well as the Application list and Dashboard. We also started working on the vertical tabs, which gave us even more available screen space.

Almost there…

The rest of the MMP3 were mostly improvements and a finalization of the functionality. Here you can see the Application dashboard with a nice background, a refined Application list and some minor changes in typography.

… And done!

Here you can see the final version of Kentico 8. Apart from a ton of other small improvements, the Pages application got the final design and we added a Welcome tile to the Application dashboard, which should help new users with the basics.

Thank you

Working on the redesign of Kentico was an incredible experience. It definitely couldn’t be done without such great cooperation between Kentico and our partners and customers. Thanks to you, we knew what needed to be fixed and we were able to get your opinions and suggestions on how to fix it.
Big thanks to everybody in Kentico! Your drive and full commitment to the whole redesign process was crucial.
Now it’s time for Kentico 8.1.

Find out more about Kentico redesign

This article is part of a series explaining how and why we redesigned the user interface in Kentico 8. Check out the rest of the articles from this series:

1. Introduction to Kentico 8 Redesign
2. New Application Structure
3. Navigation
4. Contextual help
5. Behind new look and feel
6. Graphic principles of new UI
7. Design system and evaluation process of new UI
8. Updating iconography
9. Execution timeline