Der Auftrag

Die Website der IB.SH ist in die Jahre gekommen. Ein Relaunch steht an. Als das zentrale Förderinstitut des Landes, berät, fördert und finanziert die Investitionsbank Schleswig-Holstein (IB.SH) Unternehmen, Privatpersonen und Kommunen. Die Website richtet sich daher an diese von Grund auf unterschiedlichen Zielgruppen, die alle noch viel unterschiedlichere Vorhaben umsetzen möchten.

Die Tat-Sachen

  • Konzeptions-Workshops
  • Wireframing, Prototyping
  • Responsives, barrierefreies Webdesign
  • HTML und CSS, Frontend
  • TYPO3-Backend, CMS
  • Contentpflege

Der Lösungsweg

Wir wollten die Zielgruppen und die Anforderungen an die Website genauer definieren. Daher standen am Anfang eine Reihe von Workshops, in denen wir nach dem Modell des UX-Turms vorgingen, um Antworten auf diese Fragen und weitere Insights über Strategie und Umfang der Seite zu gewinnen.

Workshop farbige, beschriftete Zettel

Von den Personas zur Struktur

In den Workshops entwickelten wir mit dem Kunden gemeinsam eine Reihe von Personas, um die Zielgruppen besser zu verstehen. Aus diesen leiteten wir User-Stories ab und bildeten sie in einer User-Story-Map ab.

So erhielten wir einen Überblick sowohl über den inhaltlichen, als auch den funktionellen Umfang. In weiteren Workshops gossen wir diese in eine leicht verständliche Struktur.

Content Modell

Das Design

Basierend auf dem Corporate Design der IB.SH leiteten wir ein Design-System für die neue Website nach dem Atomic Design Prinzip ab. Auch ein kompletter neugestalteter Icon-Satz entstand dabei.

Ein wichtiger Aspekt war dabei die barrierefreie Umsetzung. Dafür mussten Farbkontraste sowie weitere Kriterien, besonders in der Frontend-Umsetzung berücksichtigt werden. Für das Design bedeutete das, dass viele Farbkombinationen nicht genutzt werden konnten, da der Kontrast nicht ausreichend gewesen wäre. Interaktionen bei Hover über Teaser oder Buttons sorgen für ausreichend Unterschied, sodass Nutzer*innen die besonderen Interaktionsmöglichkeiten erkennen können.

verschiedene Icons in dunkelblau
IB.SH Anzeigen
verschiedene Buttons
neugebautes Haus
IB.SH Screens

Der Förderfinder

Um den Bedürfnissen der Personas zu begegnen und den User auf schnellem Weg zu den Förderprodukten zu leiten, haben wir den Förderfinder entwickelt. Mit ihm wird das Auffinden der geeigneten Förderung zum Klacks. Unterstützende Animationen erhöhen den Joy of Use.

Alles fertig

Zusammen ergibt sich ein moderner, klarer Webauftritt, der sowohl beim Kunden, als auch bei den Nutzern sehr gut ankommt und für steigende Nutzerzahlen sorgt.

ein ausgeschalteter Computer Bildschirm und ein ausgeschaltetes Handy
IBSH Website
Hero der Website der IB.SH
IBSH Website
IB.SH Website
Website in Blau und Schwarz
IB.SH Website
IBSH WEbsite
IB.SH WEbsite

Ich weiß mehr über dieses Projekt

Profilbild von Jana Witt