LeetDesk

E-Commerce

Beschreibung

Wir haben die E-Commerce-Website für LeetDesk neu gestaltet, um begeisterten Gamern ein AAA-Erlebnis sowie der Marke ein Backend zu bieten, das einfacher zu verwalten ist.

Links

Shop Leetdesk

Leistungen

  • Branding
  • Design
  • Development
  • Maintenance

Technologien

  • Next.js
  • Prismic
  • Shopify
  • Vercel
  • Tailwind
Die neue Homepage von LeetDesk
Die alte Homepage von LeetDesk

Mission

LeetDesk hat sich an uns gewandt, um ihre selbsterstellte WordPress- und WooCommerce-Website neu zu bauen. Unsere Mission war es, die Konversionsraten zu erhöhen und die Website so zu optimieren, damit sie schneller und reibungsloser läuft. LeetDesk wollte auch eine Content Management Lösung, welche einfacher zu benutzen ist, ohne, dass dafür Programmierkenntnisse erforderlich sind oder das Layout zerschossen werden kann. 

Branding

Angefangen haben wir mit einem Branding-Workshop, indem wir mehr über die Marke LeetDesk erfahren haben. Hier wurde die Zielgruppe näher bestimmt und ein Weg gefunden, dieser Zielgruppe mehr Wert und Engagement zu bieten.

Ergeben hat sich Folgendes: Die Zielgruppe von LeetDesk sind Hobbygamer, die ihr Gameplay mit den besten Peripheriegeräten, Hardware und Gadgets verbessern möchten. Diese Kunden identifizieren sich selbst als Hobbygamer mit normalen Jobs. Auch wenn sie selbst keine „Profis“ sind, wollen sie trotzdem die Pro-Experience.

Workshop Brand Check board

Mit diesem neuen Verständnis des Kundenstamms von LeetDesk entwickelten wir eine Branding-Richtlinie und einen User-Flow mit Wireframes zur Planung der Struktur der Website. Die Hauptseitenstruktur blieb dabei erhalten. Die neue interne Seiteninhaltsstruktur besitzt nun aber einen verbesserten Kundenfluss und markengerechtere Formulierungen.

Das LeetDesk Wireframe-Board

Design

Unsere Designer haben die Brand-Richtlinien und Wireframe-Slides dazu genutzt, ein individuelles Design mit professionellem, elegantem und futuristischem Look zu entwickeln. Dabei wurde eine ansprechendere, modernere Schriftart gewählt und ein zusammenhängenderes Design geschaffen, das Kunden durch den neuen, natürlicheren Fluss der Website führt.

Die charakteristische Kante des Leetdesk-Gaming-Schreibtischs findet sich als wiederkehrendes Designelement in Form von Lichtstreifen und Farbverlaufsrändern auf der gesamten Website wieder. Durch dieses bewusste Designelement bleibt der Kunde gedanklich während des surfen durch die Seiten beim Produkt. Außerdem erstellten wir eigens angefertigte Videos, Bilder und Icons, die der gesamten Website ein sauberes und konsistentes Erscheinungsbild verleihen.

LeetDesk Selector
LeetDesk Add-on-Selector

Development

Um der Website Topspeed und gute SEO zu verleihen, haben wir Next.js als Web-Framework und Shopify als E-Commerce-Plattform verwendet und diese über die Storefront-API integriert. Next.js und Edge Computing erkennen automatisch die Sprache, den Standort und die Währung des Nutzers. LeetDesk wünschte sich außerdem eine einfache Form der Inhaltsbearbeitung. Die Wahl fiel dabei auf Prismic. Jeder Text, jedes Bild und jedes Video kann dort einfach bearbeitet sowie neue Seiten oder Inhaltsblöcke hinzugefügt werden. Prismic unterstützt mehrere Sprachen, sodass das Team von LeetDesk Inhalte in verschiedenen Sprachen bereitstellen und bearbeiten kann.

Anschließend bekam das LeetDesk-Team eine Einführung, um sich mit diesen Technologien vertraut zu machen, und zu lernen, wie sich die Daten von den alten Diensten auf die neuen übertragen lassen.

LeetDesk Tech Stack

Um den LeetDesk auf einzigartige und ansprechende Weise darzustellen, kamen scrollbasierte Animationen zum Einsatz. Je mehr ein Kunde mit der Website interagiert, indem er die Seite herunterscrollt, desto mehr Informationen und Animationen werden angezeigt.

Außerdem besitzt die neue Website durch die Integration von Shopify-Apps und anderen Drittanbietermodulen nun unzählige neue Funktionen, wie beispielsweise:

  • Nutzerrezensionen
  • Serverseitiges GTM-Tracking
  • Affiliate-Marketing
  • 2D & 3D Konfigurator mit Speicherfunktion

Mit diesen Integrationen konnte ein effektives Bewertungssystem erstellt werden, durch das der Kunde den LeetDesk bei anderen Spielern in Aktion sehen und deren Meinungen erfahren kann. Stoppt ein Kunde den Anpassungsprozess seines LeetDesks im eigens angefertigten Konfigurator, kann er diese speichern, teilen und später über einen kurzen, übersichtlichen Link darauf zugreifen.

Bewertungssektion
Modul zum Speichern der LeetDesk-Konfiguration

Die spielerischen Neigungen des Kunden sprechen wir durch die Integration von Eastereggs in Form von interaktiven Games an, die wir auf der Website integriert haben. Gamer, die sich auf der Schnitzeljagd befinden, müssen hier aktiv nach den Minispielen suchen, diese GEWINNEN und damit Codes freischalten.

Wir können uns keinen besseren Anreiz vorstellen, mit der Seite zu interagieren, als eine Quest mit einem (kostenlosen!) Produkt. Viel Glück und happy hunting!