Close
Agenda fรผr die Celosphere 2020 ist live
Hero image

Behind the Scenes of the Superfluid IBC Redesign - Part II

alexander schenker celonis author
von Alexander Schenker
Februar 14, 2020
Lesezeit: 4 Minuten

Last week, we showed you which steps we had to take to re-design our Intelligent Business Cloud: From adjusting the color palette to creating a whole new visual language. This week we will continue with the user interface and how we coordinated this undertaking internally and externally.

Click here to read Part 1

Step 3: Re-design UI Elements

Re-designing mostly means applying new colors, checking contrasts, and trying out elements in different contexts, while maintaining both usability and the spirit of the brand. We pointed out before that especially for user interface components like buttons and menus, affordance and accessibility are essential.

redesign partII

UI elements, such as buttons, need to maintain general accessibility by providing sufficient contrast ratios

This, however, leaves room to be more creative with icons or data visualizations like line charts, for example. Despite branding efforts, it is very important to keep in mind the psychological effects of colors and to avoid chart junk (visual elements in data visualization that are not necessary to comprehend the information represented in the graph). In the case of the Icon + Value component (a UI Pattern we commonly use, see picture below), we decided to use weakened colors in the background and to avoid the colors red or green, unless the value has a highly negative or positive meaning.

Redesign partII(2)

Example of how UI elements can utilize a vibrant color scheme without sacrificing usability.

Step 4: Internal communication and QA

Why does a redesign need careful internal communication?

One the one hand, our scrum teams are capable of autonomously deploying their solutions whenever needed. That not only allows maximum flexibility when it comes to updates and hotfixes, but it also requires a lot of coordination when rolling out a major redesign like this one.

On the other hand, the teams largely make their own product decisions. While they are using a common design system to ensure a high level of consistency, they have a lot of freedom in their design choices.

However, a redesign on this scale requires a central decision making on certain design questions, that globally affect all of our products. Therefore an early alignment of all internal stakeholders was necessary: especially Product Managers, UX Designers, and Frontend Developers, but also Product Marketing and Brand.

What impact will the release have on our usual release cycle?

Which UI patterns are going to be newly introduced or deprecated?

What changes have to be made on the front end?

For example, it turned out to be invaluable to include frontend from the beginning, as many ideas could only be properly validated in a live prototype.

On the other side, product managers needed to coordinate their release efforts in order to ensure that all parts of the IBC reflect the update at once.

Updating each part individually over the course of weeks was simply not acceptable, as it would mean that some parts of the IBC would have an entirely different look and feel. The Quality Assurance team had to make sure that no leftovers of the old designs are to be found, and that everything still worked as expected.

Step 5: External communication

Last, but certainly not least, the changes have to be communicated to our customers and users. The worst thing that could happen to the unsuspecting business users, who log in to complete their daily tasks, would be a complete change of design and layout, without indication of what changed. This would directly invert our goal of great usability.

To avoid that, we did not change layouts with the first iteration, but only the visual appearance in order to minimize that painful change.

For our Whatโ€™s Coming?-Guide (which typically appears when you log in the first time after an update) we developed a before/after slider to give you a direct comparison of the changes.

changes gif

Our Whatโ€™s Coming? Guide

Perhaps, you have also already received an email from our Marketing department announcing the changes.

We are excited to see the new, superfluid IBC in action and are looking forward to hearing your feedback!

alexander schenker celonis author
Alexander Schenker
Lead UX Designer, Celonis
Weitere Blogeintrรคge รผber Celonis Developer Blog

Abonnieren Sie unseren monatlichen Newsletter

We've received your submission
Please fill in all the fields

Indem Sie dieses Formular absenden, stimmen Sie der Speicherung und Verarbeitung Ihrer personenbezogenen Daten durch Celonis gemรครŸ unserer Datenschutzrichtlinie zu.
Lieber Besucher, wir haben festgestellt, dass Sie eine veraltete Browser-Version verwenden. Teile dieser Seite werden von Ihrem Browser nicht korrekt dargestellt. Fรผr eine korrekte Funktionsweise der Seite empfehlen wir Ihnen, einen alternativen Browser zu verwenden oder Ihren Browser auf eine unterstรผtzte Version anzuheben.