Über mich
Das KWS UI Design System wurde für eine effiziente Skalierung und die allgemeine Optimierung der Benutzeroberfläche der KWS FieldExplorer-Mobil-Apps entwickelt. Es trägt zur weiteren Entwicklung interner Designprozesse und einer besseren Zusammenarbeit zwischen Designern, Entwicklern und Produktbesitzern bei.
KWS Saat SE & Co. KGaA ist ein international tätiges Unternehmen, das sich auf die Züchtung von Pflanzen und Saatgut spezialisiert hat. Das Unternehmen betreibt Forschung und Entwicklung, Produktion und Vertrieb von Saatgut in mehr als 70 Ländern weltweit.
Dabei konzentriert sich KWS Saat auf Nachhaltigkeit, Innovation und enge Zusammenarbeit mit Landwirten, um eine sichere und nachhaltige Lebensmittelversorgung für die stetig wachsende Weltbevölkerung zu gewährleisten. Um die beste Qualität zu liefern, werden die Samen durch Forschungs- und Zuchtprogramme präzise auf die Bedürfnisse und Anforderungen der Kunden zugeschnitten.
Der KWS FieldExplorer ist die digitale Lösung für die Feldplanung sowie die allgemeine Verwaltung und Dokumentation von Feldaktivitäten. Unterstützt durch mobile Apps und Hardware werden Daten erfasst, analysiert und visualisiert, um Zucht- und Saatgutproduktionsaktivitäten zu digitalisieren. Mit den FieldExplorer Mobil-Apps können Benutzer Feldaktivitäten in Echtzeit aufzeichnen und verwalten.
Herausforderungen
Die FEX-Mobil-Apps sind progressive Web-Apps und werden zunehmend von Benutzern auf Tablets und manchmal Notebooks verwendet. Das mobile-first Design der Apps wurde nicht für so große Viewports konzipiert, was zu ungünstigen Layouts führt, in denen Informationen und UI-Elemente schwer zu überblicken sind.
Darüber hinaus wurde ähnlicher Inhalt manchmal in inkonsistent gestalteten Layouts präsentiert und UI Elemente werden nicht konsistent genutzt, was zu einer Beeinträchtigung der intuitiven Nutzung und erhöhtem Wartungsaufwand führt.
Zusätzlich gab es einen hohen Kundensupport im Tagesgeschäft sowie durch Schulungen, die notwendig sind, um neue Benutzer mit den Anwendungen vertraut zu machen und die Nutzung der App sowie aller Funktionen zu demonstrieren.
Goals
Reduzierung des Kundensupports durch Steigerung der Benutzerfreundlichkeit der Anwendung
Systematisierung des Designs zur effizienten und kohärenten Weiterentwicklung der Apps
UI-Optimierungen für eine effiziente Skalierung
Optimierung der internen Designprozesse für eine effizientere Zusammenarbeit unter internen Stakeholdern und Steigerung der Produktqualität
Lösungen
Einheitliche Verwendung von UI-Elementen und Stilen
Entwicklung von responsiven Mustern und Vorlagenseiten
Einrichtung von Bildschirmbereichen zur kohärenten Strukturierung von Inhalten über Seiten und Anwendungen hinweg
Einführung eines Gitters mit fester Breite zur Anzeige von Inhalten auf größeren Viewports in lesbarer und klarer Weise
Implementierung einer responsiven Schrift, um die Lesbarkeit auf allen Geräten zu gewährleisten
Eng zusammenarbeiten mit der Entwicklung, um den Code für eine saubere Basis von Stilen (Farbpaletten, Schriftstile und Abstandsklassen) umzustrukturieren
Einfluss
Das einheitliche und übersichtliche Design ermöglicht es den Nutzern, die Anwendungen intuitiver zu verwenden und die kognitive Belastung zu verringern.
Die verbesserte Anzeige von Inhalten hat die Erfahrung von Nutzern, die Geräte mit größeren Ansichtsfenstern bevorzugen, erheblich verbessert
Die Dokumentation und die Richtlinien des Designsystems dienen als Referenz, die eine schnellere Entscheidungsfindung und eine konsistente Entwicklung sowie Einführung neuer Funktionen ermöglicht.
Die Einarbeitung neuer Mitarbeiter ist aufgrund des Umfangs und des Detailgrads der Dokumentation effizienter
Das Prototyping wird durch die Komponenten-Bibliothek in Figma erheblich beschleunigt
Der Realismus von Prototypen wurde ebenfalls erhöht, was zu wertvollerem Feedback in Benutzertests führt und eine bessere Referenz für die Entwicklung bietet
Dokumentation
Die Dokumentation enthält Farbpaletten, Schriftarten, Abstandsklassen, Raster, Bildschirmbereiche und Symbole sowie eine Reihe von Mustern wie Listen, Vollbildauswahl und einen Assistenten.
Es beschreibt, wie man Komponenten und Styles verwendet und zeigt Dos und Don'ts. Bei der Erstellung des Designsystems sowie in der Dokumentation haben wir eng mit der Entwicklung zusammengearbeitet, um Unterschiede zum Code-Basis zu vermeiden oder sie abzustimmen. Die Dokumentation bietet wertvolle Informationen sowohl für Designer als auch für Entwickler.
Figma Bibliothek
Für effizienteres Prototyping und Designlieferung wurde in Figma eine umfassende Bibliothek von Komponenten erstellt.
Alle Komponenten wurden so realistisch wie möglich entwickelt, sie haben realistische Eigenschaften und Stile, die es erlauben, ihr Aussehen mit wenigen Klicks zu ändern. Die Benennung der Komponenten, ihre Eigenschaften und Stile ähneln den codebasierten Komponenten, was den Entwicklern bei der Betrachtung der Designs nützliche Informationen liefert. Realistisches Prototyping ermöglicht es außerdem, Designs effektiv mit Benutzern zu testen, ohne dass dafür Entwicklungsaufwand betrieben werden muss.
Weitere Arbeiten
