Neues Corporate Design, neue User Experience
Ein klassischer Auftrag für hmmh: Sportscheck hatte sich ein neues Corporate Design entwerfen lassen und bat uns nun, die für Print gestalteten Design-Basics in ein responsives Frontend für ihren Webshop zu übersetzen. Entstanden ist daraus nicht nur das Shop-Frontend (inklusive Designbibliothek und Framework für weitere Sportscheck-Projekte), sondern eine modellhafte Zusammenarbeit in integrierten Teams über zwei Standorte.
Print Design goes responsive
„Das neue Layout soll das Erlebnis Sport digital transportieren, zudem unsere Kunden emotional und direkt ansprechen“, so Gregor Frey, Abteilungsleiter Webshop Entwicklung bei SportScheck. Und selbstverständlich: Auf jedem Gerät sollen Kunden perfekt durchs Sortiment und zum Kauf geführt werden. Das Shopdesign sollte außerdem mit einem Living Styleguide führend für alle weiteren Onlineprojekte mit dem neuen CD werden.
Bestehende Features, neue Ziele
Das alles musste geschehen, ohne Backend-Features in der bestehenden Intershop-Installation zu verändern oder hinzuzufügen. Eine wichtige Randbedingung für das Design, wenn man – wie wir – darunter versteht »how it works«, also wie es funktioniert und nicht nur, wie es aussieht. Zu den besonderen Herausforderungen für den Frontend-Auftrag zählten ein neues Navigationskonzept, mehr Möglichkeiten zur Produkt- und Themenpromotion und eine optimierte Checkout-Strecke.
-
WebPack -
Gulp -
Patternlab
Ihr neues Corporate Design bedeutete für Sportscheck nicht nur ein anderes Aussehen, sondern war auch Ausdruck einer neuen Kultur: Aktiver, agiler, effizenter und kundenzentrierter. Mit dem Relaunch sollte zum ersten Mal auch ein Online-Projekt agil durchgeführt werden. Der richtige Partner dafür: hmmh.
Beim Pitch hatte hmmh fachlich überzeugt, nun konnten wir auch zeigen, wie wir zusammen mit dem Kunden ein herausragendes Ergebnis erschaffen. Code und Design sollten in Co-Creation entstehen, denn daraus resultieren nach unserer Erfahrung Ergebnisse, die die Kundenbedürfnisse sehr viel genauer erfüllen als anders geschaffene Frontends.
Schnellstart ins agile Teamworking
Erfahrene hmmh-Teammitglieder führten das Sportscheck-Team in einer kurzen und intensiven Onboarding-Phase durch Methoden und Begriffe des Scrum: Planning, Sprint, Review, Retro; Product Owner, Stakeholder, Scrum Master – gemeinsam übte das Team an Hand eines Probeprojekts alle Schritte und Rollen der agilen Arbeit ein, bevor es an das konkrete Projekt ging. Nicht nur die Marshmallow-Challenge war für viele eine neue Erfahrung.
Richtig ist, was funktioniert: Früher zu Ergebnissen mit Lean Design
Der Vorteil der agilen Arbeit liegt vor allem darin, direkt überprüfbare Ergebnisse zu erzeugen und schnell reagieren zu können. Auf Veränderungen im Projekt wie auch auf das Feedback von Nutzenden. Damit bei aller Beweglichkeit das Ziel immer im Auge blieb, legte sich das Team zuerst auf die Grundlagen des Projektes fest: Allgemeine, wie die Erfolgskriterien aus Sicht der Stakeholder, sowie konkrete – wie den Kriterien, wann eine Aufgabe komplett beschrieben und wann sie fertig ist.
Fertig hieß dabei: in Tests überprüfbar. Weil das Team nach kurzer Skizzenphase gleich in Code designte, konnten Arbeitsergebnisse immer parallel in realistischer Umgebung an Nutzern getestet werden, sobald sie grundsätzlich funktionierten. Wiederholte kleine Veränderungen – inkrementelle Iterationen – beruhten dann auf dem Feedback aus den Tests und verbesserten auf validierte Weise das Produkt.
Frontendentwicklung: Erfolgreicher mit einem Team, das sich gemeinsam entwickelt
Im Projekt entstand nach dem Prinzip des „Atomic Design“ eine hierarchisch aufgebaute Bibliothek von Codemodulen. Das Werkzeug für die Bibliothek: Pattern Lab.
Von Anfang an bildeten hmmh und Sportscheck für das Projekt ein gemeinsames Team, das abwechselnd in Unterhaching und Bremen arbeitete. Der gewünschte Effekt trat unmittelbar ein: Im schnellen informellen Austausch lernten Spezialisten auf beiden Seiten den Blick über den Tellerrand, erwarben neue Skills und wurden dadurch auch auf ihren eigenen Gebieten ständig besser – ganz zum Nutzen des Projektes. Was wir noch gelernt haben: Wie gut Nordlichter und Süddeutsche zusammen arbeiten können.
Und auch außerhalb der Arbeit konnten wir feststellen, dass „Mass“ und „Knipp“ durchaus kompatibel sind. Über Fußball wurde allerdings immer nur kurz gesprochen.
Weitermachen, wenn es am schönsten ist: Contentstrategie-Workshop nach dem Launch
So gründlich man auch testet: Wie ein Shop sich wirklich bewährt, zeigt sich erst nach dem Livegang. Mit Nutzerdaten und den Erfahrungen der Redakteure und Redakteurinnen im laufenden Betrieb ausgerüstet, traf sich das Frontend-Team mit den Shop-Managern, um gemeinsam die Pflege der Templates zu optimieren. Entwickelt wurden neue Seitentypen und neue oder optimierte Module. In enger Zusammenarbeit verbesserte das Team sowohl die Contentbefüllung und -pflege wie auch das Shoperlebnis für Kundinnen und Kunden auf der Suche nach funktionaler und modischer Sportbekleidung.
Das Ergebnis: bessere Nutzerführung, emotionalere Ansprache, mehr Möglichkeiten für die Redaktion
Mit dem Relaunch erhielt der Sportscheck-Shop mehr als nur ein neues Gesicht. Auf allen Ebenen erleben Besucherinnen und Besucher einen neuen Shop: Die Redaktion kann mit den neu geschaffenen Modulen die Sportscheck-Bildwelt angemessen präsentieren und so die emotionale Seite des Sport stärker nach vorn stellen. Aktuelle Themen bekommen mehr Raum, Besucherinnen und Besucher finden intuitiver durch das Sortiment und werden besser informiert. Mikrointeraktionen an vielen Stellen des Interface zeigen die Liebe des Teams fürs Detail – sie verbessern außerdem die Usability, ohne sich negativ auf die Performance auszuwirken. Und der Checkout geht nun noch flüssiger.
Lassen Sie sich beraten
Kontaktformular
Schicken Sie uns einfach Ihre Kontaktdaten und wir setzen uns mit Ihnen in Verbindung.
Ihre Ansprechpartner
Sie haben Interesse oder offene Fragen? Wir freuen uns, von Ihnen zu hören.
Kerstin Seidel
Unit Director