Ziele und Herausforderungen
Als wir im Mai 2022 begannen, für die K.D. Feddersen Gruppe ein neues Setup für die Firmenwebsite zu entwerfen, standen viele spannende Herausforderungen vor uns. Der Kunde hatte eine klare Vision: Er wollte, dass die Websitestruktur aufgebrochen und die redaktionelle Verantwortung in die Hände der verschiedenen Unternehmensbereiche gelegt wird. Es galt eine Seite zu schaffen, die die Unternehmensgruppe repräsentiert, relevante Informationen über die internationalen Gesellschaften beinhaltet und als Verteilerseite für die weiteren Unternehmensbereiche fungiert, sodass User schnell herausfinden, welches Unternehmen am besten für die Lösung ihres Problems geeignet ist. Außerdem sollte diese Website im vierten Quartal 2022 launchen, was einen strikten Zeitplan mit sich brachte.
Um den Bedürfnissen aller Unternehmensbereiche und User gerecht zu werden, wurde im Zuge des B2B Website-Relaunch, ein skalierbares Design-System mit einem modernen Look & Feel geschaffen, das die digitale Positionierung der Feddersen-Gruppe betont, den differenzierten technischen und inhaltlichen Anforderungen gerecht wird und die Vielseitigkeit der Produkte und Lösungen der Unternehmensgruppe in einem neuen Glanz erstrahlen lassen.
Über die Feddersen-Gruppe
Die Feddersen-Gruppe ist eine international agierende Unternehmensgruppe mit Hauptsitz in Hamburg. Seit über 70 Jahren stehen die Unternehmen für höchste Qualität und Zuverlässigkeit. Sie decken eine Vielzahl von Kompetenzen in verschiedenen Branchen ab, welche unter anderem den Vertrieb von technischen Kunststoffen, Spezialchemie und technischen Produkten, die Kunststoffproduktion sowie Leistungen rund um das Lohncompounding, Masterbatches und biologisch abbaubare sowie biobasierte Compounds, die Herstellung von Doppelschneckenextrudern und den Edelstahlhandel umfasst.
1100
Mitarbeiter:innen
900
Mio. Euro Umsatz in 2021
NaN
Konzerngesellschaften weltweit
Der Weg zum Ziel
Um all den unterschiedlichen Zielsetzungen und der engen Timeline gerecht zu werden, wurde in mehreren Workshops ein umfangreicher Anforderungskatalog erarbeitet, der für die ersten 3 Unternehmensbereiche angewandt wurde.
Das Zusammenspiel von Storyblok mit einer E-Commerce-Instanz galt es bei der visuellen und technischen Konzeption zu berücksichtigen, um den Eindruck einer nahtlosen Plattform zu schaffen. Auch bei der Modulentwicklung galt es beide Instanzen und die unterschiedlichen Ziele der Websites miteinzubeziehen, um so die einzelnen Teams in ihrem Vorhaben bestmöglich zu unterstützen.
Es wurde ein Projektteam mit fixen Ansprechpersonen von Seiten Feddersen und TOWA festgelegt. Zu Beginn erfolgte die Analysephase mit einer Wettbewerbs- und Benchmarkanalyse, eine Befragung der Stakeholder, sowie einer Feasibility-Study von Seiten der Technik. Gemeinsam mit der K.D. Feddersen Holding GmbH wurden dann Personas und Zielgruppen für die einzelnen Unternehmensseiten definiert. Diese waren für den weiteren Verlauf des Projektes essenziell und bildeten die Basis für den Konzeptions- und Designprozess gemeinsam mit dem Kunden. Eine weitere Grundlage bildete unter anderem die Digital-Strategie und das neue Branding der Feddersen-Gruppe. Aufgrund der räumlichen Situation fanden zahlreiche Konzeptionsworkshops über MS Teams statt. Als Werkzeug für die Workshops wurde FigJam erfolgreich eingesetzt.
Das Look & Feel als Grundlage für alle weiteren Schritte im Designprozess
Es war wichtig die vielen unterschiedlichen Stakeholder im Unternehmen frühzeitig abzuholen, um nachträglichen Korrekturschleifen vorzubeugen. So wurde auf Basis des Look & Feels die visuelle Richtung des neuen digitalen Auftritts entwickelt und intern präsentiert.
Nach der Zustimmung wurde das Design iterativ mit dem Kunden weiter ausgebaut und parallel ein digitales Design-System geschaffen, welches für alle weiteren digitalen Touchpoints genutzt werden kann. Es sollte die diversen Anwendungen wie Website, E-Commerce, Verwaltungs-Applikation berücksichtigen und auf die unterschiedlichen Brand-Guidelines der Unternehmen unter Verwendung der gleichen Module abgestimmt sein.
Dies war besonders für die UI-Gestaltung weiterer Unternehmensgruppen wichtig, da so auf das bereits fertige Komponentenwerk zugegriffen und der Designprozess maßgeblich beschleunigt werden konnte.
Vorteile auf einen Blick: Pure Effizienz und unschlagbare Konsistenz.
Durch die Verwendung von vordefinierten Komponenten und Modulen konnten wir im weiteren Projektverlauf Zeit und Mühe bei der Gestaltung neuer Designs sparen. Außerdem konnte so schnell und effizient auf die Wünsche des Kunden eingegangen werden.
Wir haben zusätzlich sichergestellt, dass das Design-System eine klare Struktur hat und skalierbar ist. Dadurch wurde nicht nur eine einheitliche Optik erreicht, sondern vielmehr ermöglichte das Design-System eine Konsistenz über alle digitalen Touchpoints und Unternehmensbereiche hinweg. Änderungen an einer Komponente wirken sich sofort aus, die Designs sind immer auf dem neuesten Stand und das Qualitätsniveau aufrechterhalten.
Ein Blick in die Systemstruktur
In Zusammenarbeit mit dem Kunden wurden in Workshops gemeinsam Funktionalitäten der Websites erarbeitet.
Hierfür haben wir ein Design-System Konzept via Figma erstellt, welches mehrere Librarys beinhaltet, die den Design-Prozess bei der Erstellung der Templates massiv erleichterten:
Basics (Brand Guidelines): Farben, Typografie, Icons, Grid, Bildsprache, UX Wording, …
Universal Components: Buttons, Links, Navigation, Footer, Formularfelder, Dropdowns, …
CMS Components: Hero Modul, Teaser, Image-Text, News-Slider/Grid, Listen, …
E-Commerce Components: Produktkacheln, Produktslider, Komplexe Tabellen, …
5 wichtige Key-Take-Aways
1.
Stakeholder frühzeitig ins Boot holen
Um ein Design-System erfolgreich aufzubauen, sollten alle relevanten Stakeholder von Beginn an miteinbezogen werden. Dies hilft dabei, ein gemeinsames Verständnis für Projekt und Design-System zu erreichen.
2.
Iterative UI-Entwicklung unter laufenden Feasibility-Checks
Eine iterative UI-Entwicklung unter laufenden Feasibility-Checks durch die Entwicklung sichert die Umsetzbarkeit des Designs und hilft dabei unnötige Kosten zu vermeiden. Mit den Rückmeldungen des Entwicklers können notwendige Anpassungen rechtzeitig vorgenommen werden.
3.
Namensgebung der Komponenten in Abstimmung mit der Entwicklung
Eine konsistente Namensgebung der Komponenten hilft dem gesamten Team beim Verständnis des Systems und sorgt für einen gleichbleibend hohen Qualitätsstandard im Projektverlauf. Um jedoch Probleme bei der Integration zu vermeiden, sollte die Bennnung in Absprache mit der Entwicklung erfolgen.
4.
Ein eigener Figma-Space für den Kunden
Nicht immer, aber in diesem Fall hat sich ein eigener Figma-Space für den Kunden als sehr sinnvoll erwiesen. Nachdem wir davon ausgegangen sind, dass das Design-System in naher Zukunft an Umfang zunehmen wird, war eine Trennung der Libraries aus Sicht der Zusammenarbeit am besten. Hierdurch konnten Kooperation und Feedback effizient abgewickelt werden und der Kunde kann nun auch in weiterer Folge selbst Anpassungen und Erweiterungen vornehmen.
5.
Make it your own
Design-Systeme sind genauso individuell, wie ein digitales Produkt und das Team, zu dem sie gehören. Sie sind nie "fertig" und sollten fortlaufend weiterentwickelt werden.
Ausblick
Begonnen mit einem reinen UI/UX-Projekt, entwickeln wir uns immer mehr zum Full-Service-Digital-Partner der Feddersen-Gruppe. Neben der Storyblok-Umsetzung agieren wir derzeit sehr stark in der Content- und SEO-Strategie, sowie dem Tracking Konzept für alle Instanzen.
Neben geplanter Animationen, um die Userführung der Website noch weiter zu verbessern, freuen wir uns vor allem die Feddersen-Gruppe bei den bevorstehenden Relaunches weiterer Unternehmen unterstützen zu dürfen.
Wenn Sie mehr über die technische Seite des Projektes erfahren möchten, dann einfach hier zum Case.