Behind the Scenes of the Superfluid IBC Redesign

It is bold. Disruptiveº. Luminous. Exciting. Curious. Transformative. Organic.

It’s unique in its appearance - and it has to be:

"I believe a brand should be a reflection of your core beliefs. At Celonis, we believe that transformation is not a far-off goal, but a constant reality. We designed the Superfluid brand to embody that idea. So it's a big departure design-wise from the typical blues and solids and hard edges that characterize the previous generation of enterprise software. It's full of motion and energy; it's in flux." Brandon Ortiz, VP Content Marketing

For us in product design, this opened up a dilemma: Enterprise user experience typically focuses on productivity. We aim at helping our users get their job done, making their lives easier, and help them achieve their goals efficiently. Usability plays a great role in how successful our users are with Celonis:

“In software engineering, usability is the degree to which a software can be used by specified consumers to achieve quantified objectives with effectiveness, efficiency, and satisfaction in a quantified context of use.” Ergonomic Requirements for Office Work with Visual Display Terminals, ISO 9241-11, ISO, Geneva, 1998.

How does usability go hand in hand with flashy colors and organic shapes?

Research on color psychology has shown the effects of different colors:

• Red, for example, has an aggressive appearance, causing the heart rate to increase, and it triggers the pituitary gland.
• Yellow stands for confidence and warmth, but it is at the same time a signal color used for warning signs.
• Pink is associated with compassion, but the luminous color in our brand also puts viewers in constant alert.

Do we really want to put our users into an almost stress-like state of constant alert?

While this effect may be desired in a marketing scenario, where attention is key, we don’t need to convince our users to use Celonis. They have already chosen to use it.

Another important factor of usability is the affordance of UI elements. Well designed buttons literally scream to be clicked, because... well, they look like buttons, they look clickable. Decades of research in human-computer interaction and habituation have led to a set of established UI elements, such as buttons, checkboxes, dropdown menus, etc. that we just recognize. We have formed our mental models of how these mostly box-shaped elements behave and what we can do with them.

Should we now replace them with organic shapes to match the brand?

No, we don’t have to. Of course, this doesn’t mean enterprise products havetolook and feel boring and colorless. Often they mainly use the color blue, and so did we until now. Blue is calm and peaceful and does not carry any positive or negative connotations.

However, a nice and deep blue is simply not part of our new superfluid color palette. So what do we do?

colors_r.png

The superfluid brand is dominated by vibrant and emotional gradients.

Re-branding the product in 5 steps

Quickly, we realized that the re-branding would be a major endeavor. Replacing a few colors would not do the job, so we structured our approach into five steps

1. Adjusting the color palette of our emotion design system and library
2. Matching the illustration style used in the applications and in marketing material
3. Re-design UI elements, such as loading indicators, tiles, and headers
4. Internal communication and QA
5. External communication

Step 1: Adjusting the color palette

At first glance, adjusting the color palette might seem to be the easiest step - swap in one Hex code for another. Unfortunately, Switching colors alone is not enough: According to W3C Web Content Accessibility Guidelines (WCAG) the contrast of text on a background (e.g. a button) needs to be at least 4.5:1 “to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.”

To give the new color palette the same look and feel of the brand we went through each color and hand-picked an equivalent from the superfluid brand guidelines. Colors in isolation tend to have different effects than in combination with others, so it helps a lot to put the colors in actual screen designs to see how they interact with each other and to see if the desired effects appear.

Another attribute of the superfluid brand is the abundance of gradients which are a key contributor to its transformative character. We realized that the colors picked from our brand gradients can easily look stale when solid and in combination with other UI elements.

Let’s take a look at our status icons for instance:

The following icons for success, warning, and error were initially using “Citronis 2” (success), “Tiger Orange” (warning), and “Candy Red” (error).

icon.png

The original status icons for success, warning and error after adjusting the color palette

We ran ad-hoc user tests and very quickly realized that “Tiger Orange” looks too reddish to next to the error icon. As status icons, they have to stand out and users need to recognize the meaning of an icon in an instant. We manually adjusted the color (in a trial and error manner) to a more vibrant, signalling yellow, which we named “Warning”.

icon_2.png

The status icons for success, warning and error with a corrected warning color

Looks much better, doesn’t it? However, can you spot the issue now? “Citronis 2” in isolation looks like a friendly, positive green tone, but next to our new warning tone it simply does not stand out. It looks too yellowish and is hard to distinguish for those with an impaired vision.

icon_3.png

The final status icons have sufficient color contrast and are clearly distinguishable

To solve this, we introduced a more saturated green tone (which we called “Success”) to complete our status icons. And even though the new tones are not part of the original brand color palette, they fit nicely while maintaining usability throughout the product.

colors.png

Left: The old emotion color palette, dominated by blue tones Right: The adjusted color palette, reflecting the vibrant colors of the superfluid brand. We manually adjusted status colors (red, yellow, green) for optimized usability.

Step 2: Match the illustration styles

A common design pattern we like to apply is using small illustrations for empty states, like when you log into your team for the first time, before you’ve created any content. These illustrations are used throughout all our products and are an inherent part of the applications’ look and feel.

Now with the superfluid brand, a new type of illustration was introduced: Pictograms visualizing key Process Mining concepts, such as Discovery. Again, they were using bold, redish and saturated colors established in the brand concept.

loop_--1.webp

A pictogram for Discovery

Red is a great color for grabbing your attention, but we had to be careful not to overuse it: let’s imagine you are a system admin using our Event Collection service to extract data from your source system. How would you like having bright red buttons and illustrations everywhere? How do you know which actions are really dangerous (as in non-revertible), and which ones can be undone? How do you know if a Data Load was successful or if it failed?

Probably you don’t. And that’s why we decided to limit the use of the brand color red, both in UI elements and illustrations.

The picture below shows a direct comparison of the new illustrations with the old ones (a more cartoonish character). We decided to use flat surfaces in light gray as the main color, and our “Superfluid Gradient” as an accent. These gray tones appear very neutral and can be used in almost any given scenario, while the accentuation reconnects the illustrations with our brand. When creating these illustrations it is important to balance the visual weight of the accent color carefully. Remember, these illustrations have more of a decorative character and should not trick the user into believing that something is wrong.

The new style dominated by a neutral gray with an brand accent ;

new_style_2.png

The old illustration style for empty states

styles_we_tried_out.png

Some of the illustration styles we tried during our exploration phase