PWA
Apps

Laisa Polysport

Für die LaIsa Polysport entwickelten wir eine PWA mit Unterrichtsunterlagen, Videos und vielem mehr für Leiterinnen und Leiter von Sportaktivitäten, Vereine, Schulen und das Bewegungs- und Sportprogramm des Amts für Volksschule und Sport des Kantons Graubünden.

Der Auftrag

LaIsa Polysport hat 12 Jahre Erfahrungen in einem neuen Lehrmittel zusammengetragen. Darin befindet sich eine Erfolgsformel, verschiedene Trainingsinhalte, Sportlektionen und Informationen zu den Polysport-Games und zur Beratung respektive zum Coaching für Leitende, Vereine, Schulen & Kantone.

Der Auftrag für uns sah so aus, dass all diese Informationen des Lehrmittels in einer modernen progressiven Webapplikation (kurz PWA) zusammengetragen werden. Zudem sollte es möglich sein, die App in eine Premium- und eine Gratisversion zu unterteilen. Zusätzlich sollte die Webapplikation so aufgebaut werden, dass weitere potenzielle Kunden die Möglichkeit haben, ihre eigene Applikation zu kaufen.

Die PWA

Aufbau & Umsetzung der App

Die App wurde so programmiert, dass aus einer Code-Basis zwei verschiedene Produkte hervorgehen. Einerseits ist es die Basis für die LaIsa Polysport App, anderseits ist es die Basis für die App für den dazugehörigen Editionspartners 0712 (Sportprogramm des Kantons Graubünden).


Durch diesen Aufbau ist es uns möglich, alleinstehende Apps für zukünftige Editionspartner zu kreieren.

User Experience

Die PWA wurde ähnlich wie eine native App, also eine App, die man im App Store oder im Google Play Store herunterladen kann, aufgebaut. Dies, um eine bestmögliche User-Experience bieten zu können.

Zudem erkennt die Web App auf welchem Gerät sie gerade aufgerufen wird und ob eine intakte Internetverbindung besteht. Dementsprechend werden unterschiedliche Systemmitteilungen angezeigt. Dies ist nicht nur für die Funktionalitäten der App wertvoll, sondern stütz wiederum die User-Experience.

Offline-Nutzung

Wie in den obigen Bildern ersichtlich ist, kann die App auf dem Smartphone installiert werden. Dadurch wird nicht nur eine Verknüpfung zu der PWA hergestellt, sondern auch der statische Inhalt der App wird heruntergeladen. Inhalte, die aus einer Datenbank stammen, werden hingegen dynamisch geladen. Wenn eine Seite aufgerufen wird, wird der Inhalt dieser Seite auf dem Gerät gespeichert. So ist der Inhalt auch offline verfügbar. Die App testet bei jedem Aufruf, ob es Neuerungen in der Datenbank gibt, falls ja, werden diese heruntergeladen und innerhalb der App aktualisiert.

Premiuminhalte

Eine Anforderung an die App war es, dass gewiss Inhalte nur in einer bezahlten Premiumversion verfügbar sind und andere auch in einer Gratisversion.

Wir haben dies so gelöst, dass die App für jeden Nutzer und jede Nutzerin frei verfügbar ist. Wenn der Inhalt, den er oder sie anschauen möchte, zum Premiuminhalt der App gehört, erscheint eine Meldung.

Durch die Anmeldung in der App und das Eingeben des Produktschlüssels werden die erworbenen Lektionen freigeschaltet.

Das Spezielle am Produktschlüssel ist, dass dieser nur einmal eingesetzt werden kann und für jeden Nutzer und jede Nutzerin einmalig ist. So können wir vermeiden, dass die Produktschlüssel an weitere Personen weitergegeben werden.

Der Online-Shop

Automatisierungen

Beim Online-Shop haben wir viele verschiedene Arbeitsschritte automatisiert, um die Arbeit damit zu erleichtern. Im Shop gibt es neben den virtuellen Produkten (Produktschlüssel für die App) auch physische Produkte, die gekauft werden können. So werden zum Beispiel Bestellbestätigungsmails automatisch an das jeweilig bestellte Produkt angepasst.

Zusätzlich werden bei den Mails direkt die Produktschlüssel für die App generiert, so müssen keine Produktschlüssel manuell erstellt werden. Hinzu kommt, dass die Produktschlüssel direkt an den jeweiligen Nutzer respektive an die jeweilige Nutzerin gesendet werden. So wird dieser komplette Arbeitsschritt automatisch durchgeführt und abgeschlossen.

Desktop Mockup Layout

Zusammenfassung

Damit die PWA so funktioniert, wie sie heute funktioniert, mussten drei verschiedene Systeme aufgebaut werden:

  • die PWA selbst

  • die Datenbasis mit den Inhalten und Produktschlüssel

  • der Online-Shop


An dieser Stelle möchten wir uns bei LaIsa Polysport für unseren Einsatz und das Vertrauen bedanken und hoffen auf viele weitere Kundinnen und Kunden der LIP-App!

Die PWA und der Online-Shop sind seit August 2021 online.

Direkt zu: LIP App
Direkt zu: LIP Online-Shop

Weitere gut gelaunte Projekte