layout social linkedin

Optimale User Experience für das Lernen in Unternehmen.

Skillup ist ein EdTech-Startup, das mittels einer KI-gesteuerten Plattform das organisatorische Lernen revolutioniert. Mit einem intuitiven und unterhaltsamen Ansatz ermöglicht Skillup Mitarbeitern und Teamleitern, ihre Kompetenzen durch maßgeschneiderte Lernerfahrungen zu erweitern.

Verantwortlich für eine umfassende Umgestaltung der User Experience und das Interface Design, habe ich das Ziel verfolgt, Skillup in eine benutzerfreundliche, wirkungsvolle und skalierbare Lernplattform zu transformieren.

Onboarding Zeit Reduktion

150%

Reduktion Entwicklungskosten

150%

Feature Verständnis bei Nutzertests

+60%

Zeitraum
2022 - 2023
Industrie
EdTech
Wert
60.000€+
Aufgaben
  • Strategie
  • User Research
  • User Experience
  • User Interface
Tools
  • Figma
  • Miro
  • Playbook UX
  • Notion

Einleitung

Vom Beginn des Projekts an war klar, dass die Benutzeroberflächen, die von einem Künstler entworfen wurden, an professioneller Finesse sowie der Einhaltung von Designkonventionen und Richtlinien mangelten. Die Designs hätten benutzerfreundlicher und leichter skalierbar sein können, da jede kleinste Veränderung an einer Komponente sofort das gesamte Erscheinungsbild störte. Mein Ziel war es, ein einfaches, kohärentes sowie modernes Design zu entwerfen, das ein hochwertiges Nutzererlebnis bietet. Die Software wurde entwickelt, um Teamleiter und Mitarbeiter dazu zu motivieren, Teams zu bilden, kollaborative Lernsprints zu erstellen, wichtige Sprints zusammenzufassen und sich durch KI-Inhaltsvorschläge kontinuierlich zu verbessern. Diese Hauptfunktionen sollten durch verbesserten Workflow möglichst einfach gestaltet werden.

Während des gesamten Projekts habe ich hauptsächlich Figma, Miro, Playbook UX und Notion als Werkzeuge verwendet, um mit dem Team zusammenzuarbeiten und eine benutzerfreundliche Oberfläche zu gestalten. In dieser Case Study beschreibe ich meinen Weg dazu, die Herausforderungen eines EdTech-Startups zu verstehen, eine Designstrategie zu entwickeln und umzusetzen, um ein erfolgreiches, nutzerzentriertes Lernerlebnis zu schaffen.

Das Problem definieren

Die erste Herausforderung bestand darin, die kritischen Hürden bei der Benutzeroberfläche und dem allgemeinen Benutzererlebnis zu verstehen. Als ich zum Team stieß, stellte ich fest, dass die bestehenden Benutzeroberflächen ein unprofessionelles, veraltetes Design hatten. Sie entsprachen weder den Industriestandards noch modernen Designpraktiken, was zu einem unübersichtlichen Benutzererlebnis führte. Das System war schwer zu navigieren, vor allem in der Einführungsphase, die von Anfang an viel Interaktion und zahlreiche Erklärungen an den Nutzer erforderte.

Die mangelnde Skalierbarkeit war ein weiteres Problem, das gelöst werden musste. Das Design der Plattform brach bei der kleinsten Änderung schnell zusammen, was zu einem schlechten Nutzererlebnis führte. Dies war besonders problematisch, da Skalierbarkeit und Anpassungsfähigkeit für die Skillup-Plattform von entscheidender Bedeutung waren, da die Inhalte je nach Lernzielen, Nutzerpräferenzen, beruflichen Entwicklungsmöglichkeiten und Teamzielen angepasst werden sollten. Zudem profitiert ein agiles Startup in der Konzept-Phase von möglichst flexiblen Interface-Lösungen, um Anpassungen zu vermeiden und Ressourcen zu sparen, insbesondere später in der Entwicklung.

Auszug aus umfangreicher Analyse
Vergrößern

Auszug aus umfangreicher Analyse

Auszug aus umfangreicher Analyse
  1. Fehlende klare Hierarchie unter den Schnittstellenkomponenten

  2. Überladenes Interface durch unnötige optionale Elemente

  3. Unsicherheit bezüglich größenorientierter Betonung von Elementen

  4. Fehlendes Farbschema, insbesondere für interaktive Komponenten

  5. Bedeutender ungenutzter Raum, der das Gesamtlayout verschiebt

  6. Interaktionskonzept, das von herkömmlichen Konventionen abweicht

  7. Optionale Navigation nimmt übermäßigen Raum 'above the fold' ein

  8. Die Titelformatierung ist nicht skalierbar, längere Titel stören die Komponente

  9. Mehrdeutige Ikonografie mit verschiedenen Stilen und Verwendungen

  10. Fehlende klare typografische Richtlinien, unleserliche Schriftart

  11. Mangelnde Berücksichtigung von Extremfällen, z.B. bei mehr als zwei Tags

Um diese Probleme besser zu verstehen, habe ich mit unserem Produktteam zusammengearbeitet, um mit verschiedenen Methoden relevante Daten zu sammeln. Dazu gehörten Interviews mit Nutzern und Interessenvertretern. Durch diese Umfragen sollte es uns gelingen, das Nutzerverhalten besser zu verstehen und sich in ihre Erfahrungen einzufühlen.

Nutzerforschung

Ein wesentlicher Bestandteil des Entwicklungsprozesses der L&D-Software war eine eingehende Untersuchung der Nutzererfahrung durch verschiedene Forschungs- und Testaktivitäten. Das Hauptziel dieses intensiven Prozesses war es, potenzielle Schwachstellen zu identifizieren, zu verstehen, wie die Nutzer mit dem Produkt interagieren, und Möglichkeiten zur Verbesserung des Nutzererlebnisses zu entdecken.

In enger Zusammenarbeit mit Brilliant Experience begann das Team mit einer eingehenden qualitativen Untersuchung. Das Ergebnis war eine Reihe gut definierter Personas, die die wichtigsten Nutzerkategorien - einzelne Mitarbeiter, Teamleiter und leitende Angestellte, die für die Festlegung und Bewertung von Lern- und Entwicklungsstrategien im gesamten Unternehmen verantwortlich sind - klar umrissen. Mit ihren Einblicken in ihre Motivationen, Herausforderungen und Produkterwartungen erwiesen sich diese Personas als unverzichtbar für die Steuerung von Entwicklungsinitiativen.

Nutzertests waren ein wichtiger Teil unserer Forschungsstrategie. Sie umfassten mehrere Schritte - Ideenfindung, Hinterfragen von Hypothesen, Entwicklung von Low-Fidelity-Prototypen und Durchführung von unmoderierten Nutzertests mit PlaybookUX. In regelmäßigen Sitzungen wurde die Leistung des Prototyps bewertet, und jedes Feedback aus den Nutzertests wurde sorgfältig auf unsere Hypothesen analysiert und lieferte unschätzbare Erkenntnisse für die iterative Verbesserung des Produkts.

Research Prototypen für Nutzerumfragen
Vergrößern

Research Prototypen für Nutzerumfragen

Research Prototypen für Nutzerumfragen

Während unserer Recherche testeten wir die innovativen Lern- und Entwicklungskonzepte der "Lernsprints" und "Snipboards". Einzigartige Funktionen wie die Erstellung von thematischen "Leinwänden" zur Organisation von Wissen und der Austausch von Erkenntnissen mit Kollegen wurden als wertvolle Ergänzungen des Produkts erkannt.

portfolio/skillup/snipboard-old.jpg Before
portfolio/skillup/snipboard-old.jpg After

vorher

nachher

Snipboards sind unendlich skalierbar und orientieren sich an dem Interaktionsmodell von Pinterest.

Die wichtigsten Ergebnisse unserer Untersuchung zeigten, dass die Nutzer einen einfachen Zugang zu Lerninhalten und die Möglichkeit, den Wert der Inhalte schnell zu beurteilen, bevorzugen. Wir haben auch erfahren, dass die Nutzer eine personalisierte Lernerfahrung schätzen, aber noch nicht wissen, wie effektiv es ist, individuelle Interessen und Herausforderungen auf ein gemeinsames Ziel im Team auszurichten.

Einblicke in die Erwartungen der Führungskräfte zeigten eine klare Präferenz für die Ausrichtung von L&D-Zielen an OKRs, die Notwendigkeit, die Fähigkeiten ihrer Teams zu verstehen, und die Bedeutung einer Funktion, mit der die Lernfortschritte und -anstrengungen jedes Teammitglieds verfolgt werden können.

Indem die Erkenntnisse aus den Nutzertests in den Produktentwicklungsprozess integriert werden, kann das L&D-Softwareprojekt seine Nutzererfahrung deutlich verbessern - eine entscheidende Dimension, die den Produkterfolg bestimmt, die Kundenzufriedenheit erhöht und den Umsatz ankurbelt.

Eine Lösung entwerfen

Nach einem Exkurs in einen Branding Workshop..

v2021
Vergrößern

v2021

v2021
v2021-2
Vergrößern

v2021 2

v2021-2
v2022 Branding Draft
Vergrößern

v2022 Branding Draft

v2022 Branding Draft

.. und umfangreichen Recherchen und User Journey Definitionen..

Vergrößern
Vergrößern
Vergrößern

..begann ich mit den Erkenntnissen mögliche Lösungen zu skizzieren und erste Wireframes zu erstellen.

portfolio/skillup/explore-old.jpg Before
portfolio/skillup/explore-old.jpg After

vorher

nachher

Die neu gestaltete Benutzeroberfläche bietet jetzt eine klare Hierarchie und ein platzsparenderes Layout, das die Navigation und Übersichtlichkeit verbessert. Darüber hinaus verfügt sie über eine einheitliche Ikonografie, ein skalierbares Titelformat und ein effektives Schriftbild sowie ein kohärentes Farbschema für interaktive Komponenten, was die Interaktion mit dem Nutzer und die Lesbarkeit insgesamt verbessert.

Eine wichtige Maßnahme vorab war die Erstellung eines Designsystems mit grundlegenden Richtlinien, inhaltsspezifischen Komponenten, Theming-Richtlinien und Mustern. Dieser Rahmen stellte sicher, dass künftige Änderungen oder Erweiterungen der Plattform mit dem Gesamtdesign übereinstimmen und so künftige Designinkonsistenzen und Skalierbarkeitsprobleme vermieden werden.

asd
asd
sadds
sadds

Ich habe die Benutzerführung sorgfältig analysiert, um sicherzustellen, dass die neuen Designs intuitiv und einfach sind. Ich habe den Prozess gestrafft, um unnötige Schritte oder Interaktionen zu reduzieren. Die Benutzeroberfläche wurde so vereinfacht, dass die Nutzer relativ einfach durch die Plattform geführt werden, von der Onboarding-Phase über die Teambildung bis hin zur Erstellung von kollaborativen Lernsprints.

portfolio/skillup/onboarding-welcome-old.jpg Before
portfolio/skillup/onboarding-welcome-old.jpg After

vorher

nachher

Willkommen
portfolio/skillup/onboarding-goal-old.jpg Before
portfolio/skillup/onboarding-goal-old.jpg After

vorher

nachher

Zielsetzung
portfolio/skillup/onboarding-finished-old.jpg Before
portfolio/skillup/onboarding-finished-old.jpg After

vorher

nachher

Abschluss

Die Verbesserung des Designs der Plattform hat in Tests das Engagement der Nutzer und die Gesamtzufriedenheit deutlich erhöht.

Iteration und Umsetzung

Der Entwurfsprozess konzentrierte sich stark auf Iteration und Verfeinerung. Jeder Prototyp wurde innerhalb des Produktteams und von einer Gruppe von Nutzern und Interessenvertretern, die kritisches Feedback gaben, gründlich getestet. Jede Feedbackrunde führte zu weiteren Iterationen, bis eine Lösung gefunden war, die den Bedürfnissen aller Beteiligten entsprach.

Während des iterativen Prozesses entwickelte sich das Design von Low-Fidelity- zu High-Fidelity-Wireframes, die neben visuellen und interaktiven Elementen auch detailliertere Anmerkungen enthielten. In dieser Phase fand auch die meiste Zusammenarbeit im Projekt statt. Durch die ständige Kommunikation zwischen dem Design-, dem Entwicklungs- und dem Produktteam wurde sichergestellt, dass die Designentscheidungen auf dem basieren, was sowohl aus der Design- als auch aus der Entwicklungsperspektive machbar war.

portfolio/skillup/sprint-overview-old.jpg Before
portfolio/skillup/sprint-overview-old.jpg After

vorher

nachher

Die neue Übersicht der Lernsprints bietet mehr Informationen, klarere Strukturen und eine verbesserte Übersichtlichkeit.

Gleichzeitig wurde sorgfältig darauf geachtet, das Design auf die spezifischen Bedürfnisse der in der Forschungsphase identifizierten User Personas zuzuschneiden. Das Design wurde auf die individuellen Lernziele, die inhaltlichen Präferenzen und die allgemeine Nutzererfahrung zugeschnitten.

portfolio/skillup/sprint-create-old.jpg Before
portfolio/skillup/sprint-create-old.jpg After

vorher

nachher

Die Neugestaltung des Screens zum Erstellen eines Sprints hat die Zufriedenheit bei Nutzerumfragen massiv erhöht. Die Benutzung war deutlich intuitiver.

Wir integrierten die Entwürfe in Sprints und Meilensteine für eine einfache und reibungslose Umsetzung. Alle Designelemente wurden den Entwicklern in einem leicht verständlichen Format übergeben, um sicherzustellen, dass die Ausführung mit dem geplanten Design übereinstimmt und der Umsetzungsprozess effizient und reibungslos verläuft.

Bei der Erstellung dieser Entwürfe war es mir wichtig, eine logische und konsistente Navigation auf der gesamten Plattform zu schaffen, wichtiges visuelles Feedback zu den Nutzerinteraktionen zu geben und sicherzustellen, dass der Zweck jeder Seite klar ist. Um diese Ziele zu erreichen, wurden Farbe, Typografie und Bildmaterial mit Bedacht eingesetzt, um ein ästhetisches Gleichgewicht und eine visuelle Hierarchie zu erreichen und die Applikation benutzerfreundlich und ansprechend zu gestalten.

portfolio/skillup/reader-old.jpg Before
portfolio/skillup/reader-old.jpg After

vorher

nachher

Aus einem kopierten Design von Medium wurde ein Content Reader mit umfangreichen sozialen und lernmethodischen Konzepten.

Ergebnisse und Überlegungen

Das Redesign hatte einen durchschlagenden Effekt. Das Feedback der Nutzer war positiv und deutete auf eine deutliche Verbesserung der Benutzerfreundlichkeit der Plattform hin. Die Nutzer schätzten vorwiegend den strafferen Einführungsprozess, die höhere Flexibilität des Systems, die verbesserte Benutzeroberfläche und das insgesamt schicke neue Design.

Unter dem Gesichtspunkt der Benutzerfreundlichkeit wurde das neue Oberflächendesign deutlich verbessert, wodurch die kognitive Belastung der Nutzer verringert und das System intuitiver navigiert werden kann. Außerdem stellt das neue Designsystem sicher, dass künftige Aktualisierungen und Änderungen die Konsistenz und Einheitlichkeit der gesamten Produktpalette gewährleisten.

portfolio/skillup/sprint-detail-old.jpg Before
portfolio/skillup/sprint-detail-old.jpg After

vorher

nachher

Die neue Detailansicht eines Sprints ist modern, clean und präsentiert die wichtigsten Informationen des Sprints.

Dieses Projekt hat mich gelehrt, dass ein optisch ansprechendes Design weiterhin wichtig ist, Funktionalität und Benutzerfreundlichkeit aber an erster Stelle stehen. Es bestätigte den Wert der Nutzerforschung und die Notwendigkeit eines Designsystems, bei dem Komponenten wiederverwendet werden können, um das System skalierbar zu machen. Es hat auch gezeigt, dass UX Design ein fortlaufender Prozess ist und dass es immer Raum für Verbesserungen gibt.

Rückblickend betrachtet war es wirklich lohnend, sich mehrdeutigen Herausforderungen zu stellen, fundierte Entscheidungen zu treffen, ständig zu iterieren, Feedback anzunehmen und bei jedem Schritt etwas Neues zu lernen. Dieses Projekt war eine erfolgreiche Übung in der Umsetzung des nutzerzentrierten Designprozesses, von der Identifizierung der Problembereiche bis hin zur Entwicklung einer verbesserten Designlösung, die die Nutzerzufriedenheit deutlich erhöhte.

Das kontinuierliche, gemeinsame Bemühen, das Produkt auf der Grundlage des Nutzerfeedbacks zu verfeinern, mit dem letztendlichen Ziel, die Bedürfnisse des Nutzers bestmöglich zu erfüllen, bestätigte, dass dies in der Tat der Dreh- und Angelpunkt eines jeden erfolgreichen Designprojekts ist.