Skillup

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.

Ich habe die User Experience und das Interface Design grundlegend überarbeitet, um Skillup in eine benutzerfreundliche und skalierbare Business AI Lernplattform zu verwandeln.

+60%

Feature Verständnis bei Usern

-120%

Entwicklungskosten

-150%

Onboarding Zeit

Zeitraum
2022 - 2023
Industrie
EdTech
Wert
60.000€+
Aufgaben
  • Strategie
  • User Research
  • User Experience
  • User Interface
Tools
  • Figma
  • Miro
  • Playbook UX
  • Notion
300 Artikel Expertise in Person
Die Prinzipien der Softwareentwicklung für Millionen Nutzer? Ich hole sie in dein Produkt. Ohne die lästige Komplexität.
justinschmitz opacity.png

Einleitung

Schon von Anfang an war klar, dass die von einer Künstlerin gestalteten Interfaces nicht gerade durch die Decke gingen. Es fehlte an professionellem Feinschliff und an Designkonventionen. Jede kleine Änderung brachte das gesamte Aussehen durcheinander.

Der Plan: ein smartes und elegantes Design entwickeln, das eine gute Nutzererfahrung liefert. Die Software soll Teamleiter und Mitarbeiter dazu ermutigen, Teams zu formen, Lern-Sprints zu starten, wichtige Sprints zusammenzufassen und sich mit KI-Inhalten weiterzuentwickeln. Das Ziel ist, den Workflow zu vereinfachen.

Ich habe auf Tools wie Figma, Miro, Playbook UX und Notion gesetzt, um das Ganze im Team abzustimmen. In dieser Case-Study zeige ich euch, wie ich die Herausforderungen eines EdTech-Startups angegangen bin, um eine benutzerzentrierte Lernerfahrung zu liefern.

300 Artikel Expertise in Person
Die Prinzipien der Softwareentwicklung für Millionen Nutzer? Ich hole sie in dein Produkt. Ohne die lästige Komplexität.
justinschmitz opacity.png

Das Problem definieren

Der erste Schritt war, die größten UX-Probleme zu verstehen. Als ich ins Team kam, waren die User Interfaces outdated und kompliziert. 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. Das machte die Nutzung frustrierend und chaotisch.

Ein weiteres großes Problem war die schlechte Skalierbarkeit. Selbst kleine Anpassungen konnten alles durcheinander bringen. Das war echt hinderlich, weil die Plattform flexibel sein muss, um unterschiedliche Lernziele, Nutzerpräferenzen und Teamziele zu berücksichtigen. Für ein agiles Startup in der Konzept-Phase ist es entscheidend, flexibles Design zu haben, um Anpassungen zu minimieren und Ressourcen zu schonen.

Auszug aus umfangreicher Analyse

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.

300 Artikel Expertise in Person
Die Prinzipien der Softwareentwicklung für Millionen Nutzer? Ich hole sie in dein Produkt. Ohne die lästige Komplexität.
justinschmitz opacity.png

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 der Research-Agentur 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

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.

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

vorher

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

nachher

Unsere Recherche zeigte deutlich, dass Nutzer einfachen Zugang zu Lerninhalten wollen und schnell entscheiden möchten, was wertvoll für sie ist. Interessanterweise erkennen sie den Wert einer personalisierten Erfahrung, es fehlt ihnen allerdings das Verständnis für die Strukturen ihrer Lücken.

Aus dem Feedback der Führungskräfte wurde klar, dass sie L&D-Ziele mit OKRs abstimmen wollen, zudem sollten die Fähigkeiten ihrer Teams für sie offen ersichtlich sein und eine einfache Möglichkeit, die Lernfortschritte ihrer Teammitglieder zu verfolgen, sollte bereitgestellt werden.

Indem wir das Nutzer-Feedback in den Produktentwicklungsprozess integrieren, kann das L&D-Softwareprojekt seine Nutzererfahrung erheblich verbessern. Dies ist essentiell für den Produkterfolg, die Kundenzufriedenheit und die Umsatzsteigerung.

300 Artikel Expertise in Person
Die Prinzipien der Softwareentwicklung für Millionen Nutzer? Ich hole sie in dein Produkt. Ohne die lästige Komplexität.
justinschmitz opacity.png

Eine Lösung entwerfen

Nach einem Exkurs in einen Branding Workshop..

v2021v2021-2v2022 Branding Draft

.. und umfangreichen Recherchen und User Journey Definitionen..

brainstorm branding.jpgbrainstorm dashboard.jpgbrainstorm journey.jpg

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

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

vorher

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.

nachher

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.

ds 1 color palette.jpg
ds 1 color palette.jpg
ds 2 color classification.jpg
ds 2 color classification.jpg
ds 3 color interactions.jpg
ds 3 color interactions.jpg
ds 4 color principles.jpg
ds 4 color principles.jpg
ds 5 spacing.jpg
ds 5 spacing.jpg
ds 6 typography.jpg
ds 6 typography.jpg
ds 7 spacing.jpg
ds 7 spacing.jpg
ds 8 shadows.jpg
ds 8 shadows.jpg

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.

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

vorher

Willkommen

nachher

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

vorher

Zielsetzung

nachher

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

vorher

Abschluss

nachher

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

300 Artikel Expertise in Person
Die Prinzipien der Softwareentwicklung für Millionen Nutzer? Ich hole sie in dein Produkt. Ohne die lästige Komplexität.
justinschmitz opacity.png

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.

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

vorher

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

nachher

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.

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

vorher

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

nachher

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.

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

vorher

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

nachher

300 Artikel Expertise in Person
Die Prinzipien der Softwareentwicklung für Millionen Nutzer? Ich hole sie in dein Produkt. Ohne die lästige Komplexität.
justinschmitz opacity.png

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.

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

vorher

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

nachher

Dieses Projekt hat mir gezeigt, dass 'Form Follows Function' noch wichtiger für Startuos ist. Es hat die Bedeutung von Nutzerforschung und wiederverwendbaren Designelementen unterstrichen, um alles leicht skalierbar zu halten. Es hat auch gezeigt, dass UX ein fortlaufender Prozess ist und immer Raum für Verbesserung bleibt.

Trotz aller Herausforderungen war es sehr lohnend, sich den Schwierigkeiten zu stellen, fundierte Entscheidungen zu treffen und laufend zu iterieren. Was als konzeptionelle Verbesserung begann, entwickelte sich zu einer Lösung, die die Nutzerzufriedenheit erheblich steigerte.