Markant Gruppe Eine Asset-Bibliothek für einheitliche User Interfaces

Herausforderung: Viele Portale, viel Verwaltung

Markant entwickelt eine Vielzahl an browserbasierten Lösungen und Plattformen rund um Zahlungsservices, Markt- und Preisanalysen, B2B-Integration sowie Finanzen und Sicherheit. Durch historisch gewachsene Strukturen wurden die Oberflächen für diese Lösungen bisher vorwiegend unabhängig voneinander gestaltet, was für einen nicht einheitlichen Unternehmensauftritt und hohen Organisationsaufwand sorgte. Das neu entworfene Corporate Design in die einzelnen Anwendungen zu übertragen, war mit viel Implementierungsaufwand verbunden. Jedes Markant Team stand vor der Herausforderung, die Vorgaben in die eigene Lösung zu integrieren, deren Anwendungstechnologie sich teils von anderen unterscheidet. Die Anforderung an die Neugestaltung der Anwendungs-UIs war also, dass sie sich über mehr als 15 Anwendungen einheitlich in die Lösungen einfügt.

Schnell und unkompliziert den digitalen Auftritt vereinheitlichen

Wie in vielen anderen Arbeits- und Lebensbereichen bestimmt die User Experience auch bei den B2B Services von Markant darüber, wie erfolgreich ein Produkt ist. Ein wesentlicher Teil davon sind Applikationen, die die Designsprache des Unternehmens oder Produkts sprechen und auf allen Devices (Desktop, Smartphone, Tablet etc.) gleichermaßen verfügbar sind. Um diese Anforderungen zu erfüllen, hat inovex mit Markant eine Komponentenbibliothek der wichtigsten digitalen UI Assets erstellt.

Das Projekt: Einheitliches User Interface

In den Markant Elements befinden sich essenzielle UI-Bausteine, die Markant für ihre Anwendungen benötigt – darunter z. B. Buttons, Eingabefelder, Layout- und Strukturkomponenten, Icons und mehr. In dieser Komponentenbibliothek werden die einzelnen UI-Bausteine von Web-Auftritten oder Apps zentral gespeichert und verwaltet. So können Änderungen an einer Stelle des Systems anwendungsübergreifend geändert und angepasst werden. Um die einzelnen Elemente anzusehen und auszuprobieren, haben inovex und Markant mit dem Storybook einen sogenannten Komponenten-Explorer erstellt. Hier lassen sich die Modifikation und das Verhalten der Komponenten interaktiv testen, bevor sie in die entsprechende Anwendung integriert werden.

Durch die Markant Elements entsteht eine klare Designsprache, die sich über die Komponentenbibliothek zentral weiterentwickeln und verwalten lässt. Für die Teams von Markant entsteht dadurch ein Single Point of Truth ihres Corporate Designs. Als Ergebnis lassen sich die Elemente effizient in allen Produkten verwenden. Der Zugriff auf die eigene Bibliothek spart Zeit bei der Umsetzung des eigentlichen Produkts und erhöht die Qualität der Anwendungen.

Technologie ermöglicht frühen Einsatz

Für Markant war es wichtig, dass die neue Lösung schnell implementiert werden konnte und der Entwicklungsaufwand übersichtlich bleibt. Als Basis für die Markant Elements diente daher die Komponentenbibliothek von inovex.

Die inovex Elements wurden als Lösung für inovex-interne Produkte entworfen, die sich in kurzer Zeit an die UI-Anforderungen anderer Unternehmen anpassen lässt. Das spart die sonst nötige initiale Entwicklungszeit und ermöglicht gleichzeitig den sukzessiven Ausbau der Komponenten.

Technologisch basieren die Elements auf mit Stencil entwickelten Web Components. Sie lassen sich plattformunabhängig und ohne Framework nativ im Browser nutzen und sind daher besonders für einen flexiblen Einsatz in unterschiedlichen Technologie-Setups geeignet sowie in HTML- und JS-basierten Frameworks einsetzbar. Zudem lassen sich mit Hilfe der Komponentenbibliothek bestehende Frontend-Anwendungen leicht ergänzen und neue Applikationen schneller umzusetzen.

Ausblick: Zukunftssichere Entwicklungsumgebung

Mit den Markant Elements ist damit eine UI-Lösung entstanden, die sowohl eine zentrale Verwaltung aller Bestandteile bietet als auch die schnelle Umsetzung eines einheitlichen Markenauftritts über alle Plattformen sicherstellt und für zukünftige Anforderungen skaliert.

Neben diesen Vorteilen war es Markant wichtig, auf lange Sicht selbstbestimmt handeln zu können. Aus diesem Grund lässt sich perspektivisch im Unternehmen die Expertise zur Verwaltung der Elements aufbauen, um so eine UI-Lösung zu etablieren, die alle Geschäftszweige des Unternehmens umfasst.