Webtypografie – Amazon Redesign

Kurze Beschreibung des Projekts... (Bitte ausfüllen)

Stärken Amazon-Produktseiten

Umfangreiche Produktinformationen
Zahlreiche Rezensionen
Leichtes Stöbern
Auswahl

Schwächen

Unübersichtlich, viele zusätzliche Angebote
Struktur durcheinander
Layout, kein Raster erkennbar
uneinheitliche interaktive Elemente (Buttons, Links etc.)
Inkonsistent, Schriftschnitte und -größen, Farben, Zeilenlänge

Use Case

Amazon hat eine breite Zielgruppe und muss für ein großes Publikum funktionieren. Darüber hinaus wird es nicht nur zum Einkaufen verwendet. Viele Menschen nutzen die Seite auch zum Stöbern, um sich zu informieren und zu vergleichen oder Erfahrungen mit einem Produkt auszutauschen.

Für unser Redesign haben wir uns folgendes Nutzerszenario ausgedacht:

Hans (50) kauft sich einen Fernseher. Er hat dafür 600 € angespart. Als Fußball-Fan sind ihm ein großer Bildschirm und gute Bildqualität wichtig. Außerdem wünscht er sich eine eingebaute Recorder-Funktion.

Da ein Fernseher keine alltägliche Anschaffung für Hans ist, will er das beste was er für sein Budget bekommen kann. Daher kauft er nicht das erstbeste Modell sondern begibt sich auf Recherche und vergleicht verschiedene Geräte, bis er fündig geworden ist.

Zielsetzung

Für unser Redesign haben wir es uns zum Ziel gemacht die Seite übersichtlicher und kundenfreundlicher zu gestalten. Wichtige Informationen sollen schneller auffindbar sein, der Kaufprozess somit beschleunigt werden und für Hans ein angenehmes Shopping-Erlebnis erreicht werden.

Unsere Ansätze:

Strukturierung der Inhalte
Entwicklung eines robusten Layout-Fundaments
Reduzierung visuellen Lärms
Herleitung eines einheitlichen und klaren typografischen-Gerüsts

Struktur

Im ersten Schritt haben wir uns um die Strukturierung und Hierarchisierung der Inhalte nach Logik und Relevanz.

Dafür haben wir zunächst einmal Bestandsaufnahme gemacht und die Inhalte der Produktseite sortiert. Im Anschluss daran haben wir sie gruppiert und nach Wichtigkeit geordnet.

In diesem Stadium ist uns bewusst geworden, dass es sinnvoll ist die Seite in 3 Unterbereich aufzugliedern:

Produktinformationen
Kundenrezensionen
Zubehör

Wireframes

Als nächstes haben wir Wireframes gestaltet in denen wir unsere Struktur auf die Amazon-Seiten gebracht haben.

Im oberen Bereich der Seite haben wir einen Produktüberblick beibehalten. Dabei haben wir die Produktinformationen schärfer von den Kauffunktionen abgetrennt. Für die Kategorien »Produktinformationen«, »Kundenrezensionen« und »Zubehör« haben wir Reiter eingerichtet. So konnten wir die Scrollwege reduzieren und diesen Bereichen einen festen und prominenteren Platz zuweisen.

Typografie und Farben

Bei den Farben haben wir uns am bestehenden Design orientiert. So haben wir das Amazon-Orange unverändert übernommen. Für die Links haben wir ebenfalls einen Blauton verwendet, allerdings haben wir in leicht verändert. Ansonsten gibt es nur neutrale Grautöne, in die, für einen wärmeren Eindruck, ein wenig Gelb hinzugemischt wurde.

Als Schriftart kommt die PT-Sans durchgehend zum Einsatz. Sie ist gut lesbar und verkörpert einen gewissen Pragmatismus, der gut zu Amazon passt.

Umgestaltete Seite

Für die Umgestaltung haben wir besonders versucht Ruhe in die Seite zu bringen.

Um dies zu erreichen haben wir überwiegend mit Flächen gearbeitet und auf überflüssige Elemente verzichtet. Außerdem haben wir alle Bilder auf feste Formate mit einem 4:3 Verhältnis gebracht und den Header vereinfacht.

Für das Layout haben wir ein baukastenartiges, modulares System entwickelt, bei dem jede Sinneinheit auf einer eigenen Fläche liegt.