MIQ Bildung – Website Redesign

Redesign der Website eines Bildungsinstituts in Berlin mit dem Ziel, Navigation, Lesbarkeit und den Zugang zu Kursinformationen zu verbessern.

 

Der Fokus lag auf:

  • Klarer Informationsstruktur
  • Verbesserter Nutzerführung
  • Besserer Auffindbarkeit von Kursangeboten
  • Modernem und vertrauenswürdigem Erscheinungsbild
Project Overview​​

 

Role

UI/UX Designer
Heuristische Evaluation, Competitive Analysis, Informationsstruktur und visuelles Redesign

 

Sector

Bildungsinstitut
Marketing-Website

 

Problem

  • Visuell veraltete und schwer scannbare Website
  • Unklare Struktur wichtiger Informationen
  • Kursangebote und Zeiten schwer auffindbar
  • Unklare Call-to-Action und Kontaktmöglichkeiten
  • Erhöhter Suchaufwand für Nutzer
The Process

Process

Das Projekt folgte einem pragmatischen UX-Ansatz mit Fokus auf Analyse und Strukturverbesserung.

 

Discover

  • Heuristische Evaluation der bestehenden Website
  • Identifikation von Problemen in Navigation, Lesbarkeit und Informationshierarchie
  • Competitive Analysis ähnlicher Bildungsanbieter

 

Define

  • Definition der wichtigsten NutzeraufgabenKurs finden

Kursdetails verstehen

Zeiten und Anmeldung prüfen

Kontakt aufnehmen

 

  • Neuorganisation der Hauptnavigation und Seitenstruktur

 

Develop

  • Neue Inhaltsstruktur für die Startseite
  • Klare Sektionen statt textlastiger Blöcke
  • Kartenbasierte Darstellung der Hauptangebote
  • Sichtbare Call-to-Action-Elemente

 

Deliver

  • Modernes, ruhiges UI mit klarer Typografie
  • Konsistente Buttons und Abstände
  • Strukturierter Footer mit Kontaktinformationen
  • Responsive Umsetzung
Discover

Heuristische Evaluation

Eine heuristische Evaluation der bestehenden Website wurde durchgeführt, um zentrale Usability-Probleme zu identifizieren.
Untersucht wurden Navigation, Informationsstruktur, visuelle Hierarchie und Auffindbarkeit wichtiger Inhalte.

Die folgenden Beispiele zeigen zentrale Usability-Probleme der Startseite.

Heuristische Evaluation – Startseite der bestehenden Website

 

1. Navigation Problem

  • Alle Navigationselemente haben die gleiche visuelle Gewichtung.
  • Es gibt keine klare Priorisierung der wichtigsten Seiten.
  • Nutzer erkennen nicht sofort, wo sie beginnen sollen.

2. Call-to-Action Problem

  • Wichtige Call-to-Action (Kursprogramm) ist visuell kaum hervorgehoben.
  • Der Einstieg zu den Kursinformationen ist schwer auffindbar.
  • Nutzer müssen aktiv im Inhalt suchen.

3. Text Density

  • Große Textblöcke erschweren das schnelle Scannen der Inhalte.
  • Wichtige Informationen gehen zwischen langen Absätzen verloren.
  • Fehlende visuelle Struktur reduziert die Lesbarkeit.

4. Sidebar Overload

  • Mehrere Widgets konkurrieren um Aufmerksamkeit.
  • Der Fokus auf den Hauptinhalt geht verloren.
  • Die Seitenstruktur wirkt überladen.

5. Visual Design

  • Veraltete visuelle Gestaltung und UI-Elemente.
  • Icons und Layout entsprechen nicht modernen Webdesign-Standards.
  • Die Seite wirkt technisch und gestalterisch nicht zeitgemäß.

6. Layout Structure

  • Unklare Inhaltsstruktur zwischen Hauptbereich und Sidebar.
  • Wichtige Inhalte sind nicht klar priorisiert.
  • Nutzerführung ist schwach.

Heuristische Evaluation – Integrationskurs Seite

 

 1. Call-to-Action

  • Wichtige Handlungsaufforderungen sind visuell kaum hervorgehoben.
  • Der Einstieg zum Kursprogramm ist nicht sofort erkennbar.

 

2. Textstruktur

  • Kursinformationen sind in langen Textblöcken dargestellt.
  • Die Seite erschwert das schnelle Scannen wichtiger Inhalte.

 

Informationshierarchie

  • Wichtige Informationen sind visuell nicht ausreichend hervorgehoben.
  • Die Struktur der Inhalte wirkt wenig klar.

Heuristische Evaluation – Kinderbeaufsichtigung Seite (alte Website)

Content Clarity

  • Der Zweck der Seite wird nicht sofort klar kommuniziert.
  • Nutzer müssen mehrere Absätze lesen, um das Angebot der Kinderbeaufsichtigung zu verstehen.

Information Prioritization

  • Wichtige Informationen wie Altersgruppen, Betreuungszeiten oder organisatorische Details sind schwer schnell auffindbar.
  • Relevante Inhalte sind nicht klar priorisiert.

 

Trust Elements

  • Zertifikate und vertrauensbildende Inhalte erscheinen erst im unteren Bereich der Seite.
  • Diese Elemente sind nicht strategisch platziert, um Vertrauen frühzeitig aufzubauen.

Interaction

  • Es gibt keine klare Handlungsaufforderung für interessierte Eltern.
  • Nutzer erhalten keine eindeutige Orientierung, wie sie weitere Informationen erhalten oder Kontakt aufnehmen können.

Additional Usability Issues

Ähnliche Usability-Probleme wie auf den zuvor analysierten Seiten sind auch hier zu beobachten, darunter textlastige Inhalte, eine schwache visuelle Hierarchie sowie eine wenig strukturierte Darstellung der Informationen.

Heuristische Evaluation – Kursprogramm Seite 

 

Information Complexity

  • Die Kursübersicht wird in einer großen, komplexen Tabelle dargestellt.
  • Nutzer müssen viele Spalten und Daten gleichzeitig verarbeiten.

Scannability

  • Die tabellarische Darstellung erschwert das schnelle Erfassen der Kursinformationen.
  • Nutzer müssen lange horizontal scrollen oder mehrere Spalten vergleichen.

Cognitive Load

  • Die hohe Informationsdichte erhöht die kognitive Belastung der Nutzer.
  • Es ist schwierig, relevante Kursinformationen schnell zu identifizieren.

Visual Hierarchy

  • Wichtige Informationen wie Kursart oder Kurszeiten werden nicht visuell hervorgehoben.
  • Alle Inhalte erscheinen mit ähnlicher visueller Gewichtung.

Content Structure

  • Informationen sind nicht modular aufgebaut.
  • Die Darstellung unterstützt keine schnelle Orientierung oder Vergleichbarkeit der Kurse.

Die heuristische Evaluation zeigte mehrere wiederkehrende Usability-Probleme auf der gesamten Website. Besonders deutlich wurden folgende Herausforderungen:

  • Unklare Informationsstruktur erschwert die Orientierung für Nutzer.
  • Wichtige Inhalte wie Kursinformationen sind schwer auffindbar.
  • Textlastige Seiten reduzieren die Scannability der Inhalte.
  • Die visuelle Hierarchie der Seiten ist schwach ausgeprägt.
  • Das Design wirkt insgesamt veraltet und wenig konsistent.

Competitive Analysis

Mehrere Websites ähnlicher Bildungsanbieter wurden analysiert, um gängige Muster in Navigation, Informationsstruktur und Kursdarstellung zu identifizieren.

 

Beispielhafte Referenzen

  • Goethe Institut
  • Volkshochschule
  • Sprachschule Berlin

 

Beobachtungen

  • Kursangebote als Karten oder strukturierte Module
  • Visuelle Hervorhebung wichtiger Informationen
  • Deutlich sichtbare Call-to-Action Elemente

 

Die Erkenntnisse aus der heuristischen Evaluation und der Competitive Analysis bildeten die Grundlage für die Definition der Designziele im nächsten Schritt.

Define

Define – Design Goals

 

Auf Basis der heuristischen Evaluation und der Competitive Analysis wurden folgende Designziele definiert:

  • Verbesserung der Informationsstruktur
  • Schnellere Auffindbarkeit von Kursangeboten
  • Klare visuelle Hierarchie zur besseren Orientierung
  • Reduzierung der kognitiven Belastung
  • Modernisierung des visuellen Erscheinungsbildes
  • Deutlich sichtbare Call-to-Action Elemente
Develop

UI Kit

Wireframing

Basierend auf den identifizierten Usability-Problemen wurden Low-Fidelity Wireframes für die wichtigsten Seiten der Website erstellt, um die Informationsstruktur und Nutzerführung zu verbessern.

Die folgenden Beispiele zeigen eine Auswahl zentraler Seiten:

  • Startseite
  • Integrationskurse
  • Kinderbeaufsichtigung
  • Kursprogramm

Ziel war eine klare Struktur, bessere Scannbarkeit und eine konsistente Seitenlogik als Grundlage für das spätere Redesign

Design Solution – Redesign der Website

Basierend auf den zuvor definierten Designzielen wurde die Website strukturell und visuell neu gestaltet. Der Fokus lag auf einer klareren Informationsstruktur, einer verbesserten Nutzerführung und einer übersichtlicheren Darstellung der Inhalte.

Die folgenden Beispiele veranschaulichen die wichtigsten Designverbesserungen der neu gestalteten Startseite.

Deliver

Final design

Die folgenden Beispiele zeigen die neu gestalteten Hauptseiten der MIQ-Bildung Website.

Impact

Das Redesign verbesserte die Benutzerfreundlichkeit und Zugänglichkeit der MIQ-Bildung Website deutlich. Nutzer können nun Kursangebote schneller verstehen, einfacher zwischen den Seiten navigieren und wichtige Informationen ohne lange Textabschnitte erfassen.

Key Improvements

  • Klarere Navigation
  • Bessere Auffindbarkeit der Kursangebote
  • Reduzierte kognitive Belastung
  • Klarere Informationshierarchie
  • Verbesserte Lesbarkeit der Inhalte
  • Schnellere Auffindbarkeit von Kontakt- und Anmeldeinformationen

Das neue Design bietet außerdem eine strukturierte Übersicht der Integrationskurse, Kinderbeaufsichtigung und Kursprogramme. Dadurch können Nutzer relevante Informationen schneller finden und einfacher zum passenden Kursangebot navigieren.

 

 

 

Next Steps

 

  • Usability testing
  • Mobile optimization
  • Further accessibility improvements