Incom ist die Kommunikations-Plattform der Hochschule Anhalt Fachbereich Design

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Anhalt Fachbereich Design mehr erfahren

WM Ersti-Beutel Website

Im WM Ersti-Beutel im Wintersemester 2023/24 bei Prof. Brigitte Hartwig haben wir uns zusammen die Aufgabe gestellt, eine Landing Page mit den wichtigsten Informationen für Erstsemesterstudierende anzufertigen. Dabei sollten nicht nur Mockups erstellt, sondern auch die technischen Komponenten im Backend entwickelt werden, sodass eine klickbare Alpha-Version entsteht.

Inspiration

Idee Inspiration

„Online-Studieneinstigs-Assistent“ der Freien Universität Berlin.

Hier ging es uns vor allem darum, einen Leitfaden zu erstellen, an dem ich die Studierenden selbstständig entlangführen können. Es soll wie eine Schritt-für-Schritt-Erklärung funktionieren. Nachdem wir weiter Recherchiert haben, haben wir uns die Frage gestellt: Geht das nicht noch interaktiver, frischer und witziger?

image.pngimage.png

UX und UI Inspirationen

Inspiration haben wir uns vor allem über die Website Awwwards gesucht. Hier kann man richtig gut gemachte Webseiten anschauen und auch sehen, was gerade im Trend ist bzw. was möglich ist.

Screenshot 2024-03-25 194000.pngScreenshot 2024-03-25 194000.png
Screenshot 2024-03-25 194225.pngScreenshot 2024-03-25 194225.png
Screenshot 2024-03-25 194046.pngScreenshot 2024-03-25 194046.png

Ideen

Die Grundidee war eine Landing Page mit einer etwa 10-minütigen „Ersti-Experience“, die beim Studieneinstieg helfen soll, aber nicht mit Informationen überflutet.

Es ist quasi wie ein interaktives Tutorial, das einem Informationen und Informationsbeschaffungstools an die Hand gibt, sodass die wichtigsten Infos bereits herausgefiltert werden und man im Zweifelsfall weiß, wo man sich weitere Informationen beschaffen kann.

Das Ganze soll wie eine kleine interaktive Reise sein, damit es Spaß macht und die Informationen besser im Gedächtnis bleiben.

Planung und Struktur

Zunächst haben wir uns einen Plan über die Struktur mit den wichtigsten Inhalten erstellt, indem bereits der interaktive Aufbereitungsmechanismus, also der technische Part (das Backend), inkludiert und mit Beispielen versehen ist.

WM Erstibeutel (1).jpgWM Erstibeutel (1).jpg
WM Erstibeutel (2).jpgWM Erstibeutel (2).jpg
WM Erstibeutel (3).jpgWM Erstibeutel (3).jpg

Umsetzung

Zunächst haben wir begonnen verschiedene Stile auszuprobieren um ein Gefühl für unser angestrebtes visuelles User Interface zu bekommen und ins „machen“ zu kommen.

Wobei wir manche Stile mit weiteren Beispielen weiterentwickelt haben und andere direkt abgesägt haben.

Screenshot 2024-03-25 195517.pngScreenshot 2024-03-25 195517.png
Screenshot 2024-03-25 195449.pngScreenshot 2024-03-25 195449.png

Für die technische Umsetzung haben wir ein ziemlich neues Tool namens Framer genutzt, mit dem es möglich ist, funktionstüchtige und publizierbare Webseiten mit einem intuitiven Interface für Designer ohne Code zu erstellen.

Screenshot 2024-03-25 201809.pngScreenshot 2024-03-25 201809.png

Ergebnis

Leider hat uns die Technische Umsetzung in der letzten Woche einen Strich durch die Rechnung gemacht und uns die Gesamte Website zerschossen, wodurch wir leider keinen funktionierenden klickbaren Prototypen vorzuweisen haben.

Auch nach Stundenlangem Troubleshooting haben wir keine Lösung für das plötzliche Problem finden können weshalb die Website sich immernoch im selben Status befindet.

Video

Um die Funktionallität trotzdem so gut wie möglich darzustellen haben wir ein Video erstellt indem die User Erfahrung demonstiert wird.

Pages

hier noch einmal die „finalen“ Beta Entwürfe der einzelnen Seitenbestandteile

Screenshot 2024-03-25 201123.pngScreenshot 2024-03-25 201123.png
Screenshot 2024-03-25 200326.pngScreenshot 2024-03-25 200326.png
Screenshot 2024-03-25 200405.pngScreenshot 2024-03-25 200405.png
Screenshot 2024-03-25 200346.pngScreenshot 2024-03-25 200346.png
Screenshot 2024-03-25 200433.pngScreenshot 2024-03-25 200433.png
Screenshot 2024-03-25 200451.pngScreenshot 2024-03-25 200451.png
Screenshot 2024-03-25 200713.pngScreenshot 2024-03-25 200713.png
Screenshot 2024-03-25 200509.pngScreenshot 2024-03-25 200509.png
Screenshot 2024-03-25 200526.pngScreenshot 2024-03-25 200526.png
Screenshot 2024-03-25 200553.pngScreenshot 2024-03-25 200553.png
Screenshot 2024-03-25 200705.pngScreenshot 2024-03-25 200705.png
Screenshot 2024-03-25 200730.pngScreenshot 2024-03-25 200730.png
Screenshot 2024-03-25 200749.pngScreenshot 2024-03-25 200749.png
Screenshot 2024-03-25 200820.pngScreenshot 2024-03-25 200820.png
Screenshot 2024-03-25 200620.pngScreenshot 2024-03-25 200620.png

Fazit

Rückblickend kann ich (Lukas) sagen, dass wir uns mit der technischen Umsetzung etwas übernommen haben. Leider war Framer als Tool noch nicht so ausgereift, um die komplexeren Interaktionsmechanismen der Website ohne Coding umsetzen zu können, wofür ich sehr viel Zeit „verschwendet“ habe. Allerdings muss ich sagen, dass ich sehr viel über die technische Komponente hinter einer Website gelernt habe, und das war auch der Grund, weshalb wir uns überhaupt dieser Herausforderung gestellt haben. Einen guten Lerneffekt hatten wir also trotzdem, und darum geht es ja schließlich in einem Studienprojekt.

Dass die Webseite dann allerdings in der Abgabewoche komplett zerschossen ist, und was der Grund dafür ist, kann ich bis heute nicht fassen. Das hat den Abschluss des Projektes leider extrem frustrierend und nervtötend gemacht. Der Abschluss hat mir hier den letzten Nerv geraubt und auch meine gesamte Motivation, die Webseite noch einmal neu aufzusetzen, sodass sie tatsächlich zum Einsatz kommen könnte.

Ich kann insgesamt sagen, dass ich das Projekt als sehr schleppend empfunden habe, vor allem am Anfang. Ich (Annie) hatte das Gefühl, dass ich erst am Ende des Projekts richtig in das Layouten der Webseite hineingekommen bin. Oder zumindest hatte ich einen Plan. Durch die technischen Schwierigkeiten hatte ich am Ende eher das Gefühl, ich betreibe Schadensbegrenzung. Alles in allem haben wir uns vielleicht etwas übernommen und wären mit einem anderen Format erfolgreicher geworden. Aber das ist ein gutes Learning. Beim nächsten Mal wird es besser!

Trotzdem finde ich es bemerkenswert, was die anderen alles geschafft haben, und ich hoffe, dass sich die neuen Erstsemester über ihre Willkommensgeschenke freuen.

Fachgruppe

Integriertes Design

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Prof. Brigitte Hartwig

Zugehöriger Workspace

WM 2D Ersti-Beutel

Entstehungszeitraum

Wintersemester 2023 / 2024

Keywords

zusätzliches Material