Beyond the UI design – case study

Designing user interface visual are on the contrary of designing experience often matter of designers feelings and brand guides. But what if we take step back to revise UI design process in the same manner as UX does?

Last challenge at Kentico software was to set up new visual of the Kentico Cloud. Thanks to the company's generosity to let employees take an extra mile to experiment and research non-standard opportunities, I have taken the experiment of the UI design method.

Why we gave a shit to new UI

Kentico Cloud leverages material design to quickly build the basic product. However, it generated two side effect. The product is using the visual language of Google and beside the myriad of other products using material design, the appearance of the was too generic which leads to lower trust. The company's vision is to become domain thought leader and with the generic product appearance, this becomes a serious problem.

It wasn't the first project for me neither for the company has redesigned its previous product couple years ago. Matej Kvasnovsky has written the blog post about it.

  • Reseach phase – to accumulate data for the creative phase.
  • Creative phase – to ideate visual material from researched data and its constraints for delivering phase.
  • Delivering phase – to produce deliverables from ideated visuals for implementation.

Research phase

Step one – research a question

To set up the research is always a never-ending dilemma. To conduct any research we need a question so we can get the answer. But we also need a good question. So we need to question a question. Damn

Helpful mental exercise
I knew what needs to be delivered. Right? But I don't know how it should look like. So I need to set up some criteria that help me evaluate the results. Bingo. Here we go.

Criteria for the project

  • Unique visual language or at least distinguishable from notoriously known tech brands like Google, Microsoft, Apple, Dropbox etc.
  • Original visual language that represents company's values.
  • Meaningful visual language that supports the productivity of product users.

ConstraintsKentico has already developed branding and the new product visual must respect the mother brand, on the other side it needs to be distinguishable enough from other company's product.

Step two – get evaluation criteria

This is the part that most of the visual project is missing because the evaluation visual quality is hard to measure. However, the clever people have done the evaluation methods for us. Since the visual is a matter of appeal we will evaluate the quality though the adjectives that represent it.

Positive words - desired state

Clear, Collaborative, Comfortable, Effortless, Familiar, Friendly, Helpful, Reliable

Negative words - we want to avoid

Confusing, Difficult, Distracting, Fragile, Frustrating, Impersonal, Ineffective, Time-consuming, Sterile

Here we set up the bunch of adjectives, which was carefully discussed and derived from the project request and the company values. Those can be used by any of the described methods – semantic differential or desirability test.

Step three – get inspired

This is the part where everybody looks how it was done previously. However, from my point of view, it is completely wrong if your aim is to create something original. Original in terms of including a touch of an original source.

Semiotics in user interfaceWhile observing people, offices, the city of Brno, I remind myself the book Mythologies written by Roland Barthes. He used semiotics to investigate myths of advertisements. This method gives me the clue how to involve symbols of visualities.

Let's say there is a sentiment behind the certain value – for instance stability and humanity. Many of the Kentico and Czech people believe in the myth of old good times represented by Miloš Forman's films for instance Postriziny. And If I'll use some symbols from that movie I will remind the sentiment underneath and evoke the requested values of stability and humanity.

What to ask?

At first, I want to learn their idols so the participant can describe its values. Perfect materials were favourite movies, books or life heroes.

Then we look at the personal photos. Through the reminder, the participant told the story that resonates with her life in Kentico and beyond.

By talking about personal talismans, totems and other personal occultists we can get another story directly connected to the symbol. Usually looking for things on the desktop, in office or wallpaper.

The last part was dedicated to everyday routines. Not obvious but routine that lack of it existence would change her life.

Collecting visual material

Equipped with information I have dived for a couple of days in collecting of visual materials. Taking photos of desktop, looking for special interesting detail, or taking screenshots of details from movies or photos. I wanted to immerse myself completely. Every part of my mind was perceiving the visualities even while dreaming.

While the associations between sentiments and symbols started to be more clear I have created my first mood boards. Now I can see what could be done with the material. This slowly results in the design phase.

Design phase