7 Hauptelemente der Neugestaltung von Webseiten Teilen Sie die 7 Hauptelemente der Neugestaltung von Webseiten

Shopify Plus ist die Enterprise-Version der von uns gegründeten E-Commerce-Plattform. Es erschien im Februar 2014 und ist noch immer die erste Version. Ich denke, es ist Zeit für eine Überarbeitung.

Nach mehr als einem Jahr haben wir sowohl unsere Kunden als auch uns selbst besser verstanden. Die alte Marke ist nicht mehr relevant.

Wir haben keinen speziellen Prozess, wir verbinden einfach die folgenden 7 Dinge miteinander, um unser Ziel zu erreichen.

Interview

Ich habe Einzelgespräche mit Mitgliedern des Führungsteams geführt, um zu klären, was Shopify Plus ist. Um die Authentizität zu gewährleisten, habe ich jedes Interview zur späteren Wiedergabe aufgezeichnet.

Nach dem Interview hatte ich die Inspiration – ich hatte das Gefühl, dieses Produkt in- und auswendig zu kennen. Das Verfassen von Visionen, Leitbildern, Markenrichtlinien, Projektübersichten und Website-Texten ist jetzt noch einfacher. Unsere Website muss besser darin werden, Informationen zu vermitteln und Erkenntnisse zu gewinnen.

Projektübersicht

Bevor wir uns in das Projekt stürzten, schrieben wir eine Projektübersicht, damit alle auf dem gleichen Stand sind. Wir werden es gegebenenfalls aktualisieren, um den aktuellen Status des Projekts widerzuspiegeln.

Einige Fragen, die Sie in Ihrer Projektübersicht stellen könnten:

• Was versuchen wir zu erreichen?
• Woher wissen Sie, ob das Projekt erfolgreich ist?
• Was ist zu tun?
• Warum müssen Sie das tun?
• Was sind die notwendigen Voraussetzungen?
• Für wen ist das?
• Wie kann man es ihnen mitteilen?
• Wer sind die Mitglieder des Projektteams?
• Wann ist die Frist?

Wettbewerbsfähige Produktanalyse

Wir haben uns angeschaut, welche ähnlichen Produkte es noch gibt. Ich begann mit einer Liste von Wettbewerbern und ging dann zu Unternehmen außerhalb des E-Commerce-Bereichs über, die dieselben Kunden ansprachen wie wir.

Wir haben uns die Stärken, Schwächen und Chancen unserer Wettbewerber angesehen und auch die Schlüsselbereiche, auf die wir uns konzentrieren wollten – und die Bereiche, die wir vermeiden wollten.

Unser Dokument zur Wettbewerbsproduktanalyse

Informationsarchitektur

Unter Informationsstruktur versteht man die Organisation von Inhalten, um diese leicht verständlich zu machen. Beim Webdesign stellt ein Strukturdiagramm die Beziehung zwischen den Seiten einer Website dar und ermöglicht Ihnen, die Zusammensetzung der Website aus einer übergeordneten Perspektive zu betrachten.

Ich habe für die alte Website ein Informationsstrukturdiagramm gezeichnet, um die Beziehung zwischen den Seiten darzustellen. Vor der Aktualisierung und Änderung habe ich Inhalte, Ziele und Arbeitsaufwand evaluiert. Dieses Diagramm half uns dabei, den Umfang des Projekts festzulegen, und diente als Aufgabenliste für alle Seiten, die wir schreiben, gestalten und codieren würden.

Shopify Plus-Informationsstrukturdiagramm

Drahtgitter

Während des gesamten Neugestaltungsprozesses habe ich Wireframes verwendet, um Probleme zu durchdenken und Kreativität anzuregen. Einige wurden auf Servietten gezeichnet und persönlich ausgetauscht, andere Skizzen wurden online geteilt.

Wireframing hat einen unerwarteten Vorteil: Es hilft Ihnen beim Schreiben von Inhalten. Beim Schreiben eines Dokuments ist es schwierig, alles zu visualisieren. Das Einfügen von Inhalten in ein Drahtmodell vermittelt den Benutzern einen klaren Eindruck vom Sprungfluss der Seite und davon, wie die einzelnen Inhaltselemente mit den anderen zusammenhängen.

Hochpräzise Wireframes für das Shopify Plus-Redesign

Inspirationstafel

Mein Inspirationsboard zeigt, wie die neue Marke aussehen könnte. Sie helfen mir, schon früh im Projekt Feedback vom Team zu bekommen.

Ich verwende Pinterest, um mehrere Zeichenflächen zu erstellen und Themen wie Navigation, Animation und Schriftarten aufzuschlüsseln, damit die Ideen nicht auf einer einzigen Zeichenfläche verloren gehen.

Während des Rechercheprozesses zeichnete ich inspirierende Ideen in Illustrator und kombinierte Text, Bilder und Farbpaletten zu werbeähnlichen Mustern. In verschiedenen Designentwürfen tauchen zwar die gleichen Gestaltungselemente auf, ihre Position und Ausprägung variieren jedoch.

Shopify Plus Inspiration Board

Entdecken Sie mögliche Markenbildungen für Shopify Plus anhand von Inspirationsboards

Renderings und interaktive Prototypen

Die meisten Leute schenken Wireframes und Webdesigns nicht viel Aufmerksamkeit, wenn sie auf Papier gedruckt sind. Die Anzeige des Designs auf dem Bildschirm ist jedoch großartig.

Ich beginne schon früh im Wireframing-Prozess mit der Erstellung interaktiver Renderings. Geben Sie sie weiterhin an den Kunden und das Team weiter, bis die Site codiert ist.

Ich habe sie gebeten, beim Surfen ihre Meinung zu sagen, damit ich verstehen konnte, was sie beim Bedienen der Benutzeroberfläche dachten. Diese Rückmeldungen hoben lokale Probleme hervor und überprüften die Designlösungen, was den Abschluss des Projekts erleichterte.

InVision-Projektseite für Shopify Plus

Sammeln von Feedback für Shopify Plus

Während manche Organisationen auf einer bestimmten Reihenfolge in ihrem Neugestaltungsprozess bestehen, haben sich diese sieben Schritte bei uns bewährt. Die Wahl einer Strategie, die zu Ihrem Arbeitsablauf passt, ist ein wichtiger Faktor für den Erfolg Ihrer Neugestaltung.

Informationen zum Autor:

Filippo Di Trapani, Designer bei Shopify

Filippo ist Designer und arbeitet in der Shopify-Zentrale in Ottawa, Kanada. Er ist ein liebevoller Ehemann, Vater von zwei Kindern und ein begeisterter Musikliebhaber.