HOCHSCHULE DORTMUND
UI/UX
Ü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
CHALLENGE
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
UX METHODEN
1 |
untersuchen & verstehen
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.
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
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
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.
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
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
neue Version
- 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
Wireframes für Desktop, Tablet, Mobile
11 |
OPTIMIERUNG DER WIREFRAMES
