Designing the world’s watch market

Bei unüberschaubar vielen Seiten, verschiedenen Nutzertypen und der Unterstützung von 24 Sprachen gestaltet sich die Kontrolle über Konsistenz und eine einheitliche User Experience weitaus schwieriger als bei einem Webprojekt für den Friseursalon um die Ecke. Keines unserer Nutzersegmente verhält sich gleich, teilweise haben wir sogar gegensätzliche Anforderungen. Langfristig möchten wir die Erkenntnisse daraus nutzen, um unsere Interfaces und Produkte noch individueller und gezielter zu gestalten.

Wie wir all diese Punkte in unsere Arbeit integrieren und welche Workflows und Tools uns dabei helfen, erfahrt ihr in diesem Beitrag.

Component Libraries

Das UX-Team arbeitet fast ausschließlich mit dem Mac-exklusiven Designtool Sketch. Um die Arbeitsabläufe zu vereinfachen und eine konsistente Darstellung zu gewährleisten, haben wir uns eigene Libraries erarbeitet, mit denen wir Komponenten schnell in unsere Projekte einbauen können. Darunter fallen beispielsweise CI-Farbwerte, definierte Schriftklassen aber auch Elemente wie Buttons, Formularfelder oder Icons, die einmalig definiert, erstellt und in der Library hinterlegt werden, um dann in den Projekten wiederverwendet werden zu können.

Kommt es zu einer Änderung an einer Library-Komponente, werden alle Instanzen überschrieben, die UX-Kollegen informiert und die Designs dementsprechend aktualisiert. Neben den bereits genannten Vorteilen bietet die Library auch gerade für neue Kollegen einen guten Überblick über das „Komponenten-Spektrum“ und die Namensgebung.

Designing for a global audience

Sehr viele Sprachen zu unterstützen bedeutet, dass unsere Layouts und Designs in der Lage sein müssen auf starke Textlängen-Unterschiede zu reagieren. Wir müssen unsere Komponenten also im Vorfeld schon so aufbauen, dass sie später dynamisch wachsen und möglichst ohne fixe Angaben auskommen können. Darüber hinaus bedeutet das aber auch, dass wir keine textlichen Elemente in Bilder oder Icons integrieren sollten, da diese dann nicht mehr auf die vom Nutzer eingestellte Sprache reagieren können.

Obwohl das bereits mehr ist als viele andere tun, befinden wir uns damit erst am Anfang des Themas „localization / globalization“. Neben der Möglichkeit, die Plattform in verschiedenen Sprachen nutzen zu können, möchten wir uns im UX-Team zukünftig auch intensiver mit den Unterschieden im Verständnis und der Wirkung von unserem Design auseinandersetzen. Erste Maßnahmen wurden bereits getroffen: Beispielsweise wurde exklusiv für www.chrono24.jp eine andere Schriftart festgelegt, nachdem die Nutzer gemeldet hatten, dass die japanischen Schriftzeichen in unserer CI-Schrift nur sehr schwer lesbar sind.

Aber auch bei Icons und Farben gibt es von Sprache zu Sprache und Kultur zu Kultur unterschiedliche Assoziationen.

Online Styleguide

Zusammen mit der Technik haben wir unseren eigenen, individuellen Online-Styleguide ins Leben gerufen. Im Vergleich zu branchentypischen Tools haben wir mit unserer Marke Eigenbau den Vorteil, dass alle Inhalte des Styleguides mit dem Code der Live-Plattform zusammenhängen. Gibt es also eine Änderung an einem Element, wird diese sowohl auf der Plattform als auch im Styleguide sichtbar. Damit eignet sich unser Styleguide nicht nur als Informationsquelle für das Unternehmen, sondern gleichzeitig auch als sehr gute Test- und Kontrollinstanz.

Die Vorteile eines übergreifenden Styleguides gewinnt durch unser Wachstum immer mehr an Wichtigkeit. Wir alle möchten Mehrfacharbeit vermeiden und unseren Nutzern, egal an welchen Touchpoints, ein einheitliches Nutzererlebnis bei Chrono24 bieten.

Nach und nach werden wir aber auch weniger technische Inhalte zum Styleguide hinzufügen. In Arbeit befinden sich bereits Themenpunkte wie eine Definition unserer Bildsprache und der verstärkte Fokus auf UX-Design auf textlicher Ebene.

The big picture

Seit Anbeginn der Zeit stehen wir vor dem gleichen Problem: Wir wollen unser Design mit einem treffenden Bild untermalen, um die richtigen Emotionen bei unseren Nutzern zu wecken. Aber wir haben keins. Und auch wiederholtes, stundenlanges Durchforsten von Stockphoto-Material hilft uns nicht weiter. Um dorthin zu kommen, wo wir sein möchten, können wir nicht ausschließlich Collagen und Composings erstellen – wir müssen eigenes Bildmaterial kreieren.

An dem Punkt kommen Themen wie Bildsprache, Bildrechte, Bildverwaltung und natürlich auch die Erstellung von Bildmaterial ins Spiel. Auch wenn sich einige der Punkte noch in der Entstehungsphase befinden, können wir bereits heute ein Fotostudio inkl. Ausrüstung und einer Vielzahl an Accessoires unser Eigen nennen. Die ersten Ergebnisse eigener Shootings sind bereits auf der Plattform sichtbar und werten derzeit unsere Landingpages, Marken- und Modellseiten sowie die Startseite auf.

Im Zuge dessen sind wir parallel auch mit dem Aufbau und dem Einführen eines Bildverwaltungs-Tools beschäftigt. Wir möchten den Mitarbeiten, die Bildmaterial für ihre Projekte benötigen eine zentrale Stelle bieten, an der Sie über einfache Schlagworte das passende Bild finden können.