Die treibenden Kräfte des Designs – Eine Fallstudie zum Redesign einer Website

Wann ist der beste Zeitpunkt für ein Redesign der Website?

Wer ist nicht schon einmal auf eine Website gestoßen, die veraltet und verlassen aussieht? Wie die Hülle eines kaputten Lastwagens, der in der Wüste liegen gelassen wurde, offensichtlich seit vielen Jahren unberührt.

Websites werden aus allen möglichen Gründen überarbeitet. Leider erkennen viele Unternehmen nicht, dass ihre Website neu gestaltet werden muss, und bleiben zurück, wenn Konkurrenten einen Wettbewerbsvorteil erlangen, indem sie ihre verbessern und dadurch ihre Conversions steigern.

Ein häufiger Fehler, den Unternehmen machen, ist, nicht frühzeitig zu überlegen, was passieren könnte, wenn ihre Website-Anforderungen komplexer werden und sich infolgedessen in einer schwierigen, möglicherweise kostspieligen Situation befinden, wenn sie sie erweitern müssen. Darüber hinaus können wichtige Faktoren wie Suchmaschinenoptimierung (SEO), SSL (das Ranking und Sicherheit beeinflusst) und Mobilfreundlichkeit (das Ranking und Conversion beeinflusst) oft vernachlässigt werden.

Neue Website-Designs entstehen oft aufgrund eines Führungswechsels an der Spitze, bei dem eine neue Markenausrichtung eingeführt wird und neue Markenmarketing-Leute an Bord kommen. Als sie die Website des Unternehmens bewerten, stellen sie mit Entsetzen fest, dass sie eine schreckliche UX hat, und stellen fest, dass eine beträchtliche Menge an wünschenswerten Inhalten fehlt. Zusammenfassend lässt sich sagen, dass es sich einfach um eine schlecht zusammengestellte „Broschüren-Website“ handelt, die nicht die „Stimme der Marke“ oder die Conversions liefert, die das Unternehmen anstrebt. Einigkeit besteht darin, dass sie reif für Veränderungen ist. Es ist Zeit für eine Überarbeitung der Website.

Überarbeitung der Website für ein Automobilunternehmen

Es ist wichtig zu erwähnen, dass es sich bei dieser Fallstudie zum Redesign einer Automobil-Website nicht um ein offizielles, in Auftrag gegebenes Redesign handelt. Ich habe keine Insider-Informationen über das Unternehmen, seine digitale Strategie oder die Automobilindustrie insgesamt. Ich verwende die Automobilindustrie einfach als Testfall für eine Fallstudie zum Redesign einer Website.

In dieser Fallstudie gehen wir durch den Website-Redesign-Prozess für die kroatische Automobilmarke Rimac Automobili. Rimac ist eine Marke, die mit einem einfachen Autokonzept begann und sich seitdem zu einem großen Hersteller von Komponenten entwickelt hat. Wie viele Startups begann das Unternehmen mit einer Idee, die sich schließlich zu etwas anderem entwickelte; Diese Erweiterung wirkte sich auf die Website-Struktur aus, und der gesamte Benutzerfokus änderte sich. Die Marktnachfrage führte das Unternehmen in eine andere Richtung, sodass sich auch der Fokus der Website verlagern musste.

Es gibt viele verschiedene Aspekte und Blickwinkel, die berücksichtigt werden müssen, um eine großartige Lösung für das Website-Design zu erreichen. Trotz der Tatsache, dass der vorherige Webdesigner möglicherweise nicht über die Ressourcen oder genug Zeit für UX-Recherche, Wireframing, Prototyping und Benutzertests verfügte, können selbst die kleinsten frühen Designentscheidungen von Bedeutung sein, wenn es um die Gesamtqualität eines Designs geht negative Auswirkungen und eine suboptimale Website-Qualität führen letztendlich in zwei oder drei Jahren zu einer Neugestaltung der Website. Das Ergebnis davon ist, dass Kunden auf lange Sicht mehr für eine Website bezahlen, als ihnen bewusst ist. Eine gut definierte Inhaltsstrategie und Informationsarchitektur ist entscheidend, wenn es um das Design neuer Websites geht.

Beim Entwerfen großer Unternehmenswebsites, Nachrichtenportale und anderer inhaltsintensiver Websites bin ich ein großer Fan von Atomic Design, einem flexiblen Designsystem, bei dem es darum geht, alle UI-Komponenten zu erstellen, die für mehrere Bildschirme und unvorhergesehene Situationen am Anfang funktionieren eines Projekts. Auch wenn diese spezielle Fallstudie nicht für ein großes Nachrichtenportal gedacht ist, wird es den Prozess dennoch viel einfacher machen, wenn eine Designbibliothek mit atomaren Designelementen (ein Satz sorgfältig durchdachter und klar definierter Designkomponenten) eingerichtet wird, mit der gearbeitet werden kann später.

Erst nachdem die Website über die geeignete Inhaltsstrategie und Informationsarchitektur verfügt, sollte sich der Fokus auf die Benutzererfahrung verlagern. Ohne die richtige Website-Struktur hat das Design der Benutzererfahrung keine Wirkung. Vielleicht sieht die Website auf den ersten Blick gut aus und funktioniert gut, aber wenn nicht genug Flexibilität eingebaut ist, ist es unvermeidlich, dass das Unternehmen irgendwann über eine Neugestaltung der Website nachdenken muss.

Warum die Website dieses Automobilunternehmens neu gestalten?

Rimac Automobili expandiert und laut offiziellen Angaben ist bereits ein neues Konzeptauto namens „Concept_One“ in Produktion. Zum Zeitpunkt dieser nicht in Auftrag gegebenen Neugestaltung der Website zeigte ihre Website nur ein Auto, den „C_Two“. Es gab keine visuelle Vielfalt – die Website wurde aus zwei Vorlagen erstellt, sodass jede Seite sehr ähnlich aussah. Das Design konzentrierte sich auf große, attraktive Bilder des Autos ohne viel mehr, um die Qualität des C_Two -Autos zu veranschaulichen – wesentliche Informationen, die erforderlich sind, um Website-Besucher zu einer Kaufentscheidung zu führen.

Wie das Sprichwort sagt: „Für den ersten Eindruck gibt es keine zweite Chance.“ Es ist entscheidend, die Wirkung eines großartigen Designs zu nutzen, um Besucher (die in diesem Fall hauptsächlich Enthusiasten von Hochleistungsautos wären) davon zu überzeugen, ein Auto zu kaufen, das fast eine Million (USD) kostet. Solche High-End-Websites müssen einen unglaublich hohen Standard erfüllen. Sie müssen ein Gefühl für Qualität und Charisma ausstrahlen und ein hohes Maß an Verkaufstalent sowie einen überzeugenden Stil bieten.

Großartiges Website-Design muss sich in einem Meer ähnlicher Websites abheben

Ein großes Problem in der Automobilindustrie ist, dass die meisten Websites in diesem Bereich tendenziell gleich aussehen. Abgesehen von unterschiedlichen Farbschemata und Heldenbildern scheint es fast so, als würden sie dieselbe Website-Vorlage verwenden.

Es gibt viele Faktoren hinter den Designentscheidungen eines Automobilunternehmens, aber es muss eine klare Unterscheidung zwischen einem 1-Million-Dollar- und einem 25.000-Dollar-Auto und der Art und Weise, wie sie präsentiert werden, getroffen werden.

Im High-End-Automobilbereich haben Ferrari, Lamborghini und Aston Martin übermäßig einfache, typische Unternehmenswebsites, die (meiner Meinung nach) nicht wirklich eine großartige Benutzererfahrung bieten.

Der mittlere Verbraucherbereich (Volkswagen, Toyota, Peugeot usw.) hat eine sehr ähnliche Website-Inhaltsstruktur wie die oben genannten High-End-Beispiele. Der größte Unterschied zwischen den High-End- und Mittelklasse-Automobilmarken ist der Preis – daher würde man erwarten, dass Rimac mit seinen High-End-Autos eine hervorragende Website hat, um diesen Unterschied widerzuspiegeln und ihre teure Marke zu präsentieren.

Die Kundenerwartungen sind hoch, wenn sie diese extrem teuren Automarken-Websites besuchen; es ist eine große finanzielle Verpflichtung und ganz natürlich wollen sie sicher sein, dass sie das beste Auto bekommen, das sie für ihr Geld kaufen können.

Warum ist ein Rimac besser als ein Toyota? Wenn man sich ihre Websites ansieht, gibt es keinen großen Unterschied zwischen diesen beiden sehr unterschiedlichen Marken. Sollte sich dies nicht an der Qualität ihrer Website ablesen lassen?

Ansprache von High-End-Autokäufern mit großartigem Website-Design

Jede Website muss ihre Benutzer berücksichtigen. Wer ist die Zielgruppe für diese Art von Auto? Was suchen sie?

Die Autos von Rimac kosten rund 850.000 US-Dollar, und es werden nur wenige hergestellt, was sie für das Label „Limited Edition“ qualifiziert. Obwohl wir nicht genau bestimmen können, welche Art von Kunden am Kauf dieser Autos interessiert sind, können wir davon ausgehen, dass die meisten Kunden aus der wohlhabenden Elite stammen werden. Spricht die Website von Rimac diese Kunden effektiv an?

Analyse der Informationsarchitektur

Auf unserer Beispiel-Website konnten wir sehen, dass das erste Navigationselement „Concept_One“ war (damals das einzige Produkt des Unternehmens). Die eigentliche Website wurde inzwischen aktualisiert. Der zweite Navigationspunkt ist die Entwicklung des Unternehmens, wie das Auto produziert wurde, während der dritte Punkt die Produkte und Dienstleistungen des Unternehmens sind. Der vierte Navigationspunkt ist ein weiteres Produkt des Unternehmens (Elektrofahrräder von Greyp). Die letzten beiden Einträge sind „Presse“ mit Pressemitteilungen und „Blog“, die beide nicht besonders nützlich sind, da die meisten ihrer Nachrichten in sozialen Netzwerken veröffentlicht wurden.

Ein weiteres Problem war, dass der Karrierelink als sekundärer, weniger wichtiger Navigationspunkt ausgeblendet wurde und angesichts der enormen Expansion des Unternehmens eine wichtige Angelegenheit darstellte. Wenn wir den Benutzer als Mittelpunkt der Unternehmensbelange betrachten, werden wir feststellen, dass es auf den meisten Unternehmenswebsites (typische Ausnahmen sind Unternehmens-/extrem große Websites) sehr wichtig ist, einen prominenten „Karriere“-Link oder CTA zu haben.

Der Website-Redesign-Prozess

Homepage Hero Image vorher und nachher

Ursprünglich war die Absicht, eine dunklere, leistungsstärkere Version des Autos zu schaffen. Ich habe einige Bilder des Concept_One -Autos online gefunden und mit etwas „Photoshop-Magie“ das erste Heldenbild für die Homepage erstellt. Die nächste Idee war eine Animation, die das Auto langsam enthüllt, zuerst den Hintergrund, dann einen Umriss des Autos, gefolgt von einem vollständig gerenderten Bild.

Das Homepage-Design

Für die Homepage bestand das Konzept darin, zwei visuelle Hauptbereiche zu definieren: die Top-Navigation und das Auto-Heldenbild. Das ist es. Um es minimalistisch und dennoch auffällig zu machen, wurde alles Unnötige entfernt. Auf einen Blick ist alles Wichtige sichtbar – alles andere wurde auf Unterseiten innerhalb der Seite verschoben.

Inhaltsstrategie und -design

Bei solchen Website-Überarbeitungsprojekten ist es wichtig, auch den Inhalt zu gestalten, nicht nur die Struktur der Website und die visuelle Ästhetik. Da es sich um ein nicht in Auftrag gegebenes Website-Redesign handelt, bietet es mehr Freiheit zum Experimentieren sowie eine ästhetische Flexibilität, bei der die volle Möglichkeit besteht, unsere eigenen Designentscheidungen zu treffen.

Der Prozess ist einfach:

1. Bereiten Sie den Haupttext vor, der auf der Website erscheinen wird.
2. Kommunizieren Sie einige Designelemente – z. B. auffällige Details zu Beschleunigung, Leistung und Höchstgeschwindigkeit – über Symbole oder interaktive Animationen.

Dadurch werden ergänzende Wörter in der Benutzeroberfläche eingespart und die Aufmerksamkeit auf Bereiche gelenkt, die für Website-Besucher wichtiger sind.

Neugestaltung der Website-Navigation

Die Navigationsstruktur der Website ist nun basierend auf einer Wichtigkeitshierarchie neu geordnet. Wir haben Fahrzeuge als erstes Dropdown-Menü in der Navigation, was dem Design Flexibilität verleiht, da es dem Unternehmen ermöglicht, in Zukunft weitere Automodelle hinzuzufügen.

Um einen sofortigen Zugriff auf die sekundäre Produktseite von der Homepage aus zu ermöglichen, wurde entschieden, dass aus Effizienzgründen anstelle der Erstellung einer weiteren Produktlistenseite (auf einer anderen Webseite ) Produkte und ihre Unterkategorien als Dropdown-Bereich in die Homepage integriert und zu einem Teil davon gemacht werden können die Navigation. Das folgende Design zeigt verschiedene Produkte, die als Symbole auf der Homepage dargestellt werden, wenn Besucher in der Navigation auf Produkte klicken. Für die 3D-Produktrenderings, die die zweite Ebene unter Products darstellen, würde ich Three.js, WebGL, Canvas und Greensock empfehlen, da es sich um bekannte, standardisierte Tools handelt.

Sekundärseiten innerhalb des Website-Redesigns

Im Gegensatz zur Homepage verwenden Sekundärseiten wie die About- und Service- Seiten ein anderes, eher Z-gemustertes Raster. Die Absicht des unterschiedlichen Rasterlayouts besteht darin, den Besuchern beim Durchsuchen dieser Seiten eine interessantere und dynamischere Umgebung zu bieten.

Zentrale Idee ist nach wie vor visueller Minimalismus mit möglichst wenig Text. Die Leute besuchen diese Art von Auto-Websites nicht, um viel Text zu lesen, sondern um schnell und visuell Informationen zu erhalten. Dies war der Gedanke hinter großen, fetten Schriftarten auf Seitentiteln und der Verwendung verschiedener Schriftstile.

Es ist wichtig zu beachten, dass sich diese Art der Neugestaltung der Website einer „Unternehmensbroschüre“ von einer Neugestaltung der Dienstleistung unterscheidet. Bei einer „Firmenbroschüren“-Website geht es eher um die Vermarktung von Produkten. Serviceorientierte Website-Redesigns sind eher darauf ausgerichtet, Klicks in Conversions und letztendlich in Gewinn umzuwandeln.

Fazit

Es gibt mehrere andere Design-Blog-Artikel, die empfehlen, warum es eine gute Idee für Designer ist, sich nebenbei an nicht in Auftrag gegebenen Designprojekten zu beteiligen. Wenn Sie ein wirklich cooles Projekt entwerfen möchten, wählen Sie eine Idee aus – das kann eine Website, eine App oder ein SaaS-Unternehmensprodukt sein – und lösen Sie ein Designproblem dafür.

Dribbble ist voll von unaufgeforderten konzeptionellen Redesign-Projekten, bei denen Digitaldesigner die Möglichkeit haben, ihre Designkünste zu zeigen. Abgesehen davon, dass Sie ein cooles Design erhalten, das der Welt eine kreative Lösung präsentiert, zeigt die Arbeit an einem „tatsächlichen“ Produktproblem potenziellen Unternehmen und Kunden, wie Sie denken, Ihren Prozess und Ihr Fachwissen.

In meinem Fall war es eine tolle Übung, sich mit einer High-End-Automotive-Website auseinanderzusetzen, da es gerade in diesem Bereich wichtig ist, dass das Design von Websites einen außergewöhnlich hohen Standard erfüllt.

Aber ein Wort der Vorsicht: Bevor Sie mit dem Design beginnen, sollten Sie zukunftsorientiert sein und sich überlegen, wie eine bestimmte Website in drei Jahren aussehen muss, nicht nur aus ästhetischer, sondern auch aus inhaltlicher Sicht. Funktion und Struktur. Es ist entscheidend, dass die eingebaute Flexibilität eine ernsthafte Designüberlegung ist. Es ist einfacher, effizienter und weit weniger schmerzhaft, kleine Anpassungen vorzunehmen, um zukünftigen Anforderungen gerecht zu werden, wenn die Website oder Unterseiten funktionieren und skalierbar sind.

Manchmal ist es wirklich schwierig, einen potenziellen Kunden davon zu überzeugen, eine Website zu überarbeiten. Oft zögern Kunden, sich zu engagieren, weil ihnen Ressourcen, Geld oder Zeit fehlen. Nichtsdestotrotz ist ein unaufgefordertes Website-Redesign eine großartige Möglichkeit, Ihren Website-Redesign-Prozess der Welt zu präsentieren. Und wer weiß? Es ist durchaus möglich, dass Ihr Website-Redesign einen widerwilligen Kunden so beeindruckt, dass er grünes Licht für ein „echtes“ Projekt gibt, bei dem der Designer als zusätzlichen Bonus bezahlt wird!

• • •

Weiterführende Literatur im Toptal Design Blog:

• Die Grundlagen des Website-Redesigns – Eine Fallstudie
• Der wahre ROI von UX: B2B-Redesign-Fallstudien
• IKEA aus der Schachtel nehmen und für 1,6 Milliarden Nutzer neu gestalten
• Lassen Sie uns Facebook neu gestalten: 10 Inspirationen für den Einstieg
• Wie CrunchBase gestaltet sein sollte