Das visuelle-Konzept des Co.labs wurde mehrmals iteriert und sollte den Use Case eines Mitarbeitenden abbilden, der eine eigene Idee einreichen möchte und unterstützen möchte. Anhand dieses Cases haben wir verschiedenste Varianten erstellt um die bestmögliche Abbildung der einzelnen Screens und Schritte zu ermöglichen. Wichtig hierbei war für uns die Exploration in Modellansichten, da wir das User-Engagement durch ein spannendes UI steigern wollten.
Der Einstieg der App sollte die Übersicht der unterschiedlichen Gewerke/Themen darstellen. Das wären im Einzelhandel:
Wir haben uns dazu entschieden noch folgende Punkte zu ergänzen:
Die ersten visuellen Konzepte haben sich darauf fokussiert, die einzelnen Themen farblich abzuheben, jedoch auch anzuzeigen, wie viele Projekt bereits im jeweiligen Thema eingereicht wurden. Hierbei gab es diverse Ansätze und Explorationen, den ersten Entry-Point so spannend und doch so verständlich wie möglich zu gestalten. Angefangen haben wir mit der Darstellung der "Bubbles", die je nach Anzahl der beigesteuerten Projekte, größer oder kleiner Erscheinen. Des weiteren haben wir versucht mit einem steigenden/abfallenden Farbverlauf die Aktivität der Nutzer abzubilden. Da dies sowohl für die Nutzer*innen, als auch für uns zu uneindeutig war, haben wir versucht durch CTA`s und Links die Interaktion deutlich hervorzuheben. Jedoch war die Aussage der visuellen Stilelemente einfach nicht klar, weswegen wir diese Konzepte nicht weiter verfolgt haben.
Bei der Projektübersicht wollten wir eine filterbasierte Darstellung wählen. Unsere ausgewählten Filter sind dabei:
Hierbei können Nutzerinnen auswählen ob sie alle Projekte, eins, oder mehrere Filter auswählen möchten. Der Fokus lag dabei auf der Darstellung der Projekte. In der ersten Ebene, bei der Projektübersicht, wollten wir die Parameter: zugehörige Gewerk, Titel und Autorin und eventuell die Zahl der Unterstützer*innen und die Phase des Projektes abbilden.
Das hat sich jedoch nur bei der Liste als umsetzbar erwiesen. Abstrahierte Darstellungen wie die "Bubbles" waren hier schon schwieriger und uneinsichtiger wie sich im Test herausgestellt hat.
Aufgrund dessen, haben wir versucht das Listenmodul weiter zu explorieren und die oben genannten Paramenter dort zu verordnen. Hierbei wurden die Phasen, als Timeline, Farb-Kode oder aber auch kleine Randmarkierungen abgebildet.
Auf der Projekt-Detail-Seite sollte man nähere Informationen zur eingereichten Idee bekommen. Es finden sich Titel, Gewerk, Autorin und der Fortschritt des Projekts , anhand Unterstützerinnen auf dem Screen.
Es gibt eine Beschreibung des Problems und der Lösungs-Idee und einen zweiten Abschnitt mit "Gesuchen" Hier können Mitarbeiterinnen nach gezielten Skills oder Materialien von Unterstützerinnen suchen.
Unterstützen kann man entweder durch einen Vote, oder aber auch konkret mit Hilfe auf die Gesuche.
Die Kommentarfunktion soll zum Austausch unter den Mitarbeiter*innen dienen, aber auch zur Weiterentwicklung und Input-Sammlung für die Idee.
Beim Hochladen eines Projekts werden drei Schritte durchlaufen
Schritt 1: Kategorieauswahl
Hier wird festgelegt in welchem Gewerk die Idee zugeordnet werden soll.
Schritt 2: Projektdetails
Die Projektdetails beinhalten Angaben zum Titel der Idee, dem Problem und dem Lösungsansatz selbst und zur Frage wie man die Idee am besten unterstützen kann. Zusätzlich hat der Nutzer die Möglichkeit ein Bild für seine Idee hochzuladen.
Schritt 3: Die Rahmenbedingungen
Die Rahmenbedingungen beinhalten den groben Ablauf der Einreichung, sowie gewisse Aspekte welche bei der Erstellung einer Idee berücksichtigt werden sollten.
Die erste Visualisierung orientierte sich an dem Overlayprinzip, welches bereits beim Schichtplan verwendet wurde. Um durch die Overlays zu navigieren, kann der Nutzer diese ein- und ausklappen. Später wurde jedoch die Variante eines klassischeren Pop-Ups gewählt, in der über einen CTA durch den Prozess navigiert werden kann.