Ü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.
Ziele
Lösungen
Einfluss
Das einheitliche und übersichtliche Design ermöglicht es den Nutzern, die Apps intuitiver zu verwenden und die kognitive Belastung zu verringern.
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
