Vision
rona:systems wollte die bestehende ERP-Software hinsichtlich UI Design und Usability verbessern. Die Vision war ein Style Guide, der alle zentralen Gestaltungsrichtlinien dokumentiert, für ein einheitliches, modernes Erscheinungsbild sorgt und so die Weiterentwicklung der Anwendung deutlich unterstützt.
Ergebnis
Wir haben für rona:systems einen Leitfaden entwickelt, an dem sich die Entwickler:innen orientieren und die Anwendung selbstständig weiterentwickeln können. In einem iterativen Prozess entstanden detaillierte Konzepte für Farben, Typografie, Icons und einzelne Screens. Das Team kann damit neue Features eigenständig umsetzen – auch ohne externe Unterstützung.
rona:systems ist ein führender Hersteller von innovativen Software-, Dispositions- und Telematiklösungen für die Entsorgungs- und Recyclingwirtschaft. Im EU-Raum zählt rona:systems rund 650 Kund:innen.
Reduzierte Farbpalette für mehr Klarheit
In der bisherigen Anwendung hatten die Farben verschiedene Bedeutungen, je nach Bereich, was durch eine Konsolidierung konsistenter und ruhiger wirkte. Mit dem neuen Style Guide wurde die Farbpalette überarbeitet und auf wenige, zentrale Farben reduziert. Diese sind sowohl für Light- als auch Dark-Mode ausgelegt und sorgen in beiden Varianten für ein harmonisches Erscheinungsbild.
Gezielter Einsatz der Farben
Der Style Guide legt im Detail fest, wie Farben im UI Design eingesetzt werden mit dem Ziel, visuelle Einheitlichkeit zu schaffen und die Usability zu verbessern. Farben für Texte, Hintergründe und Rahmen sind klar definiert, teilweise sogar auf Komponentenebene. Auch Interaktionszustände wie hover, focus oder disabled sind detailliert beschrieben. Das Ergebnis ist ein solides Fundament, das eine konsistente Weiterentwicklung ermöglicht und die Zusammenarbeit im Team vereinfacht.
Kompakte, gut lesbare Typografie
Eine zentrale Anforderung war es, eine platzsparende Schrift zu finden, die auch bei kleiner Größe gut lesbar ist. Dafür wurden mehrere Schriftarten miteinander verglichen und auf ihre Wirkung im UI Design getestet. Die finale Wahl fiel auf die Public Sans, welche beide Anforderungen optimal erfüllt. Aufbauend darauf wurde eine Type Scale entwickelt, die Schriftgrößen, Gewichtungen und Abstände klar definiert.
Skalierbares Iconset
Häufig verwendete Funktionen werden mit Icons dargestellt, um noch platzsparender zu sein. Damit Ziel war es daher, ein Iconset zu finden, das zur gewählten Schriftart passt, eine breite Auswahl bietet und erweiterbar ist. Die Entscheidung fiel auf einfarbige Outline-Icons von Microsoft Fluent. Das Iconset umfasst zahlreiche Icons in unterschiedlichen Varianten und Größen, lässt sich mühelos erweitern und ist Open Source.
Gezielte Optimierung von Screendesigns
Mit dem neuen Style Guide konnte rona:systems viele Screens eigenständig umsetzen – konsistent und effizient. Für einzelne Ansichten holte sich das Team Feedback ein. Die Entwürfe orientierten sich bereits stark am neuen Style Guide, boten aber noch Potenzial zur Verbesserung. Wir unterstützten mit gezielten Optimierungen, zum Beispiel bei der Informationsstruktur oder der Benutzerführung.
»Der Style Guide unterstützt die Entwicklung deutlich – wir treffen Entscheidungen jetzt schneller und konsistenter. Fusonic hat genau verstanden, worauf es uns ankommt.«
