How to onboard

Das Onboarding nimmt bei uns im Unternehmen eine große Rolle ein. Neue Kolleginnen und Kollegen sollen das Unternehmen, die Mitarbeitenden und die Kultur des Unternehmens kennenlernen. Doch wie können wir das Ankommen möglichst ansprechend gestalten, ohne dabei einfach nur eine Checkliste abarbeiten zu lassen? 

Das Onboarding soll in diversen Situationen möglich sein, wie z.B. im Homeoffice, beim Schwätzchen in der Kaffeepause oder beim Kennenlernen der neuen Kollegenschaft in deren Büros.
Um das zu bewerkstelligen, können neue Kollegen und Kolleginnen den Onboarding-Prozess mithilfe einer digitalen Schnitzeljagd auf dem Handy oder im Webbrowser durchlaufen.

Neben der Verfügbarkeit sind auch die Art und Weise des Onboardings wichtig. Durch den spielerischen Ansatz in Form eines Quiz soll der Spaß beim Kennenlernen des Unternehmens nicht zu kurz kommen.

 

Workflow 

Beim Start der App werden wir von unserem Maskottchen Meitopake begrüßt und durch erste Tutorial-Dialoge begleitet. Nach dem ausführlichen Erklären der Status- und Navigationsbar geht es weiter zur Auswahl des passenden Avatars, bei dem wir aus drei möglichen Quiz-Spezialfähigkeiten wählen können. Jetzt noch einen passenden Namen aussuchen und die Schnitzeljagd kann beginnen. 

Auf mehreren Übersichtsseiten können wir aus den unterschiedlichen Quizfragen frei wählen und versuchen diese zu beantworten. Viele Fragen können wir dabei nur mithilfe lösen. Das ist beabsichtigt, damit wir uns Unterstützung von der neuen Kollegenschaft holen müssen und diese dadurch kennen lernen. Die Art der Quizfragen reicht dabei von Textinput, über MultipleChoice-, bis hin zu Sortieraufgaben. 
Für richtig gelöste Fragen erhalten wir Punkte. Für falsche Antworten gibt es Minuspunkte. Haben wir alle Fragen richtig beantwortet, erhalten wir eine Bestätigung mit dem erzielten Punktestand. 

 

 

Konfiguration

Die Schnitzeljagd wurde mit dem Open-Source Framework Flutter entwickelt, das es uns ermöglicht CrossPlatform Apps mit derselben Codebasis zu entwickeln. Neben iOS und Android können wir damit auch Desktop und Web-Apps erstellen. Für uns heißt das, wir müssen nur eine Codebasis pflegen und können die App trotzdem sowohl im internen App Store als auch als interne Website für unsere Mitarbeitenden bereitstellen.

Die einzelnen Fragen der Schnitzeljagd werden aus einer JSON Datei (Listing 2) ausgelesen und generiert. Das hat den Vorteil, dass wir die Fragen anpassen können, ohne dass wir dabei den Quellcode ändern müssen. Konfigurieren können wir so z.B.: Art der Frage, Position (Koordinaten), Fragetext (Englisch/Deutsch) sowie die richtigen und falschen Antwortmöglichkeiten.    

 


...
{                
    "name": "Childhood",
    "type": "drag",
    "mandatory": true,
    "position": {
        "x": 2,
        "y": 5
    },
    "question": {
    "text": "Who am I?",
    "text_de": "Wer bin ich?",
    "items": {
            "Bernd": "assets/images/bernd.jpg",
            "Martin": "assets/images/martin.png",
            "Erich": "assets/images/erich.jpg"
        }
    }
}
...

Listing 1: questions.json

 

Für die Positionierung der Fragen auf dem Screen haben wir diesen in ein Koordinatensystem eingeteilt. Aus den in der Konfigurationsdatei angegebenen X- und Y-Koordinaten können wir dann für jede Frage einen Button generiert, der zur jeweiligen Frage navigiert. 

 

User Interface 

Die UI wird in Flutter aus Widgets erbaut. Widgets sind visuelle Komponenten, die in einer Baumstruktur organisiert sind, dem sogenannten widget tree. Ein Widget beschreibt, im Zusammenspiel mit seiner Konfiguration und – wenn nötig – seinem State, das Aussehen einer Layout-Komponente. Ändert sich der State, ändert sich auch die Darstellung des Widgets. Das Framework vergleicht dabei den alten widget tree mit dem neuen und ermittelt die minimalen Änderungen, die benötigt werden, um die UI zu aktualisieren. 

 


class AppBarPlayerNameWidget extends StatelessWidget {
  const AppBarPlayerNameWidget();

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppState>(
        converter: (store) => store.state,
        builder: (context, state) {
          return Container(
            constraints: BoxConstraints(maxWidth: 50),
            child: Text(
              state.userState.name,
              style: TextStyle(fontSize: 12),
              overflow: TextOverflow.fade,
            ),
          );
        });
  }
}

Listing 2: AppBarPlayerNameWidget.dart

 

Listing 2 zeigt den Aufbau eines einfachen AppBarPointsWidget, das von StatelessWidget erbt. Das Widget besitzt keinen internen State. Das heißt, die beschriebene Benutzerschnittstelle basiert nur auf den konfigurierten Informationen des Widgets und seinem BuildContext (Referenz zur Position eines Widgets in der Baumstruktur). Diese Informationen werden bei der Erzeugung des Widgets von seinen direkten Elternelementen bereitgestellt.
Wollen wir ein Widget mit internem State erstellen, muss von StatefulWidget abgeleitet werden. Dieser State kann sich während der Lebenszeit des Widgets ändern; dadurch ändert sich auch die Darstellung der UI.
Die wesentliche Logik des Beispiels befindet sich in der build-Methode, die in Zeile 5 die Beschreibung unserer View zurückgibt. In diesem Fall zeigen wir einen Text mit Schriftgröße 12 an.

 

State Handling 

Mithilfe des StoreConnector, der unser Text-Widget umhüllt, können wir auf den AppState zugreifen und die aktuelle Punktezahl als Text anzeigen. Der StoreConnector ist Teil des flutter_redux package, das wir verwenden, um den AppState in einem globalen Store zu verwalten.
Wird in einem anderen Widget die Aktualisierung des Punktestandes ausgelöst, bekommt das AppBarPointsWidget diese Änderung über den StoreConnector mit und aktualisiert daraufhin die View.
Redux ist allerdings nur eine Möglichkeit, um den AppState in einer Flutter-App zu verwalten. Alternative Herangehensweisen für das State Management könnt ihr in der Flutter-Dokumentation nachlesen.

 

Fazit

Wir haben mit Flutter eine Cross-Platform App entwickelt, die es Meitopake ermöglicht neue Mitarbeiter/-innen bei unserem Onboarding Prozess zu begleiten. Der/Die User/-in lernt dabei spielerisch durch Quizfragen das Unternehmen und seine/ihre neuen Kollegen/-innen kennen, zu denen hoffentlich auch in Zukunft noch weitere hinzukommen werden.   

Michael Sandner
Letzte Artikel von Michael Sandner (Alle anzeigen)