Home

HOCHSCHULE
DORTMUND

UI/UX

Website Optimierung für einer der größten Fachhochschulen Nordrhein-Westfalens mit Sitz in der Landeshauptstadt Düsseldorf.

Über das Projekt

• Dauer: 4 Wochen
• Tools: Miro, Zoom, Adobe XD
• My Role: Idea, UI/UX Design

Auszüge aus der Analyse einer Webseite für eine Hochschule und 5-tägige Projektarbeit im Rahmen meiner
UI/UX Design Weiterbildung.
Thema: Usability & User Experience, August 2022

Startseite der HSD Düsseldorfhttps://hs-duesseldorf.de/

CHALLENGE

OPTIMIERUNG DER WEBSEITE

Die HSD besitzt eine unübersichtliche Webseite. Das Ziel war es die Auffindbarkeit von Informationen und die Menüführung zu verbessern. Dafür wurde die Webseite auf Usability und User Experience analysiert. Mit den eingesetzten Tools wurde eine neue Informationsarchitektur aufgebaut und die Navigationsarchitektur optimiert.

Projekt

EIN TEAM, EIN MONATUnser Team bestand aus 2 angehenden UI/UX Designerinnen mit einem reichen Erfahrungsschatz im Bereich Art Direktion, Web- und Grafikdesign und 1er Redakteurin.

UX METHODEN

Für die Optimierung der WebseiteFür die Optimierung der Webseite haben wir innerhalb von drei Wochen die unten aufgeführten Methoden durchgeführt. In der 4. Woche kam es zur eigenen Projektentwicklung. Die vorher entstandenen Ergebnisse flossen in meine Abschlussarbeit mit ein.

1 |

untersuchen & verstehen

Heuristische Evaluation

Wir haben als erstes das Interface Design der Webseite untersucht.
Die Homepage haben wir mit den 10 Usability Heuristiken für Interface Design (Norman Nielsen) abgeglichen, um den Aufbau der Webseite auf Verwendbarkeit und Funktionalität zu bewerten.

Mit dieser Analyse konnten wir feststellen, welche Schwachstellen es gibt und welche Verbesserungen wir uns überlegen müssen.

Screenshot Miro Board

Fazit der Analyse

Es gibt zuviele doppelte Informationen und die Navigation ist für den User schwer zu verstehen.

Eine gewisse Struktur ist durch die Kachelanordnung und der gleichen Formen der Artikel vorhanden.Einzelne Elemente der Seite nehmen sich gegenseitig die Aufmerksamkeit. Es gibt keine Zielführung.Texte & Bilder sind schwer lesbar. Elemente weisen Ähnlichkeiten auf, jedoch wirkt alles sehr überladen.

2 |

Zielgruppen

Fokusgruppen

Wir definierten als nächstes unsere Fokusgruppen. Welche Eigenschaften, wie: Alter, Region, sozialer Stand, berufliche Bildung, Devices usw. haben sie? Dafür machten wir ein kleines Brainstorming, um die Zielgruppe einzugrenzen. Für die ausgewählte Fokusgruppe erstellten wir daraufhin eine Befragung, um Einstellungen und Erwartungen zu erfahren, wieso die HSD für ein Studium interessant ist.

Für die spätere Persona Erstellung konnten wir aus den Bedürfnissen und Wünschen, die aus der Befragung entstanden, die ersten konzeptionellen Überlegungen entwickeln.

Zielgruppendefinition

3 |

FOKUSGRUPPEN UND BEFRAGUNGEN

Heuristische Evaluation

Für unsere Fokusgruppen führten wir eine Online Befragung durch. Dafür erstellen wir Hypothesen, um Einstellungen und Erwartungen von unseren Usern zu erfahren. Diese Phase unterstütze uns bei der genauen Persona Erstellung und wie der Fokus auf der Webseite ausgelegt werden sollte.

Hypothesen

Umfrage via Google Forms

Unsere Umfrage führten wir via Google Forms aus. Wir befragten 15 Personen auf berufliche Aussichten, finanzielle Situationen, Wohnverhältnisse, Studiumsinteressen, persönliche Intention und Motivation der Studierenden.

Screenshots Miro Board

Auswertung Umfrage

Ein Großteil der Befragten findet ein Angebot zur finanziellen Unterstützung hilfreich oder interessant

Angebot zur Kinderbetreuung macht Sinn, aber steht nicht im Vordergrund

Die meisten studieren im Bachelor und könnten sich für einen Master-Studiengang interessieren. Die Informationen für die Bachelorstudiengänge könnten mehr hervorgehoben werden auf der Webseite

Da ein Großteil der Befragten Studieninteressierte sind, macht es Sinn, vor allem diese bei der Gestaltung der Webseite zu berücksichtigen und abzuholen
Angebote für ein Fernstudium wären sinnvoll

Auf ausgefallene Designelemente auf der Startseite verzichten

Die Zielgruppe ist hauptsächlich mobil unterwegs -> mobil-first-Strategie

Studienangebot trifft die Studierendenwünsche

Die HSD ist international weniger bekannt, als wir dachten. Wir müssen mit unserer Website stärker ausländische Studierende ansprechen

4 |

PERSONA

Nutzerprofile aufgebaut aus der Umfrage

Anhand unserer bisherigen Untersuchungen, erstellten wir Personas aus den Ergebnissen der vorherigen Umfrage. Wir legten drei Personas fest.

5|

CUSTOMER JOURNEY MAP

HYPOTHESE: DIE EINSCHREIBUNG AN DER UNI
IST FÜR STUDENTEN EINFACH

Für zwei unserer Personas haben wir anschließend ihre Customer Journey in Bezug auf den Umgang mit der Webseite und die Einschreibung an der Uni durchgespielt. So konnten wir überprüfen, wie unsere Personas die einzelnen Phasen meistern und ihre Nutzererfahrung  sind.

Am Anfang der Customer Journey von unserer Persona gibt es Schwierigkeiten bei der Einschreibung und ihrer Bewerbung. Daraus konnten wir die Problemstellen erkennen und daraus weitere Optimierungen für die Webseite ableiten.

Customer Journey Map

6|

CARD SORTING

DIE STARTSEITE DER HSD

Für unsere Informationsarchitkur führten wir ein offenes Card Sorting durch. Die Inhalte auf der Website wurden neu strukturiert und geclustert. Es wurden vier Oberkategorien neu angelegt. Eine neue Zuordnung der Navigationsinhalte wurden festgelegt.

Card Sorting Auswertung

7|

INFORMATIONSARCHITEKTUR

Die Ergebnisse aus dem Card Sorting bildete die Basis

Nach unserem Card Sorting, konnten wir eine neue Struktur der Website Oberfläche entwickeln. Es wurden 4 Hauptnavigationspunkte mit neuen Unterkategorien festgelegt.

Navigation Tree mit neuen geordneten Inhalten

8|

SCRIBBLE,WIREFRAMEs,
USER TESTINGs

REMOTE USABILITY TEST ZUM RELAUNCH DER HSD WEBSEITE

Jetzt wurden detalierte Scribbles zum Aufbau der Seite gemacht und die Inhalte wurden überlegt. Ich habe mich mich mit der Studium Seite in der 2. Ebene befasst. Darauf wurden Prototypyen in Adobe XD angefertigt.

Wir führten an unseren Prototypen Usability Tests durch, um die Navigation zu testen. Dazu stellten wir den Probanden Fragen und konkrete Aufgaben, wie sie z.Bsp. bestimmte Informationen aufsuchen sollten.

Wireframe Scribbles zur Seite Studium

Adobe XD Prototyp vor dem Test für den Usability Test

9|

EINZELPORJEKT​

OPTIMIERUNG DER SEITE BEWERBUNGSPORTAL

In meiner Projektwoche befasste ich mich mit dem Bewerbungsportal der HSD Seite. Mit den erlernten UX- und UI Methoden wurde das Bewerbungsportal optimiert.

Die erarbeiteten Erkenntnisse und Analysen verwendete ich meinen Projekt. Für meine Optimierung legte ich folgende Methoden fest: Problemanalyse, User-Testings, Prototyping und Umsetzung der Auswertung (Finetuning).

Ausgangsituation

Das Bewerbungsportal der HSD Düsseldorf

alte Version

neue Version

Zustand Analyse

• Zuviel Text verursacht dass die Informationen schwer auffindbar sind
• keine Abgrenzung zu den verschiedenen Inhalten
• Verschiedene Themen sind optisch schwer auffindbar
• Übersicht fehlt

Ziele und Umsetzung

• Struktur/ Sichtbarkeit für die Auffindbarkeit der einzelnen Themen verbessern
• Reduzierung von Text und tiefgreifendere Information auf die 3. Ebene setzen
• Fokus aufs Bewerbungsportal setzen
• Kategorien von Themen klar definieren und reduzieren
• Wireframes
• Prototyping
• Usability Test
• Redesign

WIREFRAMING​

Scribbles für verschiedene Devices wurden angefertigt. Ausgehend von der Desktop Variante wurde die Tablet und Mobile Variante danach angepasst. Am Anfang wurden die Inhalte festgelegt, um so auch visuell zu überlegen, wie die Kommunikation auf der Website für den User funktionieren soll.  

10 |

PROTOTYPING & USER TESTING​

Optimierung der Seite
BewerbungsportalDie Wireframes wurden in einem User Test getestet. Anhand der Feedbacks wurde die Funktionen und das Layout angepasst.

Wireframes für Desktop, Tablet, Mobile

11 |

OPTIMIERUNG DER WIREFRAMES​

Optimierung der Seite
BewerbungsportalEs gab noch weitere Anpassungen. Funktionen wie Menüleiste und Buttons wurden visuell und funktionell nachgebessert.