The Sika Experience – und was wir daraus gelernt haben

Gestern durften wir gemeinsam mit Melina Merkle von der Sika unser gemeinsames Projekt, die Sika Experience, auf der Social Media Conference in Hamburg vorstellen. (Der Vortrag wurde live und sehr schön Illustriert)

Sika Experience

 

Eigentlich startete das Projekt bereits 2009 als Jubiläumskampagne der Sika zum 100. Geburtstag. Doch wegen des grossen Erfolgs wurde der Kern der Idee bis heute weitergeführt. Und ganz nebenbei sollte es der Einstieg der Sika in die Sozialen Medien werden.

Unsere gemeinsamen Learnings aus dem Projekt möchten wir natürlich gerne auch hier vorstellen:

#1 Ohne Management Support kein Social Media Erfolg
Das Briefing und die Ansage kam in diesem Projekt von ganz oben: Der CEO höchstpersönlich hat sich kurz Zeit genommen und uns seine Zielsetzung mit auf dem Weg gegeben: “Wir möchten mit unseren zukünftigen Zielgruppen in den Dialog treten”. Mit dieser Ansage im Gepäck kam unser Projekt dann recht gut durch die vielen Gremien des Konzerns – und wurde in den vielen Ländergesellschaften ernst genommen.

#2 Social Media Aktivitäten leben vom Engagement und der Initiative von Einzelpersonen
Die Beteiligten Projektleiter und Verantwortlichen bei der Sika waren von Anfang an “Feuer und Flamme” für das Projekt und haben sich weit über das normale Mass für das Projekt engagiert. Sie hatten schlicht Lust, das Projekt zu treiben. Aus vergleichbaren Projekten haben wir gelernt, dass sich Social Media Projekte nur mit einem motivierten Team realisieren lassen. Mann kann sich gut vorstellen, dass sich Social Media Aktivitäten nur schlecht deligieren oder “aufs Auge” drücken lassen.

#3 Es gibt keine Weltsprache
Obwohl wir es mit Studenten und gut ausgebildeten Young Professionals zu tun hatten, mussten wir feststellen (auch durch direktes Feedback), dass sich viele User Informationen und Dialog in Ihrer Landessprache wünschen. Klar, eine fremde Sprache liest man noch ohne Probleme. Einen Dialog führt man dann wohl doch lieber in der Muttersprache…

#4 Ohne Incentives kein Engagement, intern wie extern
Oft haben wir Briefings auf dem Tisch, die davon ausgehen, dass sich ein “Dialog” oder eine “Aktivität” ergeben würde. Aus der Sika Experience und diversen anderen Projekten haben wir gelernt, dass das nicht passieren wird (Wenn man nicht gerade Nike oder Red Bull heisst). Dabei geht es nicht um Geld oder fette Preise. Aber die Frage “Warum sollte sich hier jemand engagieren?” braucht eine wirklich gute Antwort! Bei der Sika Experience lockten spannende Einblicke in einzigartige Projekte – die Teilnehmer waren heiss auf die trips und hellauf begeistert von Ihren Erlebnissen. Wie wir in anderen Projekten gelernt haben gilt dies übrigens auch für unternehmensinterne Aktivitäten, wie z.B. Unternehmensblogs. Schon das Gefühl, man würde durch das bloggen etwas für seine Karriere kann eine ausreichend grosse Motivation sein…

#5 Blogs schaffen Suchmaschinen-Relevanz für Ihre Themen
Bis zu 78% des Traffics, der von Suchmaschinen auf Unternehmenswebsites landet, basiert auf non-branded Keywords. Oder in anderen Worten: Kunden suchen (besonders im Industrie-Umfeld) meist nicht nach offiziellen Produktnamen, sondern nach Begriffen aus ihrem Problem- oder Lösungsfeld. Entsprechend wirkten auch die blogposts rund um die Lösungsfelder der Sika. Der Effekt: Zeitweilig hat der blog für wichtige Keywords bei google sogar besser gerankt als die offizielle Sika site…

#6 Dialog basiert auf guten Themen und echten Aktivitäten
Klingt banal, ist es aber nicht: Ohne die spannenden Projekte “im echten Leben” und die Erlebnisse der Teilnehmer hätte es nichts wertvolles gegeben, worüber sich die Zielgruppen unterhalten hätten – oder was es wert gewesen wäre, sich anzusehen. Das Foto eine Kommilitonen auf der Spitze eines Windkraftwerks ist schon mal ein like oder einen Kommentar wert.

Das Feedback der Zuhörer
Anscheinend stehen auch andere vor diesen Herausforderungen. Die Fragen aus dem Plenum beschäftigten sich z.B. mit der Gegenthese zu unserem 3. Learning “Es gibt keine Weltsprache”. Wie gehen wir denn mit einer vielsprachigen Social-Media Präsenz um? Gute Frage. Bei der blogging-Platform Conversations der ABB haben wir zunächst alle Sprachen zu einem buzz aggregiert – und der User kann sich mittels Filtering seine Sprachen selbst heraussuchen. Das ist aber sicherlich nur eine von vielen Lösungen…

Der Vortrag zum Nachlesen hier unten und mehr zum Projekt hier noch ausführlicher.



Die Facts zum Projekt in aller Kürze:

Der Kunde: Die Sika ist ein “Hidden Champion”, der mit innovativen Feinchemie-Produkten weltweit kleine, aber entscheidende Beiträge z.B. für den grössten Tunnel der Welt, effiziente Windkraftwerke, leichtere Autombile, etc leistet.

Die Aufgabe war es, die Sika bei Ihren zukünftigen Stakeholdern (Mitarbeitern, Partnern, Kunden, etc) als innovatives Unternehmen und attraktiven Arbeitgeber zu positionieren.

Das Problem: Die zukünftigen Stakeholder sind jetzt Studenten und Young Professionals – und in deren Ohren klingen Corporate Botschaften meist weder sexy noch unglaubwürdig

Der Ansatz: Die Lösung liegt nahe – wir setzen auf Outside-In Kommunikation. Die Leistungen der Sika klingen in den Worten der Zielgruppe attraktiver und glaubwürdiger.

Die Idee: Also laden wir unsere Zielgruppen ein, an spektakulären Projekten der Sika teilzuhaben und einzigartige Insights zu gewinnen. Im Gegenzug bitten wir sie, über ihre Erlebnisse zu bloggen.

Die Umsetzung: Die Sika Experience war geboren (Wir haben immer von einer “Camel Tropy für Ingenieure” gesprochen :). Mit einem blog als zentralem Dreh- und Angelpunkt einer Crossmedialen Kampagne mit der Botschaft “How can we improve (things)?” ging die Sika ins Jubiläumsjahr

Der Erfolg: Kann sich sehen lassen. 6 erfolgreiche Experience trips, auf die sich über 1’500 Studenten und Young Professionals beworben haben, Über 80’000 Besucher auf der Kampagnen-site und viele weitere Kennzahlen (siehe slides) waren Anlass für die Sika, die Aktion über das Jubiläumsjahr hinaus weiterzuführen – bis heute. Ach ja – und es hat uns einen Wahnsinns-Spass gemacht :)

Smashing Conference 2013

Die diesjährige Smashing Conference stand ganz unter dem Motto «Personal Experiences». Das Thema war also offener als es gar nicht hätte sein können & die Speakerliste – quasi das Who is Who der Webszene – liess Grosses erhoffen.

Location: Historisches Kaufhaus

Hier mein Versuch, die Konferenz in drei Kernaussagen zusammenzufassen:

  1. Deciding in the Browser
  2. Progressive Enhancement, Progressive Enhancement, Progressive Enhancement
  3. Have fun!

Deciding in the browser

Die Zusammenarbeit zwischen Design & Frontend steht seit Responsive Web Design vor ganz neuen Herausforderungen.

Tools wie Photoshop, InDesign & Co. stehen in der Kritik dem Multi-Device-Web zu wenig Rechnung zu tragen. Dennoch sind sie DAS Tool für Designer, sich kreativ ausdrücken zu können. Das Designen im Browser wiederum benötigt Frontend-KnowHow & bietet zu wenig Platz für Kreativität. Dazwischen gibt es eine ganze Palette von Tools, die den neuen Umständen gerecht werden wollen, oftmals jedoch bloss Zwischenerzeugnisse für die Tonne produzieren.

Die Zeit ist also mehr als reif sich über den sinnvollen Einsatz/Mix von Kreativtools & Frontend Gedanken zu machen. Dan Mall & Jason Santa Maria haben dies getan & teilten ihre Erfahrungen mit uns. Die beiden leidenschaftlichen Webdesigner sind sich einig:

As an industry, we sell websites like paintings. Instead, we should be selling beautiful and easy access to content, agnostic of device, screen size, or context – Dan Mall

Ihr Vorschlag um dies zu erreichen ist so einfach, dass er sich in zwei umgemünzte Zitate packen lässt.

Zitat #1

Current design approach

New design approach

Die Design-Diskussion mit dem Kunden soll also nicht auf Basis von fertig gestalteten, pixelgenauen Designs geführt werden.

Denn was ist mit verschiedenen Screen-Grössen? Vernachlässigbar? Wohl kaum! Ein detail- und pixelgenaues Design verleitet aber dazu, die Design-Diskussion auch auf Level von Detail- und Pixelgenauigkeit zu führen. Dabei wird das Wesentliche – wie fühlt sich die Seite unabhängig von Device & Screen-Grösse an – oftmals ausgeblendet.

Dan Mall schlägt vor, statt dessen als Diskussionsgrundlage Styletiles – oder Visual Inventories o.ä. – zu verwenden.

«The Examiner» Styletiles

«The Examiner» – Projektübersicht

I don’t think we’re in a post-PSD era, but I do think we’re moving towards a post-“full-comp” era – Dan Mall

Anschliessend soll der Prozess in den Browser verlagert werden. Denn nur im Browser kann das Verhalten, die Verhältnisse der Elemente zueinander – unter Berücksichtigung von verschiedenen Screen-Grössen – sinnvoll dargestellt werden. Mit diesem Schritt werden zudem gleichzeitig auch andere Risikofaktoren ausgeschaltet & die Machbarkeit implizit sichergestellt.

Das für mich wichtigste Zitat der ganzen Konferenz folgte postwendend.

Zitat #2

… und wirken lassen …

Der Design-Entscheid soll also in den Browser verlagert werden. Damit hätte man auch gleichzeitig eine wunderschöne Definition of done. Nämlich:

It’s done when it’s done

Progressive Enhancement

Das Konzept von Progressive Enhancement ist so alt, dass man als Frontend Engineer schon fast nicht mehr darüber nachdenkt. Nichtsdestotrotz – oder eben vielleicht gerade deshalb – ist das Thema momentan wieder in aller Munde. Auslöser dafür war Nicolas Zakas Präsentation Enough with the JavaScript Already.

Durch die Verlagerung von Business- und Renderlogik in den Client, steht das bewährte Konzept von Progressive Enhancement erneut auf dem Prüfstand – Client Side Rendering, Model Driven Views etc. vertragen sich nur bedingt mit dem progressiven Gedanken.

Gleich mehrere Speakers – Andy Hume, Ethan Marcotte, Jake Archibald & Jeremy Keith – riefen uns das Konzept – und dessen Bedeutung im neuen Kontext – zurück ins Gedächtnis.

Dabei wurde oftmals der von BBC geprägte Begriff «Cutting the mustard verwendet. «The mustard» ist im Falle von BBC der «Support von HTML5».

  if('querySelector' in document
     && 'localStorage' in window
     && 'addEventListener' in window) {
        // bootstrap the javascript application
  }

Erfüllt ein Browser die Mustard-Kriterien so erhält er die Schöne-Neue-Welt-Version, falls nicht erhält er eine funktionale Core-Version. Die Mustard-Kriterien entscheiden schlussendlich mit über den Grad des «Enhancements».

Its a myth that progressive enhancement means making lowest common denominator designs. Its just about starting there – Jeremy Keith

Eine schöne funktionale Core-Version – die mit sage & schreibe 1 Request auskommt – zeigte Andy Hume am Beispiel der Mobile-Seite von The Guardian. Dieses Extrembeispiel zeigt, dass vor allem im mobilen Kontext – in dem Netzunterbrüche & fehlgeschlagene Requests keine Seltenheit sind – Progressive Enhancement die «gefühlte Verfügbarkeit» einer Seite drastisch verbessern kann.

Have fun!

Web & Spass gehören zusammen. Sei dies bei der Arbeit & natürlich auch überall sonst – auch an der Smashing Conference.

Highlights waren der als Mystery Speaker getarnte Handorgelspieler Klaus Schmidt

… die spontan aus Speakern zusammengewürfelte «Smashing Conference Lonely Hearts Club Band»

… oder das von WordPress grossartig eingehaltene Versprechen

Free Beer All Night Long

Alles in allem war die Smashing Conference bereichernd, bestätigend, trotz Ausnahmen grösstenteils kurzweilig & unterhaltsam, gespickt mit allerlei Würsten vom Markt & inspirierend.

… hoffentlich nächstes Jahr wieder

Weiterführende Links

Progressive Enhancement
That Emil – Progressive Enhancement: Still Not Dead.
Jake Archibald – Progressive enhancement is still important
BBC – Cutting the mustard

Decide in the Browser
Dan Mall – Responsive Design is Hard/Easy! Be Afraid/Don’t Worry!
Brad Frost – The Post-PSD Era … in response … Dan Mall – The Post-PSD Era: A problem of expectations

Namics Goes Eyetracking

Das Namics-Team mit Laborleiter Thomas WeinholdAm 22.07.2013 war es soweit: Zu siebt besuchten wir in einem bunten Mix aus Projektleitern, (UX-)Consultants und Designern das Usability Labor der HTW Chur. Nach einer Einführung mit Updates und Hintergrundinformationen zu den aktuellen Entwicklung von Eyetracking Systemen ging es direkt los mit unserer UX-Studie, für welche wir zusätzliche Research Ergebnisse erhalten wollten. Am Nachmittag nahmen wir uns die Zeit, um verschiedene Webseiten, Layouts und Designs zu untersuchen, wobei sich jeder individuell einbringen und seine methodischen Fragen und Hypothesen praktisch testen konnte. Durch das gemeinsame, interdisziplinäre Experimentieren konnten wir unsere Kenntnisse bei der Fragenentwicklung und der Testmethodik experimentell erweitern. Obwohl viele von uns bereits umfangreiche Erfahrungen mit Eyetracking- und Usability-Testing mitgebracht hatten, war der eintägige Austausch zwischen Hochschule und Professionals aber auch der zwischen Designern und Consultants für alle spannend, da man sonst selten so intensiv Zeit findet oder auch die Möglichkeit hat, im Team zu experimentieren und fachübergreifendes Feedback zu sammeln.

Dementsprechend positiv fällt auch das Feedback der einzelnen Teilnehmer aus:

“Das war eine sehr spannende Erfahrung! Ich bin überzeugt, dass es für unsere Kunden sinnvoll wenn nicht sogar notwendig ist, zumindest eine Eyetracking-Studie zumachen. Ich bin wirklich erstaunt, wie wenig Aufwand es bedeutet, eine Studie vorzubereiten und wie gross der Effekt ist!” (Veronika, C/PL)

“Gut fände ich, wenn wir in Zukunft eine Möglichkeit hätten, bei gewissen Projekten das Eyetracking anzubieten. Die Auswertungen bestätigen klar die Informationsflut bei überfüllten Startseiten. Spannend war die Erkenntnis, dass bei überfüllten oder unruhigen Seiten das Auge zwar den grössten Teil des Inhalts überfliegt, aber nur ein Bruchteil davon auch gelesen und aufgenommen wird. Die Visualisierungen des Eyetracking-Programms zeigen dies sehr schön auf. ” (Bruno, Designer)

“Wir machen unsere Kunden messbar erfolgreicher – ich hab mich immer gefragt wie man ein Design objektivieren kann. Mit den Möglichkeiten von Eyetracking können wir dieses Leistungsversprechen einhalten.” (Marcel, C/PL)

“Mit Eyetracking  hat man die Möglichkeit mit wenig Aufwand die Wirkung, die ein Layout auf das Auge und der Kognition des Beobachters hat, genau zu beobachten. Dies ist schon ab der ersten Designphase eines Projektes sehr effizient um Entscheidungen zu treffen und diese vor dem Kunden zu unterstützen. Meine Empfehlung ist, diese Methodik öfters in einem Projekt zu integrieren.” (Philipp, Art Director)

“Mich überrascht es immer wieder, wie gut man mit Eyetracking schon frühzeitig Schwachstellen identifizieren kann – vor allem bei Landing Pages und Produktseiten kann man sehr gut überprüfen, ob die Aufmerksamkeit der Anwender an die richtige Stelle gelenkt wird oder was man optimieren sollte. Auch für die Kommunikation ist es ein sehr effizientes Mittel, da die meisten Bilder sehr eindeutige Ergebnisse widerspiegeln, wodurch man insgesamt Zeit sparen kann. ” (Sonja, UX-C)

“Die Einsatzmöglichkeiten von Eyetracking sind unglaublich vielfältig, und bieten bei Konzept und Design digitaler Markenerlebnisse viele wertvolle Anhaltspunkte, diese noch effektiver nutzbar zu machen.” (Mark, Senior Art Director)

“Eine sehr gute Option, Annahmen über die Positionierung von Elementen auf einer Website schnell und effizient zu überprüfen.” (Olaf, Senior Consultant)

Last but not Least möchten wir uns nochmal ganz herzlich bei der HTW Chur und  bei Thomas Weinhold, dem Leiter des Labors, für die Gastfreundschaft und vor allem die hochwertigen Tipps und Tricks bedanken – wir konnten viel lernen und hatten dabei auch sehr viel Spass!

 

UXcamp Europe 2013 – Mitgeschrieben Teil 3

FutureVision_01

Dies ist der letzte Teil mit Skizzen zu den Vorträgen vom Uxcamp Europe 2013. Teil 1 ist hier, Teil 2 ist dort. Captain Obvious’s Guide To Habits: Wie hackt man sich selbst um seine Gewohnheiten zu ändern?       … Weiterlesen

UXcamp Europe 2013 – Mitgeschrieben Teil 2

Weitergehts mit den Notizen zum UXcamp Europe. Teil 1 ist hier.
Ansonsten auch sehr empfehlenswert sind die Eindrücke von meinem Ux-Wingman und Kollegen Alexander Zyuzkevich 

Content Strategy- 4 Steps From Sadness To Zen
Mit welchen simplen Regeln man die Inhalte einer Webseite klarer darstellen kann.

zu “Formulate what the content should do”: Die hier angesprochenen Richtungen könnten sein:

  • Die Mitarbeiter (des Kundencenters) sollen sympathisch und zugänglich klingen, dabei aber anonym bleiben
  • Die Mitarbeiter sollen besonders als Individuen wahrgenommen werden, nicht als einfach nur als Telefonnummer zu einem Callcenter.
  • Der Fokus des Contents liegt darauf den von Krebs betroffenen Lesern und ihren Angehörigen zu beruhigen und auf die nächsten Schritte vorzubereiten

          
-Link zum ganzen Bild- 

 

Kitsch
Was ist Kitsch? Warum interessiert uns das?

Kitsch isn’t ironic. And irony is probably just kitsch.- Durchsage an alle Hipster

     
 -Link zum ganzen Bild-

Demnächst dann: Was ist nach Smartphones das nächste grosse Gadget und wie konditioniert man sich, es sich nicht sofort zu kaufen? 

 

UXcamp Europe 2013 – Mitgeschrieben Teil 1

Material

Ok, everybody. There are no rules about UX that aren’t broken at least once in a while. So, basically everybody here is an expert. Everybody knows something. Please step forward, if you wanna hold a talk. Now.  - Introduction speech … Weiterlesen

Connecting with the Customer – digitale Touchpoints als Magneten im B2B Marketing

namics_google_b2b_online_marketing_event_florian_heidecke

Digitale Kanäle wirken wie Magnete. Sie führen heute Interessenten an das eigene Unternehmen heran, konvertieren diese zu Kunden und begleiten sie auch anschliessend über den gesamten Customer Lifecycle. Welche Massnahmen und Elemente lassen sich zielführend einsetzen? Und wie lassen sich … Weiterlesen

CAS Digital Typography

ZHdK - 02

Schriftgestaltung und Typografie, Hauptdisziplinen der Visuellen Kommunikation, gehören seit Jahrzehnten zu den Kernkompetenzen des Departements Design an der Zürcher Hochschule der Künste. 60–80% der Gestaltungsarbeit im Bereich der visuellen Kommunikation sind typographische Problemstellungen, analog und digital. Deshalb bietet die ZHdK gemeinsam … Weiterlesen

Veröffentlicht unter Design

Mobile Business Blog-Serie:
Responsive Web Design — Teil 1: Einführung

slide-27-1024

Responsive Die Darstellung einer Site passt sich an die Gegebenheiten im Browser an um überall eine gute Experience zu bieten. Web Durch URLs addressierbare HTML Info-Ressourcen, verlinkbar durch Hyperlinks. Device-agnostisch. Design Der Prozess um ein Produkt innerhalb eines spezifischen Mediums … Weiterlesen

Page 1 of 612345...Last »