Markant Gruppe Eine Asset-Bibliothek für einheitliche User Interfaces
Als verlässlicher Partner für Lieferanten und Händler unterstützt die Markant Gruppe ihre Kunden mit umfassenden Lösungen entlang der Wertschöpfungskette. So können diese ihre Abrechnungsprozesse und Bezahlsysteme über Markant nicht nur übersichtlich abbilden, sondern auch konsolidieren und dadurch einen effizienten Datenaustausch gewährleisten. Das bietet Lieferanten Planungssicherheit und Händlern die Möglichkeit, Routineaufgaben auszulagern und ihre Daten mittels Analysen aufzubereiten. Um ihren Kunden über alle Plattformen und Lösungen hinweg eine einheitliche Erfahrung zu bieten, ist mit „One Markant“ ein Corporate Design entstanden, das über sämtliche Markant Services ausgerollt werden soll. Damit die Entwicklungsteams die Anpassungen schnell und trotzdem uniform umsetzen können, hat inovex mit Markant eine Bibliothek erstellt, in der sich wichtige UI-Komponenten und digitale Assets befinden – die Markant Elements.
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.
🗓️ Termine frei
Buchen Sie Ihr Erstgespräch – unverbindlich und kostenfrei.
Yaren Sahin
Account Manager New BusinessIch freue mich auf Ihre Anfrage.
Yaren Sahin
Ihre UI/UX-Lösung von inovex
Sprechen Sie mit uns über Ihr nächstes Projekt, in dem wir Sie als Partner unterstützen können.
- Intuitive User Interfaces
- Barrierefreie Anwendungen
- Agile Umsetzung