UX/UI-Design Fallstudie

Was ist MentorHero?

MentorHero ist eine responsive Web-App, die junge Frauen und Mädchen, die sich für eine Karriere in der IT interessieren, mit erfahrenen Frauen im Sinne eines Mentorings verbindet.

Zeitraum

Februar bis Juni 2022

Rollen
  • UX-Research und -Design
  • UI-Design
  • Logo-Design
Tools
  • Figma (Wireframing, Prototyping)
  • FigJam (User Flows, Affinity Mapping)

Warum dieses Projekt?

MentorHero ist ein fiktives UX/UI-Design-Projekt, das ich im Rahmen meiner UX-Design-Weiterbildung  bei CareerFoundry durchgeführt habe.

In diesem Projekt hatte ich verschiedene Rollen inne, darunter die der UX/UI-Designerin, des Product Owners, um die Business Requirements zu definieren, und schließlich die der Logo-Designerin.

Projektziel

Das Ziel dieser responsiven Web-App war, eine Mobile-First-Website zu designen, die es den Nutzer:innen ermöglicht, überall und jederzeit mit einer IT-Expertin mithilfe von Video-Chats zu sprechen.

Design-Ansatz

In diesem Projekt wurde der Design-Thinking-Ansatz verfolgt. Design Thinking ist ein lösungsorientierter Ansatz, der darauf abzielt, die Nutzerbedürfnisse mithilfe einer gut designten und technisch möglichen Lösung zu erfüllen.

01 Das Problem verstehen

Wichtigster Schritt, um eine Lösung für ein Problem zu designen, ist es, das Problem zu verstehen. Daher formulierte ich mithilfe der Double Diamond Strategy eine Problemstellung und führte anschließend eine Wettbewerbsanalyse durch.

Double Diamond Strategy

Die Double Diamond Strategie verhindert Verzerrungen im Strategieprozess. So kann die best mögliche Lösung für ein Problem gefunden werden

Sie wird verwendet, um die divergenten und konvergenten Phasen eines Designprozesses abzubilden: Entdecken (Discover), Definieren (Define), Entwickeln (Develop) und Liefern (Deliver).

Ich habe die Double Diamond Strategie verwendet, um zunächst eine Liste möglicher Probleme zu erstellen, auch durch Analyse der Wettbewerber (Divergenz), und dann  das Problem zu formulieren (Definition). Schließlich habe ich eine mögliche Lösung beschrieben (Develop and Deliver).

Ergebnisse der Problemanalyse

Liste möglicher Problemstellungen
  1. Den Mädchen und jungen Frauen fehlen weibliche Vorbilder.
  2. Im Jahr 2021 gab es 96.000 unbesetzte Stellen in der IT.
  3. Nur 25 % der Informatik-Studierenden sind Frauen.
Wettbewerbsanalyse

Im Rahmen der Wettbewerbsanalyse wertete ich drei verschiedene Mentoring-Programme für Frauen aus.

Hauptaspekte waren die Gesamtstrategie, der Marktvorteil und das Marketingprofil der Anbieter.

Außerdem führte ich eine Swot-Analyse durch, um die Stärken und Schwächen der Wettbewerber zu analysieren.

Folgende Wettbewerber wurden analysiert:

  1. Cybermentor – eine MINT Online-Plattform für Mädchen
  2. MenterMe – ein Mentoringprogramm für Frauen
  3. FeMentor – eine Reverse-Mentoring-Plattform für Frauen
Problemstellung

Eine 18-jährige Frau, die sich für Informatik interessiert, braucht eine einfache und informelle Möglichkeit, per Videoanruf eine persönliche Betreuung durch eine erfahrene IT-Fachfrau zu erhalten, da es ihr in ihrer Familie an Vorbildern fehlt, die sie bei ihrer Entscheidung unterstützen könnten.

Hypothese

Ob meine Hypothese stimmt, weiß ich, wenn ich sehe, dass sich junge Frauen auf der Plattform MentorHero für ein Mentoring anmelden und Videoanrufe mit den Experten buchen.

Gemessen wird dies an der Zahl der registrierten Nutzer und der gebuchten Videoanrufe.

02 User Research

Nächster Schritt im Design-Thinking-Prozess ist es, die Nutzer:innen zu beobachten (Observe). Hierzu habe ich dreie moderierte Remote-User-Interviews mithilfe von Zoom durchgeführt und ausgewertet. Jede:r Nutzer:in repräsentierte eine der drei Zielgruppen: Mentor, Mentee und Eltern.

Die Beobachtungen und Äußerungen aus den User-Interviews wurden anschließend mithilfe des Affinity Mappings geclustert

Affinity Mapping

Affinity Mapping ist eine Methode in dem User Research, die dazu dient, die Ergebnisse der Interviews (Äußerungen der Nutzer, Beobachtungen) zu strukturieren und zu ordnen.

Dabei werden ähnliche Ideen zusammengefasst und kategorisiert, um ein besserer Verständnis von den Bedürfnissen und dem Verhalter der Nutzer:innen zu bekommen.

Ergebnisse des User Research

Research-Ziele
  1. Was genau brauchen junge Frauen und Mädchen, die sich für IT interessieren?
  2. Welche Anforderungen haben Mentorinnen und Mentoren, wenn sie ihre Expertise bereitstellen?
  3. Wie können Eltern überzeugt werden, das Mentoring ihrer Töchter zu unterstützen?
Einblicke: Perspektive Mentee
  • Mentees sind auf der Suche nach Vorbildern. Deshalb sollten die Mentoren weiblich sein.
  • Vertrauen ist ein sehr wichtiger Faktor für die Buchung eines Mentorats. Daher sollten Profilbilder und persönliche Informationen über die Mentoren bereitgestellt werden.
  • Mentees interessieren sich sowohl für jüngere Mentoren, die am Anfang ihrer Karriere stehen, als auch für erfahrene Profis.
  • Das Angebot sollte unentgeltlich sein.
Einblicke Perspektive Mentor
  • Der Alltag der Mentoren ist sehr ausgelastet. Daher würden sie auch asynchrone Kommunikation (Q&A, Forum) bevorzugen.
  • Die Mentoren möchten über die Vorkenntnisse und Erfahrungen der Mentees Bescheid wissen. Daher ist das Profil der Mentees ebenso wichtig wie das der Mentoren.
Einblicke Perspektive Eltern
  • Schule und Lehrer scheinen als Ansprechpartner für die Eltern keine große Rolle zu spielen.
  • Die Eltern sind nicht so sehr am Mentoring-Prozess selbst interessiert.
  • Mentoren sollten weiblich sein.
Fazit

Da die Eltern im Mentoring-Prozess selbst nicht die Hauptrolle zu spielen scheinen, habe ich mich im weiteren Verlauf des Projekts auf Mentees und Mentoren konzentriert (Schritte 3-6).

03 Personas (Point of View)

Mit den Ergebnissen von Schritt 2 erstellte ich zwei verschiedene Personas: eine Mentee und eine Mentorin.

Was sind Personas?

Personas sind fiktive Nutzer:innenprofile, die im UX-Design verwendet werden, um ein besseres Verständnis von den Bedürfnissen, der Motivation und dem Verhalten der Zielgruppe zu bekommen.

Personas repräsentieren eine bestimmte Nutzer:innengruppe und sind auf bestimmte Merkmale und Eigenschaften zugeschnitten, etwa das Alter, das Geschlecht, das Bildungsniveau, den typischen Alltag oder das Nutzungsverhalten mit Blick auf digitale Endgeräte.

Wichtig ist, dass Personas auch als Kommunikationswerkzeug innerhalb von Teams dienen, um sicherzustellen, dass alle Features eines Produkts auch wirklich auf die Nutzer:innenbedürfnisse zugeschnitten sind.

04 User Journey Map und User Flows (Ideate)

Mit den Ergebnissen von Schritt 2  und 3 ging ich anschließend zum nächsten Schritt im Design-Thinking-Prozess über und erstellte für jede der beiden Personas je eine User Journey Map und einen User Flow.

Was sind User Journey Maps?

Eine User Journey Map ist eine Methode im UX-Design, die den Prozess beschreibt, den ein Nutzer durchläuft, um ein bestimmtes Ziel zu erreichen. Dabei wird der gesamte Ablauf visuell dargestellt: vom ersten Kontakt mit dem Produkt oder der Dienstleistung bis zum Ziel des Nutzers.

Eine User Journey Map besteht aus mehreren Schritten:

  1. Definition des Nutzerziels

  2. Identifikation der Touchpoints: Das sind alle  Kontaktpunkte des Nutzers mit dem Produkt oder der Dienstleistung.

  3. Beschreibung der Interaktionen mit dem Produkt, etwa das Klicken eines CTA-Buttons.

  4. Erfassen von Emotionen und Gedanken

  5. Visualisierung

Zusätzlich habe ich in meiner User Journey Map erste Hinweise ergänzt, wie die einzelnen Touchpoints gestaltet werden müssen und welche Abteilung letztlich für die Umsetzung verantwortlich sein würde (Owner).

Was sind User Flows?

Ein User Flow ist ein Diagramm oder eine Übersicht von Seiten, mit denen ein Benutzer interagieren muss, um eine Aufgabe abzuschließen oder ein Ziel zu erreichen.

Sie haben einen Anfang und ein Ende und folgen dem Fortschritt des Benutzers im gesamten Diagramm.

05 Informationsarchitektur, Wireframes und Prototypen

Zu Beginn dieses Schritt erstellte ich eine Sitemap, die alle nötigen Seiten der Web-App und somit die gesamte Informationsarchitektur der Web-App darstellte.

Im Anschluss daran begann ich erste Low-Fidelity Wireframes mithilfe der App „Good Notes“ (für iPad) zu scribbeln. Danach erstellte ich Mid-Fidelity Wireframes mithilfe von Figma, um zuletzt einen ersten Prototypen zu designen, mit dem die User-Tests des nächsten Schritts durchgeführt werden konnte.


Was ist Informationsarchitektur?

Informationsarchitektur bedeutet, Informationen so zu organisieren, dass sie für Benutzerinnen und Benutzer leicht zugänglich und nutzbar sind.

Sie umfasst die Planung, Gestaltung und Organisation von Inhalten auf Websites, Apps oder anderen digitalen Plattformen.

Eine gut gestaltete Informationsarchitektur hilft Benutzer:innen dabei, Inhalte schnell und effektiv zu finden, ohne sich durch unnötige Inhalte klicken zu müssen.

Was sind Sitemaps?

Eine wichtige Komponente der Informationsarchitektur sind Sitemaps. Sie zeigen eine grafische Darstellung der Struktur einer Website oder Anwendung.

Eine Sitemap hilft dabei, die Hierarchie und Beziehungen zwischen den verschiedenen Seiten und Inhalten auf einer Website oder Anwendung zu visualisieren.

Sitemap (Informationsarchitektur)

Wireframes und Prototypen

Während dieser Phase erstellte ich zahlreiche Low-Fidelity-Wireframes. mit verschiedenen Funktionalitäten und User Flows. Hier zeige ich jedoch einen spezifischen Prozess für jede Persona:

Low-Fidelity Wireframes

Um erste Eindrücke von der User Experience zu bekommen und User-Test durchführen zu können, wählte ich zunächst das Tool Marvel und erstellte sehr einfache Prototypen.

Interaktiver Mid-Fidelity Prototyp

Da sich herausstellte, dass Marvel nicht sehr benutzerfreundlich war, entschied ich mich, Mid-Fidelity-Wireframes mithilfe von Figma zu gestalten und für jeden Benutzerfluss einen interaktiven Prototypen zu erstellen.

Interaktiver High-Fidelity Prototyp

Nach den User-Tests (Schritt 6) und nachdem ich ein Design System erstellt hatte, designte ich High-Fidelity-Prototypen für jeden User Flow und Screen.

06 User-Testing

Nachdem ich interaktive Mid-Fidelity-Prototypen entworfen hatte, führte ich moderierte Remote-User-Tests mit 6 verschiedenen Usern durch, die beide Arten von Personas repräsentierten. Dazu schrieb ich ein Usability-Testskript, lud die User zu Zoom ein und teilte dort den Figma-Prototypen. Anschließend bat ich die Nutzer:innen, 4 verschiedene Aktivitäten (Tasks) durchzuführen. Die Interviews wurden mit Zoom aufgezeichnet und die Audio-Dateien wurden transkribiert.

Nächste Schritte:

  • Auswertung der Audio- und Videoaufzeichnungen von den Tests
  • Erstellung einer Affinity Map
  • Erstellung einer detaillierten Zusammenfassung aller Fehler und Probleme 
  • Dokumentation und Bewertung der Fehler mithilfe der Jacob Nielsen Rating Scale
  • Anfertigung eines Rainbow Spreadsheets in Excel, um die Redesigns zu priorisieren.
  • Am Ende schrieb ich einen detaillierten User-Test-Report.

Ergebnisse der User-Tests

Rainbox Spreadsheet zur Priorisierung der Fehler

In einer Exceltabelle sammelte ich alle Fehler und bewertete sie nach der Jacob Nielsen Rating Scala. Schwere Fehler färbte ich rot, leichte gelb, kosmetische grün. Anhand dieser Bewertung konnte ich die Überarbeitung der Prototypen priorisieren.

Interaktiver Prototyp auf Figma