UX/UI DESIGN
KVG Landingpage - Redesign
Problemstellung
Der öffentliche Nahverkehr wird in Kiel von der Kieler Verkehrsgesellschaft (KVG) betrieben. Auf der Homepage der KVG gibt es u.a. die aktuellsten Fahrgastinformationen, den Fahrplan und einen Servicebereich. Das Design der Landingpage lädt allerdings kaum zum Nutzen ein. Es ist unstrukturiert, überladen, schafft es kaum eine Nähe zu den Nutzer:innen herzustellen und ist somit keine gute Repräsentation des umfangreichen Kieler ÖPNV Betriebes.
Zielformulierung
Wie kann die Landingpage des KVG neu gestaltet werden, um eine übersichtliche, einladende und emotionale Nutzungserfahrung zu bieten, die eine einfache Orientierung ermöglicht und es den Nutzer:innen erleichtert, die gewünschten Verbindungen zu finden?
Umfang: 5 Tage Sprint
Rolle: Analyse, Research, Ideation, User Flows, Low-, Mid- und High-Fidelity Prototyp
Programme: Figma, Adobe Photoshop, Adobe Illustrator
Research + Ideation
Zunächst müssen die Potentiale und Schwachstellen der aktuellen Landingpage des KVG herausgearbeitet werden. Im Anschluss kann eine Marktrecherche zeigen, wie Landingpages anderer Verkehrsbetriebe mit ähnlichen Themen umgegangen sind. Diese Eindrücke fließen schließlich in den neuen Entwurf der KVG ein.
Analyse KVG Landingpage - September 2023
Erkenntnisse
Der Landingpage des KVG fehlt es an Hierarchisierung. Alle Informationen stehen genau gleich über-, bzw. nebeneinander. Es ist nicht zu erkennen, welche Informationen für die Nutzer:innen aktuell am relevantesten sind. Außerdem sollte man es vermeiden, die ersten drei Hauptinformationen mit Informationen über Dinge zu füllen, die nicht funktioniert haben und ein Hindernis darstellen können.
Die Orientierung fällt ebenfalls ziemlich schwer. Die Aufteilung der sehr textlastigen Blöcke der Landingpage macht für mich mehr den Eindruck eines informativen Blogs, als Nutzer:innen willkommen zu heißen und ihnen beim Zugang zur Seite und bei der Orientierung in Kiel zu helfen.
Dieser Landingpage fehlt es an leerer Fläche, sie ist viel zu lang, zu textlastig und stellt die Vorzüge von Kiel zu keinem Zeitpunkt in den Mittelpunkt der Gestaltung.
Marktanalyse
Berliner Verkehrsbetriebe (BVG)
-
Wichtigste Information (Verbindung finden) zentral, groß und intuitiv verständlich als Header der Landingpage
-
Viel Weißraum
-
Szenegrafischer Eindruck von Berlin
-
Klare Hierachisierung der Informationen über Typografiegrößen
-
Gelb als Signalfarbe für Buttons
-
Servicehinweis über Icon
Deutsche Bahn (DB)
-
Wichtigste Information (Suchen) zentral, groß und intuitiv verständlich als Header der Landingpage
-
Emotionale Bilder, die ein Gefühl von Geborgenheit, Freude und Zuneigung zeigen
-
Rabattaktion als Einladung über großen Button
-
Rot als Signalfarbe für Buttons
Metropolitan Transportation Authority (New York City)
-
Wichtigste Information (Plan a Trip) setzt sich im blauen Kasten deutlich vom Rest der Landingpage ab
-
Viel Weißraum
-
Übersicht aller Linien minimalistisch repräsentiert
Szenegrafisches Bild aus New York, das wie ein Eingang wirkt -
Farbschema der Buttons blau - orange Komplementärontrast
Tokyo Metro (Tokio, Japan)
-
Wichtigste Information (Suche) zentral, groß und intuitiv verständlich als Header der Landingpage
-
Viel Weißraum
-
Spieleriche Icons
-
Szenegrafisches Bild der Skyline von Tokio
Erkenntnisse
Die Analyse der Landingpages aus Berlin, New York City, Tokio und der Deutschen Bahn zeigen, wie andere große Verkehrsbetriebe ihre Nutzer:innen begrüßen. Es wird direkt deutlich, was ausreichend Weißfläche für die Orientierung auf einer Homepage bedeutet. Sie schafft Ordnung, Struktur und verleiht den gezeigten Informationen Wichtigkeit. Die wichtigste Information ist immer, wie die Nutzer:innen an ihr Ziel kommen. Dieser Service wird als erstes, groß und prominent gezeigt. Außerdem ist zu erkennen, welche Rolle Bilder und Icons auf so einer Landingpage einnehmen. Durch sie wird die Website deutlich lebendiger.
Wireframes bis Prototyp
Zunächst habe ich mich dem Thema zeichnerische genähert und die Ergebnisse aus der Marktanalyse in den Kontext der KVG übertragen. Mir ging es darum, die Seite übersichtlicher , einladender zu gestalten und die schönen Seiten von Kiel zeigen zu können.
Low-Fidelity Prototyp
Erkenntisse
Die drei Entwürfe zeigen verschiedene formale Themen für die neue Landingpage. Entwurf 1 teilt die unterschiedlichen Kapitel klar voneinander ab und probiert eine horizontale Richtung beizubehalten.
Entwurf 2 versteht die Landingpage der KVG als "Flow". Einzelne Kacheln mit großen Bildern sollen der Seite eine neue Lebendigkeit verleihen.
Der Entwurf 3 kombiniert die klare Aufteilung der einzelnen Kapitel von Entwurf 1 mit dem spielerischen, bildgewaltigen Ansatz von Entwurf 2 und verleiht der Seite so eine übersichtliche Ordnung, die zudem durch viel Bildmaterial nah an den Nutzer:innen ist.
Mid-Fidelity Prototyp
Erkenntisse
Die verschiedenen Mid-Fidelity Prototypen zeigt, wie die Struktur der neuen Landingpage aussehen kann. Sie zeichnen sich durch Großzügigkeit, Struktur und Emotionalität aus. Die KVG hat so die Möglichkeit, sich den Nutzer:innen als modernes, menschennahes und gut strukturiertes Unternehmen zu präsentieren.
High-Fidelity Prototyp
Während dieses Redesigns habe ich die Landingpage der KVG stark umstrukturiert, um sie übersichtlicher, informativer und lebendiger zu machen. Mir war wichtig, dass viel freier Raum entsteht, um einzelnen Aspekten mehr Wichtigkeit zu verleihen, den Anteil von Text zu reduzieren, um die Nutzer:innen nicht zu verschrecken und durch ein neues Iconset und den Einsatz von Bilder auf einer weiteren, emotionaleren Ebene zu kommunizieren. Die wichtigsten Aspekte des Designs waren:
Verbindung suchen
Die wichtigste Funktion befindet sich oben auf der Seite und setzt sich durch einen starken Farbkontrast vom Hintergrund ab.
Repräsentation von Kiel
Der Slogan repräsentiert eine motivierte KVG und erzeugt vor einem großflächigen Bild eine Aufbruchstimmung.
Iconset
Alle informativen Abschnitte werden zusätzlich mit Icons beschrieben. Das neu entworfene Iconset besteht dabei ausschließlich aus Outlines, um nicht zu viel Platz einzunehmen.
Große Bilder
Die Neuigkeiten-Galerie ist dagegen emotional und unterhaltsam gestaltet. Große Bilder schaffen die Verbindung von Artikel zu Leser:innen.
Service
Email- und Telefonverbindung fallen durch das Icon und viel Platz schnell ins Auge.
Styleguide
In dem Entwurf wurden zwei Fots verwendet. Für Überschriften und Titel fiel die Wahl mit der Secular One auf eine sehr prägnante Schriftart. Sie soll der KVG mehr Charakter verleihen. Für den funktionalen Text wurde dagegen die sachliche Inter benutzt. Das Rot ist die Akzentfarbe im Stile der KVG. Die Icons wurden als Outlines entworfen, um bei ihrer Größe auf der Landingpage nicht zu viel Platz einzunehmen.
Vorher - Nachher
Die alte Website war mit einer Fülle von Inhalten überladen, die sie lang und unübersichtlich machten. Es gab zu viel Text, der den Besucher:innen das Verstehen der Informationen erschwerte. Die Navigation war verwirrend und es war schwierig, die gewünschten Seiten oder Funktionen zu finden. Die Nutzer:innenerfahrung war insgesamt frustrierend und zeitaufwendig.
Im Gegensatz dazu überzeugt die neue Website mit ihrer Übersichtlichkeit. Sie wurde sorgfältig gestaltet, um den Besucher:innen eine klare Struktur und einen einfachen Zugang zu bieten. Die Inhalte wurden präzise auf das Wesentliche reduziert, sodass die Informationen schnell erfasst werden können. Die Navigation ist intuitiv gestaltet, was es den Besucher:innen ermöglicht, mühelos durch die verschiedenen Seiten und Funktionen zu navigieren. Ein weiterer großer Vorteil der neuen Website ist ihre Kürze. Durch das Entfernen unnötiger Inhalte und das Zusammenfassen von Informationen wurde sie deutlich kompakter. Dies bedeutet, dass die Besucher weniger Zeit benötigen, um die gewünschten Informationen zu finden und zu verstehen.
Insgesamt hat die Überarbeitung der alten Website zu einer tollen Verbesserung geführt. Die neue Website ist nicht nur übersichtlicher und präziser, sondern auch zugänglicher für alle Besucher:innen. Sie bietet eine angenehme Nutzendenerfahrung und ermöglicht es, schnell und effizient die gewünschten Informationen zu finden.
Responsives Design
Das Responsive Design passt sich automatisch anderen mobilen Geräte, wie Smartphone oder Tablet, an.
