Hier seht ihr meinen Entwurf eines kompakten Learn-Management-Systems (LMS), das ich für die Waterkant Academy aus Hamburg konzipiert habe. Die Waterkant Academy bietet deutschlandweit Fortbildungen und innovative Onlinekurse für Kita-Personal an und vertritt dabei einen super Ansatz: die Werkstattpädagogik.

Mein Ziel bei dem Projekt war es, ein möglichst schlankes, nicht mit Funktionen überladenes LMS zu entwickeln, das trotzdem auf kein relevantes Feature (wie z.B. API oder Nutzerrollen-Verwaltung) verzichten muss und sich in Richtung SaaS weiterentwickeln lässt. Weiterhin wollte ich auf ein klassisches Backend verzichten und den gesamten Admin-Bereich im Frontend integrieren.

‍

Was ich gemacht habe

• Strategische Erkundung‍
• Anforderungsanalyse (PRD)‍
• Wireframes
• Mockups + A/B Testings
• Branding + Komponentenbasiertes UI-Kit‍
• Interaktiver Prototyp mit Sketch und InVision

‍

So clean muss es sein

Bedienelemente immer nur dort anzeigen, wo sie auch benötigt werden.

‍

Branding

Logo für unterschiedliche Anwendungsbereiche und Farbschema.

‍

Styleguide mit komponentenbasiertem UI-Kit

Logo / Colour palette / Typography / UI-Elements / Buttons / Fields / Grid / Images

Styleguide in InVision

‍

UI-Aktionen visualisieren

UI-Elemente mit InVision zum Leben erwecken.

Umsetzung: Interaktiver Prototyp mit Sketch und InVision

‍

Backend-Funktionen im Frontend

Je nach Rolle tauchen andere Bedienelemente auf. Hier: in der Rolle "Trainer" kann ein Kurs editiert werden.

‍

Nutzerprofil-Ansicht: gebuchte Kurse

Dynamische Gestaltung von Buttons und Text entsprechend des persönlichen Bearbeitungsstatus eines Nutzers.

‍

React oder Vue? Nein, Thinkific.

Zunächst schien die Umsetzung mit einem JavaScript-Framework wie React oder Vue zielführend zu sein. Entsprechend habe ich auch die Mockups und den Prototypen gestaltet. Letztendlich wurde das Konzept aber nie umgesetzt. Statt eine kostenintensive Eigenentwicklung voranzutreiben setzt die Waterkant Academy heute auf das LMS von Thinkific, das inzwischen viele der geplanten Features (und mehr) beinhaltet.

Wie ich die Benutzeroberfläche für die "Digitale Lernwerkstatt" der Waterkant Academy in Thinkific umgesetzt habe, seht ihr hier.