UX Dokumentation

ABSTRACT

INSPIRATION & RECHERCHE

01 | Problemanalyse der Website

Allgemeine Probleme

Website wirkt insgesamt chaotisch und unstrukturiert
Grundsätzlich modernes Design, aber schlecht umgesetzt
Kein einheitliches Designsystem
Elemente wirken zufällig eingesetzt (einmalig oder zu häufig)
Häufig monotone, eintönige oder fehlende Gestaltung
Abstände passen oft nicht (zu eng oder zu viel Weißraum)
Häufig seltsame oder unlogische Weißräume
Elemente sind teilweise zu groß oder zu klein
Platzierung von Sections teilweise unpassend
Inhalte wirken oft zusammengedrängt oder schlecht verteilt
Bilder oft schlecht integriert
Zu viele nichtssagende Stockfotos
Tiere nicht gut sichtbar (Bildrahmen zu klein, v. a. Desktop)
Unnötige Klickbarkeit von Bildern ohne Mehrwert
Unnötige oder irreführende Hovereffekte (keine echte Funktion)
Hintergründe oft unpassend

02 | Zielgruppen, Personas & Archetypen

ZIELGRUPPEN

PERSONAS

ARCHETYPEN

03 | User Journeys

04 | Erster Prototyp für Use Cases

Use Case Schulklasse

Sebastian möchte mit seiner Klasse am nächsten Dienstag eine Führung im Hofer Zoo machen. Dafür öffnet er die Website und sucht dort nach einer passenden Führung und bucht diese.

Nach dem erfolgreichen Tag im Zoo möchte er sich dann noch passendes Unterrichtsmaterial herunterladen, um die Zooführung mit den Kindern nachzubereiten.

https://www.figma.com/proto/I6ceWirSbdVGvmKiixRmjA/UX--Zoo-Website---Wireframes?node-id=154-324&viewport=-166%2C119%2C0.47&t=bF60dXihYR5NkjT8-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=154%3A324&show-proto-sidebar=1&page-id=0%3A1

Use Case Senior

Günther möchte bevor er den Zoo besucht, wissen, ob es aktuelle Veranstaltungen gibt, die er dort besuchen kann. Außerdem will er die Adresse des Zoos erfahren. Beides findet er auf der Startseite der Website.

Nach dem Zoobesuch interessiert er sich für aktuelle Informationen über den Zoo und liest sich einige Artikel durch. In einem davon werden Patenschaften erwähnt. Günther kommt über das Menü zur richtigen Unterseite und übernimmt eine Patenschaft für ein Tier, das er besonders mochte.

https://www.figma.com/proto/I6ceWirSbdVGvmKiixRmjA/UX--Zoo-Website---Wireframes?node-id=137-331&viewport=1853%2C-7232%2C0.92&t=bCSSWtO8grwnIE8a-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=69%3A160&page-id=1%3A2

Use Case Jedermann

Kathi und Oliver entscheiden sich für einen Zoobesuch am nächsten Wochenende. Um sich schonmal generell zu informieren, rufen sie die Zoo-Website auf. Auf der Startseite suchen sie nach Öffnungszeiten und Ticketpreisen. Danach werfen sie einen kurzen Blick auf die Karte des Zoos, um einen Überblick zu bekommen. Am Tag des Besuches wird die Website erneut aufgerufen, um zum Zoo zu navigieren. Nach dem Zoobesuch suchen sie auf der Website noch nach Infos zu den Weißhandgibbons.

https://www.figma.com/proto/I6ceWirSbdVGvmKiixRmjA/UX--Zoo-Website---Wireframes?node-id=62-217&viewport=10%2C-536%2C0.6&t=CuAfoSsurkddV9jW-1&scaling=min-zoom&content-scaling=fixed&page-id=1%3A3