Case Study: Eine Web-App zur Planungserleichterung

Die Quesap Webapp ermöglicht Pflegeeinrichtungen, den praktischen Ausbildungsteil ihrer Auszubildenden übersichtlich darzustellen, zu planen und zu dokumentieren. Wir durften den Entwicklunsprozess der Quesap-Webapp vom ersten Workshop bis zum Go-Live begleiten. Das Peerigonteam hat dabei das UX- und UI Design erstellt und die gesamte Front- und Backendentwicklung übernommen. Die App wurde als Web App realisiert, da die Software Plattform von überall her und geräteunabhängig erreichbar sein sollte. Einzige Voraussetzung zur Nutzung der Web-App: Ein mobiles Device wie Tablet oder Desktop-PC, Internetzugang und ein aktueller Webbrowser wie Chrome, Firefox oder Edge.

• Vue.js Web App auf Basis von Express
• TypeScript
• Backend: Node.js, TypeORM, GraphQL, PostgreSQL, Docker
• Authentifizierung: FusionAuth
• E2E-Testing mit Playwright

Zunächst wurde in einem initialen Kickoff-Workshop das Verständnis herausgearbeitet, für welche Kernproblematik die Quesap Web App Abhilfe schaffen soll. Diese Essenz der Idee, die als Grundlage des späteren Minimum Viable Products dienen sollte, destillierten wir zu Beginn gemeinsam mit den Quesap-Stakeholdern heraus. Auch wurde ein allererster, vom Auftraggeber selbstgebastelter Prototyp analysiert, um zu gewährleisten, dass die Vorstellungen, Ideen, Prioritäten der Stakeholder zugleich Basis und Maßstab fürs gesamte Projekt blieben.

Die Zielgruppe der Azubis sollte den integrierten Kalender auch auf Mobile nutzen können.

Zunächst galt es, die Hauptkomponenten der App in User Stories festzulegen. Nach der Fixierung der Wireframes erfolgte die schrittweise UI-Umsetzung mit Figma. Dabei wurden Corporate-Designvorgaben des Unternehmens Quesap berücksichtigt und diese schrittweise um stimmige typografische und grafische Komponenten erweitert. Da es sich um eine Anwendung handelt, die die Organisation erleichtern soll, lag der Fokus hier auf optimierter, intuitiver Nutzerführung für Desktop, da die Target Group der Praxisanleiter vorwiegend am PC arbeitet. Das Ziel dabei; Klarheit und Übersichtlichkeit bei der Darstellung vieler Informationsebenen. Speziell die Zielgruppe der Azubis sollte die Teilfeatures des Kalenders auch auf Mobile nutzen können. Diese Designs wurden als Clickdummy umgesetzt, der sofort auf Messen und Kundenterminen zur Promotion erster Testuser eingesetzt werden konnte.

Ein initialer Workshop diente der Rollenklärung innerhalb des Agilen Teams zur Produktivitätssteigerung während der Kick-Off-Phase: Klärung der Deliverables bis zum Go-Live, Erwägen von Shortcuts (z.B. im Hinblick auf das wichtige Feature Payment und Abonnement), Priorisierung der Features für's MVP, Erstellung einer Roadmap zur Klärung erster Milestones und Abfederung zeitlicher Engpässe.

Los ging's mit dem Peerigon Starter Kit, das ein technisch umfangreiches Production-Setup per eigenem Github Repository mit Content Tracking, Versionierung per Continuous Integration umfasste. Von Anfang an hatten unsere Quesap-Projektpartner also einen eigenen Testzugang und jederzeit Einblick in den aktuellsten Stand ihrer App.

Der Quesap-Einsatzplaner erlaubt das effiziente Zeitmanagement der Praxisanleitung mit allen gesetzlich vorgeschriebenen Planeinsätzen.

Das erfolgreiche Go Live des Minimum Viable Products der Quesap Web App konnte ein halbes Jahr nach Beginn der Entwicklungsarbeit gefeiert werden. Essentieller Bestandteil davon war der Einsatzplaner, der es erlaubt, mit einigen Klicks individuelle Einsatzpläne pro Auszubildende:r zu erstellen – komplett mit Schulzeiten, Praxisabschnitten und Urlaubszeiten. Der Clue dabei: die Planung erlaubt zugleich engmaschige Dokumentation über die Einhaltung der gesetzlichen Vorgaben. Denn der Ausbildungsbaukasten macht es leicht, Methoden und Lernziele für Ausbildungen im Pflegebereich ganz systematisch mit zu berücksichtigen.

Darüber hinaus setzten wir ein Dashboard mit Verwaltung von Auszubildenden und Praxisanleitungen um.

Übersicht zur Verwaltung aller Auszubildenen und ihrer Praxisanleitungen

Die Wochenübersicht ist als "Stundenplan" mit das Herz der Ausbildung. Denn sie können sowohl Praxisanleitungen sowie Auszubildende mit unterschiedlichen Anzeigeeinstellungen einsehen – Termine, Lernziele, Abwesenheiten werden wahlweise in Tages-, Wochen- und Monatsübersicht dargestellt.

Kalendarische Wochenübersicht zur Terminierung von Aufgaben- und Arbeitsaufträgen inkl. Lernziele – alles auf einen Blick

Gerade im Gesundheitssektor sollte die Erfüllung höchster technischer Standards im Bezug auf Datensicherheit eine Selbstverständlichkeit sein. Das wird garantiert durch SSL-Zertifikate, Managed Hosting mit redundantem Server mit Loadbalancing und täglichen Backups in einem deutschen Rechenzentrum (sichergestellt durch unseren Partner Makandra).

Voraussetzung für den Marktrelease war das erweiterte Paymentfeature, das ein Abschließen von Monatsabonnements ermöglichte. Die Architektur der Quesap App erlaubte das Ergänzen um vielerlei Features. Auch eine zweite Appversion, die Quesap School App, konnte auf Basis des Web App Stacks in den letzten Jahren iterativ etabliert und systematisch integriert werden.

Hier können sich für den Ausbildungsplaner anmelden:

[Zur Quesap-Webapp]