Da wir bereits kleinere Testings an den nicht ausgestalteten digitalen Wireframes durchgeführt hatten, welche bereits sehr positiv verlaufen sind, begannen wir damit, das Feedback des Testings in die Screens einzuarbeiten. Zusätzlich begannen wir zeitgleich damit eine erste Designsprache für das spätere Tool und die einzelnen Funktionen zu entwickeln.

Kalenderansicht

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8e1dc993-6256-4608-98b8-bdbb883d8ae7/Frame_9.png

Die Kalenderansicht stellt die erste Ansicht nach öffnen des Schichtplan dar. Hier ist es besonders wichtig seine Schichten schnell einsehen bzw. überblicken zu können. Durch die vielen Gespräche mit Mitarbeiter*innen verschiedener Supermärkte sollte es hierfür zwei verschiedene Ansichten geben. Zum einen ist eine Monatsansicht für einen schnellen Überblick über die kommenden Wochen relevant. Zum anderen bedarf es aber auch einer Wochenansicht, in der genauere Details zu den einzelnen Schichten eingesehen werden können.

Bei der Monatsansicht orientierten wir uns an den gängigen Interaktionsmustern die bereits aus anderen Kalender-Apps bekannt sind. Für die Wochenansicht entschieden wir uns bereits in den ersten Wireframes dafür, mit einem Overlay zu arbeiten. Hier sollten dann alle wichtigen Information bzw. Details zu den einzelnen Schichten dargestellt werden. Da es für die Mitarbeiter jedoch besonders wichtig ist auch innerhalb der Wochenansicht alle Schichten auf einen Blick einsehen zu können, verwarfen wir das Overlay wieder. Stattdessen haben wir uns dafür entschieden das die Schichtkacheln "aufgeklappt" werden können um alle relevanten Informationen einzusehen. Des weiteren überlegten wir uns verschiedene Möglichkeiten wie wir in der detaillierteren Wochenansicht am besten durch die einzelnen Monate & Tage navigieren können.

Da es uns besonders wichtig war immer wieder auf ähnliche Interaktionsmuster zurückzugreifen um so das Verständnis für die Anwendung selbst zu erhöhen, passten wir die Navigation der Monatsansicht noch einmal an. Die Monatsauswahl funktioniert somit sowohl in der Monatsansicht, als auch in der Wochenansicht über eine Art Karussell.

Um den Kalender insgesamt cleaner und freundlicher zu gestalten, entschieden wir uns gegen ein dunkles UI.

In weiteren Gesprächen über die neuen Entwürfe kam zudem immer häufiger der Wunsch nach weiteren Detailansichten bei den Nutzern auf. Daher integrierten wir das bereits in den Wireframes verwendete Overlay in die Monatsansicht. Dort lassen sich somit weitere Informationen und Interaktionsmöglichkeiten zu den geleisteten Arbeitsstunden, den Urlaubstagen und den Abwesenheitstagen, welche für die Erstellung des Schichtplans seitens des Filialleiters eine wesentliche Rolle spielen, einsehen.

In der Übersicht über die geleisteten Arbeitsstunden können die bereits geleisteten Schichten bzw. Stunden, welche über eine integrierte Zeiterfassung innerhalb der Anwendung erfasst werden eingesehen werden. Zusätzlich sind auch die geplanten Schichten für die kommende Woche einsehbar. Hierzu wird der neue Schichtplan meist eine Woche im Voraus vom Filialleiter erstellt. Der Filialleiter berücksichtigt dabei auch geleistete Überstunden und passt daher die Schichten innerhalb des Schichtplans für die neue Woche entsprechend an.


Krankmeldung

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ec581d81-d9b0-410e-b63f-3321d5a9582d/Frame_10.png

In unseren Wireframes, war es angedacht, die Detailinformationen, den Prozess um sich krankzumelden sowie den Tauschprozess, innerhalb des Overlays darzustellen. Da wir jedoch Information und Interaktion getrennt behandeln wollten und das Overlay aus den oben genannten Gründen an dieser Stelle nicht mehr angedacht war, entschieden wir uns für einen Header, welcher alle notwendigen informationen beinhaltet. Zusätzlich lässt dieser erkennen, dass der Nutzer sich nun innerhalb der zuvor ausgewählten Schichtkachel befindet und alle darauffolgenden Interaktionen in direktem Bezug mit der ausgewählten Schicht stehen.

Um den Prozess so einfach wie möglich zu halten beschlossen wir zudem, die Krankmeldung als separaten Prozess getrennt vom Tauschprozess abzubilden. Somit ist es dem Nutzer möglich den Prozess Schritt für Schritt abzuarbeiten. Um den Bezug zur ausgewählten Schicht jedoch nicht zu verlieren, integrierten wir innerhalb der Schichtkachel zwei Buttons, welche zu den jeweiligen Prozessen führen.

Will der Nutzer eine Krankmeldung einreichen, muss dieser zuvor den Zeitraum auswählen, für den er ausfallen wird. Hierfür haben wir letztendlich auf den für den Nutzer bereits bekannten Kalender der Monatsansicht zurückgegriffen. Anschließend muss je nach Dauer der Krankmeldung direkt ein ärztliches Attest hochgeladen werden. Da die Zielgruppe häufig nicht sehr technikaffin ist, haben wir das Kamerafeld direkt in die Anwendung integriert, um ein Foto der Krankmeldung aufnehmen zu können. Anschließend kann noch eine persönliche Notiz an den Filialleiter verfasst werden.


Schicht tauschen

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e055e6b3-a213-48da-967c-e92161d2b83b/Frame_11.png

Bisher war der Filialleiter ein wichtiger Bestandteil wenn es um den Schichttausch ging. Da in unserem Ansatz die Mitarbeiter sich weitestgehend selbst organisieren sollen, war es wichtig, den Tauschprozess so aufzubauen, dass der Filialleiter später nur noch sein "Okay" geben muss. Für den Aufbau des Tauschprozesses orientierten wir uns an der zuvor beschriebenen Krankmeldung.