Unter der Rubrik „Stories“ geben wir euch genauere individuelle Einblicke in unsere Aufgaben. Wir teilen mit euch 10 verschiedene Stories von 10 verschiedenen Teilnehmern des Projektseminars, damit ihr für euer Projekt einige Do’s, Don’ts bzw. Learnings aus unterschiedlichen Perspektiven mitnehmen könnt oder einfach bzgl. Aufgabenverteilung etwas Inspiration findet. 🙂
Unser Projekt „Sozialkompass“ ist unter den Sub-Teams „Frontend“, „Backend“ und „Recherche / Data Analysis“ gegliedert. In jedem Sub-Team liegen unterschiedliche Schwerpunkte, die am Ende zusammen ein gemeinsames, funktionelles Produkt ergeben sollten. Das Backend beschäftigt sich hauptsächlich mit dem Algorithmus & Implementierung des Fragebaums der Website. Dabei arbeiten sie eng zusammen mit dem Recherche-Team, welches die ganzen Daten zu den jeweiligen Sozialanträgen gesammelt und ausgewertet hat. Das Frontend-Team fokussiert sich auf die Erstellung der UI & UX für den Sozialkompass. Wir sind also dafür verantwortlich, dass alles, was ihr auf der Website seht, auch barrierefrei erscheint und einen guten Eindruck gibt.
Jetzt ist das Pronomen „Wir“ auch schon gefallen. Den Anfang der Stories-Rubrik mache ich: Julian 1 (wir haben zwei Julians im Seminar). Ich bin zusammen mit Sören derzeit (Stand November 2022) Teil des Frontend-Teams. Im Folgenden zeige ich euch genauer, woran wir im Seminar gerade arbeiten.
Unsere Website für den Sozialkompass sah beim Hackathon noch so aus:
Sie war schlicht, total unfertig (also nicht funktionsfähig) und unproportional. Für einen Prototypen reicht das völlig. Beim Hack konnte unsere Website vom Anblick her einen guten Eindruck machen. Dementsprechend haben wir Wochen später im Seminar gesagt, dass wir mit diesem Design weiterarbeiten wollen. Was wir aber definitiv austauschen wollten, sind die Frameworks, die beim Frontend im Hack genutzt wurden. Programmiert hatten wir dort mit React.js und als Tool haben wir meistens Bootstrap genutzt. React ist ein web-basiertes Framework, das ihr für die Programmierung von UI-Elementen von Websites oder sogar Apps nutzen könnt. Neben dem Framework existieren verschiedene UI tool kits, die ihr zusätzlich in React importieren und nutzen könnt. Dazu gehört Bootstrap, das das Programmieren von Buttons oder das Integrieren von Interaktionsmöglichkeiten zwischen Nutzer:in und Produkt in sehr kurzen Zeitabständen unterstützt (heißt: Die Nutzung von Bootstrap beschleunigt den Arbeitsprozess erheblich, weil viele UI tools wie z. B. die Navbar schon vorbereitet sind). Bootstrap zeigt bzgl. Zeitaufwand viele Vorteile und auch die Nutzung von diesem Framework ist sehr einsteigerfreundlich. Dennoch sind die angebotenen Buttons oder Navbars von Bootstrap ziemlich hässlich und technisch im späteren Entwicklungsprozess schlecht anpassbar, weshalb wir im Frontend uns dazu entschieden haben, mit neuen Tools die Website zu programmieren.
Bevor wir zu diesen neuen Tools kommen, will ich euch den Entwicklungsprozess zwischen Hack und jetzt erläutern. Sören und ich haben ganz verschiedene Beruf-Backgrounds und haben bzgl. Coding-Erfahrungen mehr Ahnung von Backend als Frontend. Das Projektseminar wollten wir als Chance nutzen, auch mal im Bereich des Frontends etwas zu machen. Design festlegen, umsetzen und dann dies zu präsentieren: klang vielversprechend.
Wie sieht’s aber jetzt aus?: …ist natürlich leichter gesagt als getan. 😀
Wir haben lange überlegt und diskutiert, ob wir das Design vom Hack übernehmen wollen bzw. welche Veränderungen wir groß umsetzen möchten und gerade bei dem äußerlichen Erscheinungsbild ist es meistens schwer, aus subjektiven Blickwinkeln einen Kompromiss zu finden, mit dem wir weiterarbeiten können. Vor dem Programmieren wollten wir deshalb einen Mockup neu erstellen, mit dem wir neue Funktionen für den Sozialkompass vorstellen wollten und gleichzeitig die Barrierefreiheit mehr in den Vordergrund rücken wollten. Die ersten Mockups habe ich komplett übernommen, während Sören sich in React.js eingearbeitet hatte.
Die Mockups erstellen wir generell mit dem Programm Figma. Das ist ein kostenfreies Tool, mit dem man ganz gut im Team Designs erstellen kann. Die erstellten Mockups können dann ganz einfach als PDF oder PNG exportiert werden. Das haben wir gemacht, um diese in einem unserer Jour Fixes allen präsentieren zu können. Wir hatten den Beamer angeschmissen und zusammen über die verschiedenen Mockup-Ideen diskutiert. Manches Feature haben wir dabei neu einführen lassen, andere wiederum verworfen oder beibehalten. Die Diskussion der Farbe sollte bei euch nicht in den Fokus geraten, sondern eher die Features, die ihr später auf eurer Seite implementieren wollt. Bei uns ist eine der Ideen, die Website neben der Leichten Sprache in verschiedenen internationalen Sprachen und dazu eine Vorlesefunktion für Analphabeten anzubieten.
Neben der Startseite und der Navigations-Bar haben wir mögliche Seiten gezeigt, wie wir die Fragen darstellen wollen und wie die Ergebnisseite angezeigt wird. Eine Schwierigkeit bei den Fragen ist die Standortbefragung der Nutzer:in. Dabei versuchen wir, personenbezogene Daten aus Datenschutz-Gründen nicht zu häufig zu speichern. Der Standort ist wichtig, um die Ansprüche auf Anträge und Kontaktdaten zu den Antragsstellen für die Nutzer:in anzupassen. Wir hatten überlegt, eine PLZ-Eingabe einzuführen, indem die Nutzer:in ihre Stadt auswählt und dann ihre PLZ in einem Textfeld eingibt. Es werden danach mehrere PLZs angezeigt, unter dem die Nutzer:in nach der Eingabe auswählen kann. Als Feedback kam zurück, dass wir noch ein „Nicht sicher“-Button zusätzlich hinzufügen sollten.
Bei der Ergebnisseite werden die beanspruchten Anträge angezeigt und gleichzeitig ein Prozentbalken, das auf Basis der Auswertung von den vorhin gestellten Fragen erstellt wird. Wir denken, dass ein Anspruch nie wirklich zu 100% sicher garantiert werden kann, weshalb wir die Prozentanzeige mit einführen wollten. Als Feedback gab es auch den Vorschlag, dass man die Ansprüche am Ende als PDF herunterladen kann, um damit zu der Antragsstelle einfacher an Anträge zu kommen.
Nachdem wir uns all das ausführliche Feedback von Team, Nina und Armin holen konnten, haben wir über das weitere Vorgehen kurz geredet und waren fest überzeugt, neben einer neuen Mockup-Runde mit viel mehr Einarbeitung / Professionalität auch die neue Sozialkompass-Seite als Live-Demo zu präsentieren. Ab dem Punkt haben wir die Rollen sinnvoll getauscht: Sören übernimmt die Mockups für die Präsentationen, während ich die Website angefangen habe zu programmieren.
Die Website wird weiterhin mit React im Frontend entwickelt, als neues UI Framework haben wir uns für Material UI entschieden. MUI beinhaltet Komponenten, die ebenso wie Bootstrap, schnell zu implementieren sind. Der Vorteil bei MUI ist die Anpassungsfähigkeiten der Komponenten: die Designs z.B. von Buttons fallen viel moderner und schöner aus. Ziel war es nun, erstmal die Startseite von der Sozialkompass-MSHACK Version mit Material UI nachzubauen. Die Ordner-Struktur der JS-Dateien, Assets und Komponenten bleibt bei React fast immer gleich: auf App.js rufst du die Komponenten auf, die in dem gleichnamigen Ordner sortiert sind und dazugehörige Assets wie unser Logo können in einem eigenen Ordner abgerufen werden.
Die Einarbeitung in neue Frameworks ist allgemein immer gewöhnungsbedürftig, deshalb plant da auf jeden Fall immer mehr Zeit als nötig ein. Nichtsdestotrotz konnte ich mich nach einer gewissen Zeit ganz gut in MUI einarbeiten und nach jetzigem Stand die Startseite neu implementieren:
Mit der neuen Seite haben wir den Ansatz, den Text möglichst sparsam und effizient einzusetzen. Die Kommunikation mit der Nutzer:in soll meistens anhand von Icons oder der einfachen Sprache erfolgen. Ebenso muss auf der Startseite mit wenigen Worten klar sein, wofür der Sozialkompass gemacht ist. Die Navbar, die MaterialUI anbietet, schafft einen moderneren Touch für den Sozialkompass und kann mit UI’s von Websites wie Google mithalten.
Nach der Startseite planen wir die Abfragen zu implementieren. An dieser Stelle müssen wir eng mit dem Backend arbeiten, denn auf deren Algorithmus hängt der Fragebaum ab und diesen gilt es im Frontend auf der Seite zu visualisieren. Wir werden erst die Struktur der Seite programmieren und danach die Fragen auf Basis unserer gesammelten Daten durch enger Absprache mit Backend darstellen.
Das ist der aktuelle Stand bei mir. Wichtig ist erstmal, bis zur Zwischenpräsentation in Dezember an die Darstellung der Fragen im Frontend weiterzuarbeiten. Es macht wirklich Spaß, Design-Entscheidungen zu treffen und diese versuchen umzusetzen. Ein Wechsel in ein anderes Team wie z.B. zum Backend würde ich im Laufe des Projektseminars nicht ausschließen, aber durch die Challenges mit dem UI-Design konnte ich schon viel lernen & mitnehmen. Nutzt das Projektseminar, um euch auszutoben. Es wird sonst wahrscheinlich schwierig in Zukunft sein, eine Möglichkeit zu finden, wo ihr wild & spontan in großen Gruppen an einem Projekt zusammensetzen könnt, das nicht nur für die Teilnehmenden Spaß macht, sondern auch Relevanz in der Gesellschaft erzeugt. Das Gefühl ist echt unbeschreiblich gut und ich kann es jedem ans Herz legen, Projekte (v.a. im Frontend, wenn man aus dem Backend kommt) anzugehen, um sich seinen eigenen Schwächen immer wieder zu stellen und diese auszubügeln. Wir sind Menschen und sind nicht perfekt, wir lernen nun mal aus Fehlern und gerade in den jungen 20er Jahren ist es der idealste Zeitpunkt, um aus Fehlern viel mitnehmen zu können.
Viel Erfolg mit eurem Projekt!
Euer Julian G.
