Optimierung der User Experience und des User Interfaces für interne GUIs

Faurecia

Ein Bildschirmfoto zeigt ein Dashboard mit verschiedenen Diagrammen und Zahlen. Im Vordergrund ist ein hochwertiger Autositz aus Leder zu sehen. Die Diagramme visualisieren Kennzahlen wie die Qualität der verwendeten Materialien, die Produktionskosten und die erzielten Preise für die Autositze.

Projektübersicht
Projektmerkmal	Projektdetails
Kunde	Faurecia
Bereiche	Design & Strategy
Link	http://www.faurecia.de
Leistungen	Konzeption Design Projektmanagement
Technologien / Tools	Sketch InVision Zeplin
Zeitraum

Konzeption

Design

Projektmanagement

Faurecia ist ein börsennotierter Automobilzulieferer mit Sitz in Naterre bei Paris. Das französische Unternehmen beschäftigt Anfang 2024 157.000 Mitarbeiter:innen. Zu diesen Zeitpunkt war es an 290 Standorten in 40 Ländern vertreten.

‍

Der französische Automobilzulieferer entwickelt und produziert alle Komponenten eines Sitzes: Rahmen, Verstellmechanismen, Schienen,Schaumstoffe und Sitzbezüge. Die Autositze bieten Lösungen für Sicherheit wie den Schutz vor Schleudertraumata, Komfort, Qualität, Modularität und geringeres Gewicht, die unter anderem durch die Verwendung von Natur- bzw. Recyclingmaterialien erzielt werden.

Industriestandorte
290
Nationalitäten im Unternehmen
146
Fahrzeuge mit FORVIA-Technologien
1 von 2

Unsere Aufgabe in diesem Projekt war es, ein passendes Lösungskonzept zu erarbeiten, welches den internen Anwendungen ein einheitliches Gesamterscheinungsbild verleiht und den Usern eine optimale Benutzbarkeit ermöglicht. Die Schwierigkeit hierbei war, die komplexen und vielfältigen Auswertungsmöglichkeiten zu vereinheitlichen und diese strukturiert und überschaubar darzustellen.

Design-System-Darstellung mit einer Farbauswahlpalette, Schriftart 'Century Gothic', Button-Styles für primäre und sekundäre Aktionen, einer Dropdown-Auswahl, einer Kontaktkarte mit Foto und Informationen, sowie einer Illustration von Datenvisualisierungen. Die Farben und Typografie sind klar definiert, und die Buttons zeigen verschiedene Interaktionszustände wie normal, deaktiviert und Hover.

Die Oberflächengestaltung und Verbesserung der Usability bildeten das Hauptaugenmerk des Projektes. In der Konzeption stand vor allem die Vereinheitlichung der einzelnen Applikationen im Vordergrund.

Benutzeroberfläche mit verschiedenen Dialogboxen: Fehler (rot), Information (blau), Warnung (gelb) und Erfolg (grün), jeweils mit Symbolen und Text. Eine zusätzliche Karte zeigt ein Symbol für ein Fahrzeug und Text. Rechts im Bild befindet sich eine schwarze Kopfstütze als Produktdarstellung.

Atomic Design Modell

Es wurde zuerst ein UI/UX Audit erstellt, um festzustellen wo die Problemzonen liegen. Die verschiedenen Anwendungen wurden durchgetestet und analysiert. Wir entschieden uns nach dem Testing mit dem Atomic Design Modell zu arbeiten. Hier werden die einzelnen Komponenten vom kleinsten bis hin zum größten Element aufgebaut und so an die Entwickler übergeben. Oft kann dieses Designmodell dann einfach erweitert und aufgebaut werden.

Ein Diagramm, das einen Designprozess veranschaulicht. Es beginnt mit einem einzelnen, einfachen Element (Atom), das sich zu komplexeren Strukturen (Moleküle, Organismen) entwickelt. Schließlich wird daraus ein rechteckiges Layout mit mehreren kleineren Rechtecken (Seiten). Die Farben sind hauptsächlich weiß und pink, was einen modernen und minimalistischen Eindruck vermittelt.

Am Ende erarbeiteten wir aus den erstellten Komponenten einen Styleguide, der für jede Anwendung als Grundgerüst dienen soll. Die Anwendungen werden jetzt nach und nach an den neuen Styleguide angepasst.