So funktioniert das MailChimp UX-Team



    Mitarbeiter des Mail-Dienstes MailChimp haben das Buch The UX Reader über die Funktionsweise ihrer UX-Abteilung geschrieben und darin nützliche Informationen und allgemeine Tipps für Führungskräfte, Designer, Entwickler und Designer ausgetauscht.

    Wir haben eine kurze Nacherzählung des Inhalts des Buches vorbereitet. Die vollständige Übersetzung von The UX Reader finden Sie im IIDF-Blog über Habrahabr .


    So bilden Sie ein UX-Team


    Ein schlagkräftiges Team muss Ideen generieren und erfolgreich umsetzen können. Zu diesem Zweck müssen die Teammitglieder in verschiedenen Phasen der Arbeit ständig Ideen austauschen und Verantwortung teilen. Zwölf Mitarbeiter arbeiten im MailChimp-Team, einige beschäftigen sich mit Designforschung, einige mit Interface-Design, einige mit Frontend-Entwicklung und einige mit Layout.

    Um eine effektive Gruppe zusammenzustellen, müssen Sie sich viel Mühe geben und eine angemessene Menge Zeit aufwenden. Eine Person einzustellen ist sehr einfach, aber das Entlassen ist viel schwieriger, weil er die ihm zugewiesenen Aufgaben auf einer grundlegenden Ebene bewältigen kann, aber nicht mehr. Überlegen Sie, welchen Eindruck diese Person hinterlässt, um dies zu vermeiden. Achten Sie immer nicht nur auf die Fähigkeiten des Kandidaten, sondern auch auf seine inneren Qualitäten: Offenheit, Selbstvertrauen, Geselligkeit, Motivation und Neugier. Der Mangel an Wissen kann behoben werden, aber um den Charakter einer Person zu korrigieren - nein.

    Ein wichtiger Punkt in der Beziehung des Teams ist gegenseitiger Respekt und gegenseitige Unterstützung. Ein gutes Produkt kann nur entstehen, wenn die Gruppe eine vertrauensvolle Atmosphäre hat, wenn die Menschen nicht schüchtern sind und die Kommunikation nicht meiden. Laut Fernando Godina beschäftigt das MailChimp-Team eine Vielzahl von Spezialisten mit einer Vielzahl von Fachgebieten: Biologen, Werbefachleute, Designer, Künstler, Dichter.

    „Wenn jemand auf Probleme stieß“, sagt Fernando, „schrieb er mit einem Messenger an andere Teammitglieder oder ging einfach mit der einen oder anderen Frage auf sie zu - das war der Beginn der Lösungsfindung. Jeder dieser Aufrufe wurde mit dem aufrichtigen Wunsch wahrgenommen, das Problem zu verstehen und einem Kollegen zu helfen. “

    Gegenseitiges Vertrauen entsteht durch gegenseitigen Respekt, und dies gilt vor allem für Führungskräfte. Es ist schwierig für Mitarbeiter zu experimentieren, wenn sie für irgendetwas eine schriftliche Erlaubnis benötigen. Handlungsfreiheit (innerhalb angemessener Grenzen) hilft Teams, schnell Entscheidungen zu treffen und auf diese Weise schnell Ergebnisse zu erzielen und Ressourcen zu sparen.



    Produktentwicklung erfordert hohes Engagement und Enthusiasmus, daher ist es notwendig, den Mitarbeitern eine gewisse Motivation zu vermitteln. Die beste Motivation sind die Schwierigkeiten, mit denen Benutzer der Anwendung konfrontiert sind. Wir bei MailChimp laden gelegentlich regelmäßige Benutzer ein, an Produkttests teilzunehmen. Dies spornt das Team an, die Aufgabe mit aller Macht zu übernehmen.

    Arbeitsplatz - zweites Zuhause

    Ein Mensch verbringt einen erheblichen Teil seines Lebens bei der Arbeit. Daher ist die Gestaltung eines Arbeitsstudios oder Büros ein sehr wichtiger Aspekt bei der Bildung eines effektiven UX-Teams. Ron Lewis, Creative Director von MailChimp, und Mark DiCristina, Marketing Director, waren persönlich am Design des neuen Designstudios in Atlanta beteiligt.

    • Für das Studio wurde ein großes offenes Büro im vierten Stock des Gebäudes ausgewählt. Ron und Mark beschlossen, ihre Kollegen nicht voneinander zu trennen, und entfernten daher alle Partitionen und vereinten Menschen mit einer Vielzahl von Spezialisierungen: Analysten mit Entwicklern und Designer mit Inhaltsspezialisten.
    • Langes Arbeiten am Tisch untergräbt die Gesundheit der Mitarbeiter, sodass das Büro einen ungehinderten Durchgang von einem Ende des Raums zum anderen gewährleisten soll. Stehpulte wurden hinzugefügt, wenn jemand seinen Arbeitsplatz und sein Umfeld ändern wollte.
    • Ron gefiel die Entscheidung, die er im Büro von Iron Yard Greenville sah - seine Wände waren eine große Schreibtafel. Wir bauten zusammenklappbare mobile Racks, Boards, die als Raumbegrenzer verwendet werden können. Die Menschen sind eher bereit, Ideen auszutauschen.
    • Es ist wichtig, einen Raum für freie Kommunikation zu schaffen. MailChimp hat für diese Zwecke eine Kaffeebar mit La Marzocco Linea. Hier trifft sich jeder: Buchhalter, Ingenieure, Techniker - und teilt die neuesten Nachrichten. Konvergenz bringt Menschen zusammen, wie Gregg Bernstein, ein leitender Designforscher, in einem Artikel in UX Mag schrieb.
    • Am Freitagmorgen versammeln wir uns alle zu einem „Kaffee mit einem Experten“, bei dem die Redner ihre Erfahrungen, ihre Erkenntnisse und Entscheidungen teilen sowie nur Spaß haben und Spaß haben. Wir haben auch - in einem weniger formellen Format - gemeinsame Abendessen.
    • Auch wenn die Kommunikation gut ist, müssen Sie dennoch einige Orte für eine ruhige Arbeit in der Stille reservieren, an denen niemand ablenkt. Ein Paar spezialisierter Besprechungsräume für Besprechungen und Anrufe wird ausreichen.



    (Vollversion des ersten und zweiten Teils des Buches)

    Kundenbetreuung und Teamwork


    Sie müssen Ihren Finger am Puls der Zeit halten und auf Ihr Publikum hören. Es gibt eine Vielzahl von Möglichkeiten, um Feedback zu Ihrem Produkt zu erhalten: Kundenfeedback per E-Mail, Ergebnisse von Fragebögen und Interviews, Usability-Tests, Analysen usw. Es ist wichtig, sich daran zu erinnern, dass Kunden mehr als Sie wissen, wie Sie Ihren eigenen Service nutzen können.

    Wir bei MailChimp sind bemüht, auch einzelne Kundenwünsche zu berücksichtigen. Letztes Jahr erhielten wir die Anfrage, eine Funktion für Notizen im Abonnentenprofil zu erstellen. Wir haben eine Person direkt kontaktiert, gesprochen und basierend auf dem Gespräch Änderungen am Entwicklungsplan vorgenommen.

    Natürlich sollten Sie nicht unbedingt alle Funktionen implementieren, die Kunden Ihnen auferlegen, da Sie das Produkt überlasten und die Aufmerksamkeit des Publikums zerstreuen könnten. Es ist notwendig, eine ausreichende Menge an Informationen zu sammeln, auf deren Grundlage es möglich ist, die Hypothese zu akzeptieren oder zu widerlegen und dann fortzufahren.



    Feedback ist ein wichtiges Element in der Arbeit eines Unternehmens: Es hilft, fundierte Entscheidungen im Prozess der Entwicklung und Verbesserung des Produkts zu treffen. Eine beliebte Methode, um Feedback zu erhalten, ist ein offenes Interview. Es gibt eine Vielzahl von Möglichkeiten, um es zu halten: per Telefon, Video, persönlichem Interview und so weiter.

    Die Forscher beginnen bereits vor Beginn des Interviews mit der Arbeit: Sie achten auf den Zweck der Studie, das heißt, sie versuchen zu verstehen, welches Ergebnis sie erzielen möchten. Dies kann eine Klärung des Kundentyps oder eine Untersuchung der Verwendungsumgebung des Produkts sein. Dann müssen Sie Kontakt mit dem Befragten aufnehmen, ihn auf das Interview vorbereiten, Beziehungen aufbauen und ihm helfen, dem Forscher zu vertrauen.

    Während des Interviews muss die Kommunikation mit einer Person je nach Grad ihrer Geselligkeit aufgebaut werden. "Ich bevorzuge offene Kommunikation", sagt Stef Troit. "Manchmal bitte ich die Leute, über sich selbst zu erzählen, und dies führt zu einer Diskussion über wichtige Punkte für eine Person." Die "Befragung" von Benutzern im "Frage-Antwort" -Format führt nicht zum richtigen Ergebnis, da die Person beginnt, sich vor Ihnen zu verschließen.

    Während des Interviews müssen Sie berücksichtigen, dass der Befragte keiner Chronologie folgt - er teilt seine Gedanken und Gefühle, wie sie in seinem Kopf erscheinen. Ihre Aufgabe wird es sein, Kommunikationslinien zwischen allen gesammelten Informationen herzustellen: Sie können die Person auffordern, zu vorherigen Fragen zurückzukehren und diese zu erklären. „Ich empfehle, alle Themen, die Ihr Gesprächspartner auf die eine oder andere Weise behandelt, aufzuzeichnen“, fährt Stef Troit fort, „um später darauf zurückzukommen, wenn Sie dies für erforderlich halten. Auf diese Weise können Sie die Kommunikation ohne einen genauen Plan aufbauen. "

    Nach dem Interview ist es sinnvoll, allen Befragten einen Dankesbrief zu schreiben, in dem sie die Möglichkeit haben, zusätzliche Fragen und Kommentare zu stellen - manchmal können Sie von ihnen etwas Neues lernen.

    (Vollversion des dritten Teile des Buches)

    Skizzieren: warum und wie


    Mithilfe einer Skizze können Designer Ideen austauschen und Entwicklern auf verständliche Weise ihre Absichten mitteilen. Eine Skizze ermöglicht es Ihnen, die Stufe der verbalen Beschreibung zu durchlaufen. Dies ist eine zuverlässigere Methode, um Ideen zu demonstrieren. Je schneller Kollegen Ihre Idee verstehen, desto schneller können Sie Änderungen vornehmen und loslegen.



    Die Anzahl der Skizzen in den frühen Entwicklungsstadien kann in den späteren Stadien ihr Volumen erheblich überschreiten, und höchstwahrscheinlich handelt es sich um einfache Handskizzen. Sie werden benötigt, um die Richtung zu bestimmen - das heißt, wohin Sie und Ihr Produkt sich bewegen werden. Wenn die Richtung ausgewählt ist, können Sie detailliertere Skizzen zeichnen.

    Die richtigen Werkzeuge zum Zeichnen sind sehr wichtig. Natürlich hat noch niemand Papier mit einem Stift storniert, aber Sie können das Zeichnen (und Verteilen) mit dem iPad beschleunigen.



    Musterbibliothek Evolution


    Die Zeit im Internet vergeht schnell: Neue Technologien tauchen auf und werden mit unglaublicher Geschwindigkeit eingeführt. Jason Beard sagt: "Design vor ein paar Jahren sieht zehn Jahre alt aus." Als er 2010 in das Unternehmen eintrat, sah die MailChimp-Seite folgendermaßen aus:



    „Zu dieser Zeit wurden unsere Stile für jede Komponente der Anwendung von Grund auf neu geschrieben“, fährt Jason Beard fort. Wir haben verstanden, dass vieles geändert werden muss. “ Es wurde beschlossen, neu zu gestalten. So begann das MailCamp Control Panel nach der Neugestaltung im Jahr 2011:



    Im Jahr 2012 beschlossen wir, unsere Arbeit fortzusetzen, um das Projekt zu verbessern und das Benutzererlebnis zu verbessern. Im Jahr 2013 begann MailChimp so auszusehen:



    Jetzt ist unser Anwendungsdesign als Atom beschrieben werden, und zum Zeitpunkt der Einführung des neuen MailChimp haben wir eine öffentliche (offen) arbeiten eine Bibliothek von Mustern.

    (Vollversion des vierten Teils des Buches)

    SVG, gib mir fünf!


    SVG-Animationen sind schon vor langer Zeit aufgetaucht, erfreuen sich aber erst jetzt großer Beliebtheit. Vor dem Versenden von Briefen sind die Leute sehr nervös. Deshalb haben wir uns entschlossen, Freddys Fuß zu animieren, der nun allen „fünf“ gibt, die erfolgreich mit dem Versenden fertig werden.



    Die "Fünf" -Animation wird aus drei Elementgruppen erstellt, die in einer SVG-Datei zusammengefasst sind. Jede Gruppe ist ein animierter Rahmen, der bei Bedarf sichtbar wird und dann ausgeblendet wird. Damit das Endergebnis wie eine vollständige Animation aussieht, haben wir eine schrittweise Animationstechnik verwendet, bei der die drei Hauptbilder durch Übergänge verbunden sind.

    Die Reihenfolge, in der die Animationselemente angezeigt werden, wird durch die Funktion Snap.svg festgelegt:

    // Order of grouping is important!!!// 
    s = SVG canvas created by Snap 
    var group = s.group( 
    circleBG, 
    hand1, 
    hand2, 
    hand3 
    );
    


    Dank der Maske erfolgt die Animation der Elemente innerhalb des Konturkreises:

    // Create a circle at x:200 and y:200 
    // and 200px radius 
    circleMask = s.circle( 
    200, 
    200, 
    200 
    ); 
    // Fill with white 
    circleMask.attr({ fill: "#FFFFFF" });
    


    Animieren Sie das Bild mit Animate. Sie erhält folgende Attribute:

    Element.animate( 
    attrs, 
    duration, 
    [easing], 
    [callback] 
    );
    


    Hier ist ein Beispiel der ersten Animation für eine "fünf" Geste:

    arm1.animate( 
    {transform:'t-50,60'}, 
    400, 
    mina.backout, 
    function(){ 
    // callback code here 
    } 
    );
    


    Das erste Attribut definiert die Bewegung des Objekts, das zweite Attribut die Gesamtdauer der Animation in Millisekunden, das dritte Attribut die Zeitfunktion und das vierte Attribut die Rückruffunktion, die nach Abschluss der Animation ausgeführt wird.

    Hier ist die ursprüngliche Version des Codes.

    (Vollversion des fünften und sechsten Teils des Buches)

    Anwendungsmerkmale: Quantität und Qualität


    Wenn ein Benutzer einen Fehler findet, beginnt er, Ihrer Anwendung weniger zu vertrauen, und wenn mehrere Benutzer gleichzeitig einen Fehler finden, erhöht dies die Belastung des Supportdienstes erheblich. Je größer der Fehler, desto mehr Vertrauen wird untergraben. So kann das Vertrauen durch einen schwerwiegenden Fehler auf einmal oder durch mehrere kleinere Fehler nach einiger Zeit zerstört werden.

    MailChimp ist nicht immun gegen Bugs und wir geben zu, dass wir sowohl große als auch kleine "Lücken" in der Anwendung gefunden haben. Um so schnell wie möglich auf Kundenbeschwerden zu reagieren, betrachten wir soziale Netzwerke, kommentieren Blog-Posts und berücksichtigen auch die während des Interviews erhaltenen Daten.

    Wir empfehlen Ihnen, die Arbeit manchmal zu verlangsamen und Updates zu veröffentlichen, die keine neuen Funktionen einführen, sondern Patches sind, die die Nachteile der Anwendung abdecken. Das Wichtigste dabei ist, vorherzusagen, wie sich Änderungen auf das Benutzererlebnis auswirken, das gesamte Bild zu sehen und so viele „Löcher“ wie möglich zu schließen.

    Bevor wir heute Änderungen an der Anwendung vornehmen, analysieren wir sorgfältig die Rückmeldungen unserer Kunden. Manchmal hören wir Dankesworte, manchmal Beschwerden. Auf die eine oder andere Weise lernen wir nach den Änderungen etwas Neues und versuchen, auf jede Nachricht zu antworten. Infolgedessen erhöht ein solcher Dialog zwischen dem Benutzer und dem Team die Effizienz und bereitet den Benutzern hoffentlich Freude.

    (Vollversion des siebten und achten Teils des Buches)

    Jetzt auch beliebt: