Confetti is the design system created for all of Klöckner’s applications and experiences. The design system was focused towards enabling and empowering everyone involved to work more efficiently, all the while building a great experience for the users.
It consists of code snippets, design tools and human interface guidelines, all aiming at the best and consistent user experience possible.
UX / Research / Project Management (Design)
Patrick Sebek - User Interface Design
Noor Dar - User Interface Design / Documentation
Beata Wolska - Frontend Development
Claus Rux. - Frontend Development
UI Design - Sketch
Handover - Zeppelin
Prototypes - Invision Studio / Adobe After Effects.
Before Confetti, there were several different styles and behaviours of UI elements within the Kloeckner.i tools. These inconsistencies cause confusion for the users, some of whom were using multiple kloeckner.i tools.
For designers, there were no clear patterns, resulting in a time staking and repetitive process where several elements would be redesigned and then developed.
It became obvious that a unified look and feel were needed for our products.
We knew we had a problem with inconsistency of our products, but how big was the problem? Therefore I researched all the interface elements and created an interface inventory for all of our products.
The first steps were to double check which components and elements were actually needed for the products. The next steps included categorizing the components based on the atomic design methodology.
Together with my team and the PO, we prioritised the elements to develop first and defined a first MVP. The goal was a platform, that allows the developers to play around with interactive UI components and inspect the code at the same time. The designers as the second user group, required a wiki page, to document the behaviour of the components, how and when they are used and give some guidance to the developers.
After the ideation phase and goal definition stage, we worked on an agile setup of 2 weekly sprints. The designers worked closely together with the developers and handed over the little portions of the design system, step by step. The challenging part for me, was to coordinate the design team with the developers, so that we deliver useful component packages in time and make sure the developers don’t run out of work.
During the process we decided to have two platforms that will represent our design system. One was a wiki page on frontify, that enabled the designers to provide and maintain the guidelines; the second platform was a sandbox page, the developers could use to discover the code. These two solutions were linked to each other, so that the users can always jump from interactive example to the explanation/ “dos and don’ts” . Unfortunately it was not feasible to combine those platforms into one.
Confetti provides guidelines for the usage, such as Dos and Don'ts, styling and the interaction. Additionally code snippets that are ready to use, are provided.
The design team delivered packages of elements and components in sprints of 2 weeks. Each package contained the UI design and a documentation of each part.
After the launch of Confetti 1.0, the new challenge was adopting a primary framework to maintain the components in and to strategise the migration of old products on to it.
Kloeckner.i now using Confetti 1.0 for its top priority products and hopes to migrate the old products within in the coming years.
previous project
scroll up
next project
