Ford Online Accessory Catalogue

Der neue Ford Online Accessory Catalogue (OAC) ist online: http://www.ford-zubehoer.de/

Es war ein großer und einjähriger Prozess und ich möchte an dieser Stelle gerne den Workflow
aufzeigen, den ich für die Umsetzung eines solch großen Projektes verwendet habe.

Im Generellen habe ich folgenden Prozess zur Umsetzung verwendet:

Services:

Conception
Web Design
UX Design

Zudem empfehle ich für digitale Umsetzungen einen agilen Prozess zu wählen, mit klar definierten Sprints um kosten- und zeit-intensive Schleifen zu vermeiden und einen guten Workflow zu gewährleisten.

Phase 1: Briefing/Konzept:

ReDesign des Ford OAC: Die Aufgabe war, den bisherigen Ford OAC Online Auftritt neu zu designen unter Verwendung des neuen Styleguides von Ford.

Wichtige Faktoren waren in folgendem: Einfach Zugänglichkeit, einfache und intuitive Nutzung des Katalogs, wenige klick-raten sowie eine hohe Conversion Rate. Kurzum eine gute Nutzer Erfahrung schaffen (User Experience).
Zunächst analysierte ich den bisherigen Online Auftritt. Daraus kristallisierten sich bereits einige Optimierungsbereiche heraus.
Angelehnt an erfolgreiche Shopsysteme wie beispielsweise Amazon oder Zalando soll es eine prominente und vereinfachte Suchfunktion geben. Zudem soll der  Aufbau der Artikel an erfolgreiche Shopsysteme angelehnt sein.
Den größten Umbau soll die Fahrzeug Auswahl bringen. Im bisherigen OAC musste permanent eine Fahrzeugauswahl stattfinden. Wenn der Nutzer einfach nur Artikel anschauen wollte, wurde er immerzu gezwungen, eine Fahrzeugauswahl vorzunehmen. In Form eines PopUps. Auf diese Funktion habe ich verzichtet um dem User einen einfacheren und besseren Einstieg zu gewährleisten und wir an diesem Punkt keine hohen Absprungraten der Nutzer haben.
Zudem sollten die Fahrzeuge, die Fahrzeugauswahl sowie die Artikel prominent angezeigt werden.
Die gesamte Umsetzung muss natürlich responsiv funktionieren. Diesbezüglich wird für drei breakpoints entwickelt, im Endeffekt für Mobile, Tablet und Desktop Anwendungen. Zumeist entwickle ich Mobile First, also von Mobil über Tablet zu desktop Auflösung:

Phase 2: Personas

Dedizierte Personas wurden nicht erstellt. Die Zielgruppe ist klar definiert: B2B Händler in den verschiedenen Länder. Aus Analytics haben wir die Problembereiche definiert, wo höhere Absprungraten zu verzeichnen sind und diese optimierungsbereiche mit ins Briefing übernommen (s.o.).
Zudem kann man in dieser Phase auch die User Story definieren. Diese beinhalten die Information: “Als <Rolle> möchte ich <Ziel/Wunsch>, um <Nutzen>”. In unserem Falle zum Beispiel könnte eine bzw. die User Story diese sein: “Als (B2B)Kunde möchte ich Zubehör Artikel von Ford möglichst schnell und einfach finden und diese über eine Händlersuche bestellen können”. Die User Stories sollten im Team als Diskussion dienen und mit Akzeptanzkriterien versehen werden. Die User Story wird aus Sicht des Benutzers definiert. Desweiteren kann man diese noch in eine dedizierteren User- oder Customer- Journey erweitern. In dieser wird der komplette Zyklus (User Flow) vom öffnen der Website bis zum Erreichen seines definierten Ziels visualisiert dargestellt. Die Customer Journey bezeichnet alle Berührungspunkte (Touchpoints) eines Nutzers/Konsumenten mit einer Marke, einem Produkt oder einer Dienstleistung.

Da es sich in unserem Falle um ein Re-Design des OACs von Ford handelt und uns Zielgruppen Analysen vorlagen, haben wir auf eine User Story sowie einer User Journey verzichtet.

Phase 3: Flow Chart/ Informationsarchitektur

Zunächst wurde auf Basis des Briefings bzw. Konzepts ein Flow Chart bzw. Informationsarchitektur erstellt um die Anzahl der gesamten Screen sowie die Verknüpfungen derer zu ermitteln.

Phase 4: Wireframe Erstellung

Auf Basis der Informationsarchitektur wurden dann Wireframes der einzelnen Screens erstellt. Die Wireframes habe ich mit dem Programm balsamiq erstellt.
Vorteil in der Erstellung von Wireframes ist meiner Meinung nach, dass man als Designer sich hier primär um die Grundstruktur und den Aufbau der Seite fokussiert und sich hier noch nicht in grafische Details “verliert”. An dieser Stelle kann man rapid testen, was vom User Interface und vom Layout funktioniert und sich gut anfühlt. Hauptaugenmerk ist der Aufbau und Anzeige der Informationen (Content), die auf jeder Seite angezeigt werden soll. Hier kann auch bereits vom Kunden überprüft werden, ob man den Informationsgehalt noch anpassen oder gegebenenfalls noch kürzen muss oder ob dieser auf eine andere Seite ausgelagert werden müsste. Statt balsamiq kann man an dieser Stelle auch alternativ mit anderer Software wie beispielsweise Sketch, InVision etc. arbeiten oder eben auch ganz einfach mit Papier Prototypen. Diese eignen sich ebenfalls um schnell Änderungen und Anpassungen vorzunehmen, optimalerweise in Zusammenarbeit (workshop) mit dem Kunden und/oder zwecks Zielgruppen testing. Da ich einzelne UI Elemente in Module angelegt habe, konnte ich diese auch für die anderen Endgeräte wie Tablet oder Mobil gut und einfacher anpassen. Wichtig ist, bereits in dieser Phase die Responsiveness zu beachten und idealerweise bereits für die einzelnen breakpoints Wireframes zu entwickeln.
Hier ist exemplarisch ein Wireframe Beispiel der Landing Page (desktop):

Aus den einzelnen Wireframe Screens wurde ein Click-Dummy erstellt, indem die einzelnen Screens miteinander verlinkt wurden.  Als Endformat wurde aus balsamiq ein interaktives PDF generiert, mit verknüpften Verlinkungen wie Buttons, Links, etc.. Somit war es für uns intern und für den Kunden bereits frühzeitig möglich, die Interaktionsstruktur zu testen. Insbesondere aber auch, um wichtige und essentielle Usability und UX Faktoren zu überprüfen. Zum Beispiel, ob sich die Navigationsstruktur intuitiv und gut anfühlt. Ist diese eingängig sowie logisch und einfach zu verstehen. Hat der Nutzer die Kontrolle und weiß er, wie er zu seinen Zielen gelangt und wo er sich (jederzeit) befindet. Enden Verknüpfungen in Sackgassen (DeadEnds), hat er alle Informationen, die er benötigt. Macht die Nutzung des Prototypes bereits Spaß? Sind bereits wichtige Faktoren von UX – Experience Design, insbesondere von der Usability her berücksichtigt und zu erkennen? Das Look and Feel wird dann hauptsächlich in der Design Phase anvisiert.

Phase 5: Die Umsetzung, eine iterative Phase:
Design/StyleTiles

Nachdem die Wireframe Phase durch den Kunden abgenommen worden ist, geht es zur Umsetzung. Dies ist ein sehr iterativer Prozess, indem ganze Screens oder nur bestimmte Elemente zunächst grafisch umgesetzt, programmiert und dann getestet werden. Dies sorgt dafür, dass gewisse Anpassungen oder Korrekturen schnell umgesetzt werden können und idealerweise keine größeren Schleifen entstehen, die zeit- und kostenintensiv werden können. Einige UI Elemente sind wie bereits in den Wireframes als Module aufgebaut. Als gutes Modell dient hier auch das Atomic Design Modell von -> Brad Frost. Für die grafische Ausarbeitung werden die Wireframes als Basis genutzt. Zunächst wird ein Framework mit einem 12-grid System aufgebaut um die Umsetzung der Screens pixel genau vorzunehmen. Zudem vereinfacht und dient dies der Programmierung für die technische Umsetzung. Unter Verwendung der Ford CI und dessen Styleguides habe ich für die grafische Umsetzung Photoshop verwendet und die einzelnen Screens als Zeichenflächen angelegt. Auf Grund der hohen Anzahl an Screens habe ich diese inhaltlich Kategorisiert und in einzelne psds aufgeteilt.  Dasselbe habe ich für die anderen beiden breakpoint Layouts (mobil und tablet) gemacht.
Hier die Umsetzung vom Wireframe zum visuellen Look:

und die breakpoints für mobile und tablet:

Mobile Ansicht

Tablet Ansicht

Im selben Zuge habe ich zudem den Style Tyle angefertigt, so gesehen einen digitalen Styleguide, der genau Aufzeigt, welche Elemente für die Screens verwendet wurden, wie dessen Ausmessungen sind, welche Status es gibt, wie diese gegebenenfalls animiert sind etc.

Prototyp/Programmierung

Danach habe ich auf Basis des pdf Click-Dummys und der Screen Designs einen Prototyp mit proto.io erstellt, um der Programmierung, sowie dem Kunden noch besser aufzuzeigen, wie sich die verschiedenen Responsive Layouts (desktop, Tablet, mobile) verhalten. Insbesondere für die Mobile Ansicht eignet sich hier solch einen Prototypen, da man dank proto.io auch direkt auf den Endgeräten diesen testen kann.

Testen

Sukzessive haben wir die einzelnen Seiten programmiert und diese intensiv getestet. Vor allem wurde die Seiten vom Verhalten her auf Webbrowser wie Google Chrome, Mozilla Firefox, Microsoft Edge und Internet Explorer getestet, sowie verschiedenste Tablet und Mobile Endgeräte.
Um die Webseite auf verschiedenste Auflösungen zu testen, lohnt sich ein Blick auf die Webseite Screenfly.

Launch

Nach ein paar kleinen Korrekturen und Anpassungen wurde die Testumgebung auf dem Ford Server hochgeladen und die Webseite live geschaltet und kann unter
http://www.ford-zubehoer.de/
begutachtet werden. In den nächsten Monaten werden auch weitere Märkte freigeschaltet, nachdem für diese die Lokalisierungen vorgenommen worden sind, sowie dessen Inhalte freigegeben und eingebunden sind.
Nach solch großen aber auch kleinen Projekten mache ich gerne ein Post Mortem, im Endeffekt einen Rückblick auf das Projekt um zu validieren, was gut und vor allem was weniger gut funktioniert hat um solche Fehler in Zukunft zu vermeiden.
Alles in allem kann man sagen, dass der Ford OAC erfolgreich in Quality, Time & Budget umgesetzt wurde, was gut im Team und natürlich gut beim Kunden aufgenommen wurde.