Behind the new look and feel of Kentico 8

Previously on the Kentico 8 redesign

Tadeas, our Senior UX Designer, has been publishing regular blogs about what’s new in Kentico 8 in terms of user experience. In the next few blogs, I will be presenting our reasons for the new look and feel of the Kentico UI and how we arrived at our final design.

Research

We walked through a number of galleries, like Dribble, Behance and Deviantart, and explored interesting web and mobile applications as well as pattern libraries. We also analyzed our competitors and focused on the leaders, like Mailchimp, Twitter, LinkedIn (my personal favorite), Google and Microsoft, of course. Some of them have great documentation of their graphic guidelines and it is really inspirational reading. Our final mind map with all interesting sources has now over 300 records and is still growing.
 
During our research we sought and found answers for issues like flat design, fonticons and popular frameworks. But mainly we clarified graphic principles for our new user interface, including the contrast between text and background according to WCAG recommendation, responsive-ready grid systems, etc. I will write more about this week.

Workflow

We made a detailed examination of new processes in web design, which have rapidly changed over the past few years. Because a web environment isn’t already pixel perfect based on images, the role of Photoshop or other raster graphic editors is no longer so dominant. It is really ineffective to draw an entire screen as an image (sometimes in multiple resolutions) and then convert it to code with the same visual representation. A more powerful and less time consuming method is to create graphics, mainly for the web application, directly in HTML/CSS. We therefore agreed to use Photoshop only in the few first phases and leave it as soon as possible. 
 
In practice, we prepared graphics for a few common components of our UI, like buttons, fields, tabs and headings. These were evaluated by our partners and, if they met our expectations, we created and added each component to the new HTML/CSS framework when it was finalized.
 
This approach did mean we couldn’t see the whole page before the end of redesign and the UI sometimes looked strange made up of old and new components. This approach, also known as style tiles or interface without layout, meant we were able to save a lot of time; it took just 12 weeks from start of research to full deployment of the new HTML/CSS framework.
 
This seems to be the right place to praise the agile spirit of development in our company. Thanks to our programmers and product owners, we could afford to change course as needed, anytime during the development. We can really hardly imagine the classic waterfall approach in this project.

Moodboard

Our research gave us clear direction for the redesign of our UI. But we were still not sure about the emotions. We could use monochromatic colors, warm or cold colors, dark or light colors. We could go for a conservative or friendly feel. We could use a serifed or sans-serifed typeface, etc.
It was all open, and for this reason we came up with a moodboard; an important step between research and design.
 
For those not familiar with moodboards, it is like a composition of images which collectively emit a feeling. It is a great tool for explaining an aesthetic style and is far better than words. This technique is quite common in creative agencies and there are a lot of articles about their use online. You spend quite a while in stock galleries, but in all pays off in the end.

Emotions in Kentico 8

We prepared three moodboards, each reflecting our brand soul, but each in different ways:
 

1. business image, monochromatic dark and light colors, conservative, glossy
2. life image, colorful, friendly, social
3. leisure image, light colors, friendly but still official, individual

 
These descriptions are very rough, just for your imagination. Behind each moodboard we had a group of existing applications; maybe you can guess which ones. But we didn‘t say or write any detailed descriptions for anybody who participated in the evaluation. We wanted the images alone to evoke concrete feelings.
 
Feedback was collected internally only, as this technique is quite abstract and it is really important to be sure that it is well understood; that the observer doesn’t evaluate every single image in the composition. But also, I think it is good that your application’s look is based on the opinions of your people. It helps you identify with the product, and a long list of changes is less painful suddenly.
 
The above three moodboard proposals allowed us to open a dialogue with evaluators. Some were worried the light leisure image looked like Google too much Others wanted to see a more serious corporate style. One commented that all of them were boring in his eyes. But after a week we had the final result and it was a combination of the first and the third moodboards, where the third is dominant.
 
So here it is; our final moodboard for the new UI in Kentico 8.

 
It told us that our interface was to look calm and to communicate in a friendly but official way. There should be clear contrast and have color, but in a conservative way and it should reflect a casual business style, focused on individuals. Suddenly, our innumerable options were reduced to those that delivered the look and feel we wanted, the moodboard becoming a reference point for next steps in our redesign process. We were ready to start creating the first graphic proposals for the basic components with the full company on board with the design. But I’ll save that for another article.
 
Can you see the relation between the moodboard and new UI?
 

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