xLab Corporate Redesign

xLab Corporate
redesign

Client: xLab
Das xLab ist ein Experimentallabor der Hochschule Karlsruhe und bietet Studierenden, Forscher:innen und wissenschaftlichen Mitarbeiter:innen Raum zum Explorieren.
Branche: Wir ❤️ Karlsruhe
Website: xlab.center
Zielsetzung

Studierende auf das Projekt aufmerksam zu machen und die dafür notwendigen strategischen Maßnahmen zu definieren.

Ergebnis

Ein überarbeitetes zeitgemäßes Erscheinungsbild als Design System, welches als Baukasten dient, um die Website flexibel bestücken zu können.

xLab bietet Raum für Studierende, Forscher:innen und wissenschaftliche Mitarbeiter:innen zum Explorieren, Experimentieren und Ausprobieren. Losgelöst von festgefahrenen Kategorien, können Student:innen hier ihr eigene Ideen, Projekte, Forschungsansätze oder -ergebnisse in einer geschützten Umgebung, mit der Unterstützung von Coaches, Gastdozent:innen sowie Professor:innen, entwickeln und umsetzen. Mit diesen Werten im Kopf haben wir das Corporate Design von xLab überarbeitet und einen neuen, Onlineauftritt erschaffen.

Unsere Vorgehensweise

Das Ziel des Projektes war und ist es, Studierende auf das Projekt aufmerksam zu machen. Wir haben die Digitalstrategie entwickelt und geplant. Dafür sollte eine bessere Seitenstruktur und Experience für Nutzer:innen geschaffen werden. Es waren unterschiedliche Disziplinen beteiligt, Digital Business, SEO und Design und Experience.

Digital Business Workshop

Hier wurden relevante Personas identifiziert und mit der bereits gesammelten Erfahrung und zur Verfügung stehenden Daten bestimmt.

SEO und Content

Im Rahmen unseres SEO Audit wurde die Struktur der Website, die Performance, die Strukturierung der Seiteninhalte und Onsite- und Offsite-Verlinkungen genau unter die Lupe genommen. Außerdem haben wir uns gemeinsam die Wettbewerber angeschaut.

Themenfelder und wichtige Keywords wurden im gemeinsamen SEO-Workshop definiert und priorisiert. Zudem haben wir das Suchvolumen und Potenziale analysiert und die Sitemap bzw. Informationsarchitektur definiert. 

Das Tracking wurde mit der Google Search Console eingerichtet und alle Ergebnisse und Auffälligkeiten sorgfältig in einer Präsentation dokumentiert, die wir xLab im Anschluss zur Verfügung gestellt haben. Die dadurch ermittelten Quick-Wins haben wir direkt umgesetzt.

Die Sitemap zeigt die Struktur und den Aufbau der (zukünftigen) Website.

Das Redesign

Gemeinsamer Design und Experience Workshop

Zuerst haben wir User Stories für die Personas definiert, um die konkreten Anforderungen an die Website herauszuarbeiten und davon die passenden Maßnahmen abzuleiten.

Neues Design: Konzeption und Basis

Bedeutung des Logos

Das Logo von xLab soll als dynamisches Gestaltungselement weiterverwendet (s. Gestaltungsmuster) werden. Das X wird nun als variabler Parameter verwendet. Die eckigen Klammern [ ] stehen für einen sicheren und geschützten Raum und das Lab verdeutlicht den experimentellen Charakter.

Branding: Farbgebung und Bedeutung

Die vorgegebenen Basisfarben, die weiterhin verwendet werden sollen, sind schwarz und weiß. In einem gemeinsamen Design Workshop haben wir das Spektrum um die Farben Blau und Gelb in sehr gesättigten Versionen ergänzt. In Kombination stellen die Farben ein Experimentalcharakter und gleichzeitig eine sichere Umgebung dar, was beides sehr gut zur Marke von xLab passt.

Typografie

Um diese nüchterne Sicherheits- und Warnhinweisfarbgebung zu brechen, haben wir eine progressive Schriftgestaltung gewählt, welche durch die Schriftart Poppins hervorragend funktioniert. Diese Schriftart bringt durch eine sehr stark geometrisch konstruierte Form, eine unkonventionelle Komponente in das Erscheinungsbild der Inhalte.

Gestaltungsmuster und Motion Design

In das Branding sollen die drei Kernkompetenzen bzw. Disziplinen von xLab miteinfließen: Wissensaufbau, Vernetzung und Infrastruktur. Das Signet des Logos wurde durch Gestaltungselemente ergänzt und in eine animierte Form überführt. Was vor allem Nutzer:innen dabei helfen soll, Kategorien und Themen auf der Website einzuordnen. Die Farbgebung soll dies systematisch unterstützen: Auf der Landingpage zum Thema Wissensaufbau dominiert die Farbe Gelb mit entsprechendem Signet.

Designsystem in Figma

Für dieses Projekt haben wir Figma als Designtool verwendet. Wir setzen Figma für kollaboratives Arbeiten ein, da die Komponenten ohne extra Synchronisierungsprozess oder manuelles Tauschen von Dateien in der neuesten Version stets direkt für alle verfügbar sind. Im Anschluss an das Projekt kann diese Library auch von den Kund:innen weiterverwendet und -entwickelt werden und dient als Archiv für die Vorgängerversionen.

Beispielhafte Personas mit ihren Customer Journeys aus dem B2B und B2C Bereich.

Umsetzung des Konzept

Diese Seite wurde von xLab selbst implementiert, nachdem wir das Designkonzept und die Komponenten des Design Systems übergeben haben.

Starte jetzt Dein Projekt gemeinsam mit uns.
Wir freuen uns auf Deine Ideen und unterstützen gerne bei Deinem Vorhaben, egal ob neues Projekt oder Umstrukturierung.

Am Projekt beteiligt

Michael Wallner
UI-Design-Stratege
Doro Sthamer
UX-Design-Strategin
Lena Dupont
SEO-Strategin
Rachel Gozal
UI-Design-Strategin

Erfolgsgeschichten

Diese Partner durften wir auf einem ähnlichen Weg und bei ihrem Digital Game Plan begleiten.