Entwicklung einer UX-Webpräsenz

Aufgabenstellung

Basierend auf der Bachelorarbeit von Nico Iseli, in der die Erweiterung und Konkretisierung des Vorgehensmodells ISO 9241 Teil 210 untersucht und entwickelt wurde, sollen diese Erkenntnisse in eine intuitiv zu bedienende Website umgesetzt werden. Die Website soll dann sowohl für die Kommunikation in der Forschung als auch für die Unterstützung in Aus- und Weiterbildung verwendet werden.

Lösungskonzept

In einer ersten Phase des Projekts wurden die Bedürfnisse der Mitarbeiter der UX Research Group mittels eines Workshops aufgenommen. Anhand dieser Bedürfnisse konnte anschliessend die Auswahl eines CMS getroffen werden, mithilfe dessen die Web-Applikation umgesetzt werden soll. Eine nahe Zusammenarbeit mit der UX Research Group war in dieser ersten Phase essenziell. Aus dieser Zusammenarbeit konnten die folgenden wichtigsten Anforderungen bestimmt werden:

• Es soll ein Empfehlungs-System umgesetzt werden, womit der Benutzer Methodenvorschläge für sein Projekte auslesen kann.
• Die Forschungsprojekte der UX Research Group sollen einfach im CMS aufgenommen werden können und im Frontend ansprechend und übersichtlich dargestellt werden.
• Der Human-Centred Design Prozess (HCD-Prozess) aus der Bachelorarbeit von Nico Iseli soll ansprechend und übersichtlich dargestellt werden.
• Die Kompetenzen der UX Research Group sollen konstruktiv vermittelt werden können.

Die gesetzten Ziele wurden anschliessend mit einem Prototypen umgesetzt. Dieser Prototyp wurde in drei weiteren Workshops, einerseits mit der UX Research Group und andererseits mit potenziellen Benutzern (Studenten, Angestellte im UX-Bereich), validiert und es wurde Feedback aufgenommen. Der Prototyp wurde gemäss diesem Feedback noch angepasst. Feedback, welches nicht im Rahmen dieser Arbeit umgesetzt werden konnte, wurde für die zukünftige Weiterentwicklung der Web-Applikation in die Dokumentation aufgenommen. Die Web-Applikation wurde zuletzt mittels Blackbox-Testing auf Funktionalität und mittels Usability-Tests auf ihre Usability getestet und mit einer passenden Domain (https://humancentreddesign.ch/) veröffentlicht.

Zusätzlich zur Dokumentation wurden zwei weitere Dokumente erstellt, welche die Bedienung des CMS sowie die Entwicklung mit dem CMS und NextJS erläutern.

Spezielle Herausforderungen

Die Auswahl eines passenden CMS welches alle Bedürfnisse, sowie die persönlichen Erfahrungen der Mitglieder der UX Research Group beachtet, stellte sich als grössere Herausforderung heraus, als zunächst erwartet. Vor allem dadurch da es sehr viele verschiedene CMS-Lösungen gibt, welche auf die Handhabung und Erfüllung der technischen Bedingungen geprüft werden müssen.

Eine weitere Herausforderung war die initiale Einarbeitung in NextJS und Prismic. NextJS basiert auf React, womit ich noch keine Erfahrung hatte und ich mich zunächst damit auseinandersetzen musste. Vor allem der Einsatz von Hooks und dem von NextJS ermöglichten Server-Side Rendering stellte sich als herausfordernd heraus. Vor der Umsetzung des Prototypen galt es hier, sich mit NextJS genauer auseinanderzusetzen und die von NextJS eingesetzten Konzepte zu verstehen.

Ergebnisse

Ausgehend vom finalen Stand des Projekts liegt nun eine Web-Applikation vor, welche die folgenden Inhalte darstellt und folgende Funktionalitäten bietet:

• Interaktives Empfehlungs-System: Mithilfe eines interaktiven Empfehlungs-Systems können Benutzer Informationen zu den passenden Methoden für ihre Bedürfnisse finden.
• Vermittlung des HCD-Prozesses: Der von Nico Iseli in seiner Bachelorarbeit entwickelte HCD-Prozess wird auf der Webseite ansprechend dargestellt.
• Darstellung von Forschungsprojekten: Forschungsprojekte der UX Research Group können über das CMS aufgenommen werden und werden im Frontend ansprechend dargestellt. Forschungsprojekte können mittels Tags und einem Suchfeld gefiltert werden.
• Blogeinträge und Events: Blogeinträge und Events können im CMS aufgenommen werden und werden im Frontend attraktiv dargestellt. Events können mittels Suchfeld und Datum gefiltert werden. Blogeinträge lassen sich mit einem Suchfeld und Tags filtern.
• Potenzial zur beliebigen Erweiterung der Webseite mit den bestehenden Blöcken: Durch den Einsatz eines CMS können einfach beliebig viele neue Seiten erstellt werden. Dazu können vorentwickelte Blöcke eingesetzt werden. Durch diesen Block-Aufbau kann die Funktionalität der Webseite in Zukunft mit dem passenden React-Knowledge einfach erweitert und fortlaufend mit weiteren Blöcken für den Einsatz im CMS zur Verfügung gestellt werden

Ein weiterer zentraler Punkt des Projektes war es, die zukünftige Weiterentwicklung so einfach wie möglich zu gestalten. Tücken und beachtenswerte Informationen bezüglich der Entwicklung mit NextJS und Prismic (dem eingesetzten CMS) wurden dokumentiert und erklärt. Der Code der Webseite ist auf GitHub versioniert und Änderungen an diesem Code-Repository lösen einen neuen Build der Webseite aus, welcher automatisch mit einer passenden Domain veröffentlicht wird.

Um den Einstieg in die Arbeit mit dem CMS zu erleichtern, gibt es eine im Rahmen dieses Projektes erstellte Bedienungsanleitung, welche von der UX Research Group verwendet werden kann.

Ausblick

Durch die durchgeführten Workshops wurden die Bedürfnisse der Mitarbeiter der UX Research Group, sowie die von potenziellen Benutzern, aufgenommen. Im Rahmen dieser Arbeit konnten nicht all diese Bedürfnisse umgesetzt werden, respektive konnte nicht auf jedes Bedürfnis in seiner Tiefe eingegangen werden. Einige mögliche Erweiterungen sind nachfolgend aufgelistet:

• Mehr Community Funktionen: Blogeinträge können momentan nur gelesen werden. Hier kann beispielsweise ein Voting-System sowie die Möglichkeit Kommentare zu hinterlassen eingefügt werden. Für Events kann ein Anmeldungs-System erstellt werden, welches den Benutzern erlaubt sich bei Events anzumelden.
• Mehr Content erstellen: Einige Seiten der Webseite sind noch leer oder sind nur mit Platzhalter-Content befüllt. Eine passende Landing-Page sowie mehr Informationen zum Studiengang können unter dem Tab «Bildung» hinzugefügt werden. Der bestehende Content zu Methoden kann zudem mit Bildern und Videos noch verständlicher und einfacher gestaltet werden.
• Erweiterung des Empfehlungs-Systems: Das Empfehlungs-System kann mit einem Formular erweitert werden, welches dem Benutzer erlaubt, seine projektspezifischen Parameter einzugeben. Anschliessend kann per Knopfdruck ein Template für die Methoden generiert werden.
• Erweiterung des Designs: Das Design der Webseite ist simpel gehalten. Aus dem Feedback von Benutzern kamen hier auch bereits einige Verbesserungsvorschläge ein, wie beispielsweise das Einbringen von mehr Farbe und Animationen.