Die UX-Designgeschichte hinter dem Flex Comp-Tool von Shopify
Im Juli 2022 führte Shopify Shopify Flex Comp ein, unseren neuen Vergütungsansatz, der das Produktdenken in den Vordergrund stellt, wenn es darum geht, wie Shopify-Mitarbeiter (alias Shopifolk) bezahlt werden. Es ist ein mutiges und ehrgeiziges Projekt, das das Potenzial hat, die Geschichte der Vergütung in unserer Branche neu zu schreiben.
Flex Comp gibt den Mitarbeitern Entscheidungsfreiheit über ihre Bezahlung. Bis heute war die übliche Art und Weise für Wachstumsunternehmen, Mitarbeiter zu bezahlen, eine unflexible, unvorhersehbare Mischung aus Bargeld und Eigenkapital, die den Mitarbeitern die Entscheidungsfreiheit nimmt und sie auf der Grundlage der Launen des Marktes belohnt. Unser neues System lässt Mitarbeiter genau wählen, wie sie ihre Gesamtvergütung aufteilen möchten – zwischen Gehalt, Restricted Stock Units (RSUs) und Aktienoptionen – und ihre Präferenzen anpassen, wenn sich ihr Leben ändert.
Das Tool wurde von einem kleinen (aber starken) Team entwickelt und in vier Monaten ausgeliefert. Es musste für Tausende von Mitarbeitern in mehreren Ländern mit unterschiedlichen Währungen und rechtlichen Rahmenbedingungen funktionieren.
Die Entwicklung eines so komplexen Tools mit diesem Zeitplan erforderte vom Designteam einen anderen Ansatz und eine andere Denkweise, um erfolgreich zu sein. Die Aufrechterhaltung einer adaptiven Denkweise, der Umgang mit sich ändernden Variablen, die Zusammenarbeit mit Teams aus verschiedenen Disziplinen und das Destillieren komplexer rechtlicher/finanzieller Anforderungen in ein benutzerfreundliches Design waren einige der einzigartigen Herausforderungen, denen wir während des Prozesses begegnet sind.
Als angestellter Produktdesigner bei Shopify leitete ich die Designbemühungen für dieses Projekt. Hier ist die Geschichte, wie wir die UX hinter dem Flex Comp-Tool von Shopify angegangen sind und welche größten Herausforderungen wir während der gesamten Designreise hatten.
Bauen Sie das Flugzeug, während Sie es fliegen
Über vier Monate haben wir das Flugzeug so gebaut, wie wir es geflogen sind.
Auf der Designseite haben wir:
- Erstellte User Stories;
- Zugeordnete Benutzerszenarien und Aufgaben;
- Erforschte verschiedene Konzepte;
- Drahtmodellierung der Lösungen (Desktop und Mobil);
- Vereinfachte Inhaltsarchitektur;
- Erstellung eines neuen visuellen Brandings und einer UI-Sprache speziell für das Tool;
- Testen unserer Lösungen mit internen Mitarbeitern in verschiedenen Rollen und Dienstaltersstufen;
- Unsere Lösungen mit Benutzern mit Behinderungen getestet;
- Testete die Lösungen mit den verschiedenen Kantenfällen und mehreren Währungen;
- Erstellung von Visuals für Schulungsmaterial und Mitarbeiterdokumentation;
Gleichzeitig haben andere Teams bei Shopify (Recht, Finanzen, Technik , Support, Personal, Zugänglichkeit) Details in ihren jeweiligen Bereichen herausgefunden. Rechtliche, finanzielle und technische Variablen änderten sich jeden Tag, was das Projekt manchmal herausfordernd und frustrierend machte.
Wie hat es das Designteam geschafft, bei diesem wilden Abenteuer den Kurs zu halten?
Anpassungsfähige Denkweise ist der Schlüssel
Damit dieses Projekt ein Erfolg wird, haben wir früh erkannt, dass wir eine solide Denkweise der Anpassungsfähigkeit entwickeln müssen. Wir mussten mit dem Entwerfen ohne endgültige Anforderungen beginnen und wussten, dass sich Variablen ändern könnten. Wir mussten der Führung Entwürfe präsentieren, die nicht vollständig ausgearbeitet waren, und das war in Ordnung. Viel Designerforschung würde weggeworfen werden, und das war auch in Ordnung.
„Veränderung ist unvermeidlich.“ Und das könnte nicht wahrer sein. Die Fähigkeit, sich an unvermeidliche Veränderungen anzupassen, ist eine entscheidende Fähigkeit am Arbeitsplatz. Mit einer adaptiven Denkweise können Sie ein Szenario klar betrachten und die notwendigen Anpassungen vornehmen, um weiter voranzukommen.
Beth Hendriks
Das High-Confidence-Szenario
Wie sieht das 80%-Use-Case-Szenario aus? Und für welche Randfälle müssen wir designen?
Das neue Vergütungssystem musste an Dutzenden von Standorten auf der ganzen Welt mit unterschiedlichen Finanzvorschriften und Gesetzen funktionieren. Wir wussten, dass die Erfahrung modular sein musste, da nicht alle Mitarbeiter die gleichen Zuordnungsprofile haben würden.
In enger Zusammenarbeit mit dem Finanzteam haben wir ein Benutzerprofil entwickelt, das die gängigsten Szenarien für unser neues Zuteilungssystem darstellt. Diese Übung ermöglichte es uns, einige Benutzeraufgaben zu definieren, mit denen wir beginnen könnten, da sie für die meisten Benutzer benötigt werden:
- Vergleichen Sie Ihre aktuellen Zuordnungseinstellungen mit Ihrem neuen Zuordnungsprofil
- Wählen Sie Ihre Aufteilung zwischen Gehalt und Eigenkapital
- Wählen Sie Ihren Aktiensplit zwischen RSUs und Optionen
- Überprüfen Sie Ihre Zusammenfassung
- Senden Sie Ihre Präferenzen
- Erhalten Sie einfachen Zugriff auf Support und andere Dokumentationen für zusätzliche Fragen
Diese Übung ermöglichte es uns, die High-Confidence-Flows zu identifizieren, sodass wir mit dem Skizzieren von Ideen beginnen und sie mit den Experten jeder Disziplin teilen konnten.
Aktive Zusammenarbeit > Asynchrones Feedback
Sobald wir unsere Karte mit hochgradig zuverlässigen UI-Blöcken hatten, richteten wir disziplinübergreifende Rituale für die Zusammenarbeit ein. Zweimal pro Woche hatten wir Sitzungen, in denen wir einer Gruppe von Führungskräften aus allen Disziplinen (Recht, Finanzen, Talent, Technik) unsere stärksten UX-Optionen präsentierten. Wir haben Entscheidungsträgern aus allen Disziplinen Fragen gestellt und die Gründe für unseren UX-Ansatz erklärt. Es war auch eine hervorragende Möglichkeit, zu verstehen, warum bestimmte Dinge nicht funktionieren konnten, und gemeinsam Lösungen zu erarbeiten.
Diese kollaborativen Sitzungen waren aus vielen Gründen äußerst wirkungsvoll:
- Mehrere Disziplinen blieben an einer einheitlichen Vision der Benutzererfahrung ausgerichtet
- Wir haben die Benutzeroberfläche schnell an geänderte Anforderungen angepasst
- Wir haben das Risiko einer Überkonstruktion für Lösungen minimiert, die nicht funktionieren würden
- Ingenieure könnten die technische Machbarkeit der vorgeschlagenen Lösung beurteilen und Risiken und Chancen für Dinge identifizieren, die intuitiv nicht einfach erscheinen
- Die Front-End-Ingenieure konnten schnell mit dem Prototyping beginnen, damit wir die Erfahrung testen und fühlen konnten, während wir sie entworfen haben.
- Wir haben es vermieden, Feedback, Begründungen und Ideen über lange Slack-Threads und E-Mails zu kommunizieren, was Energie und Zeit spart.
Entwerfen eines Systems der Klarheit
Es ist unglaublich einfach für einen Mitarbeiter, der in das neue Comp-System einsteigt, um seine Gesamtprämienzuweisung anzupassen, indem er einen Schieberegler nach rechts oder links zieht. Aber für das UX-Team war die Entwicklung dieses einzigartigen Tools – das Erreichen dieses Ergebnisses – alles andere als einfach. Lassen Sie uns also die Komplexität behandeln, die sich hinter dieser benutzerfreundlichen Benutzeroberfläche verbirgt.
Menschen haben unterschiedliche Wissensstände in Bezug auf Finanzkonzepte. Als wir die Finanzunterlagen erhielten, die den Mitarbeitern das neue System erklärten, sahen wir Konzepte wie „Gehalt vs. Eigenkapital“, „RSUs vs. Optionen“, „% von X wirkte sich auf % von Y aus“. Wir dachten: Das müssen wir einfach machen.
Wir wollten den Stress im Zusammenhang mit den Zuteilungsentscheidungen der Mitarbeiter minimieren und ihnen das Gefühl geben, die Kontrolle über ihre Entscheidungen zu haben. Das Shopify Flex Comp-System ist ein positives Tool, das unseren Mitarbeitern Entscheidungsfreiheit verleiht. Wenn Sie ein System in enger Zusammenarbeit mit Finanz- und Rechtsexperten entwerfen, können Sie leicht davon ausgehen, dass Ihre Benutzer wirtschaftliche Konzepte verstehen.
Komplexität auspacken
Wenn Sie ein neues Möbelstück kaufen und es zusammenbauen möchten, liegt immer eine Bedienungsanleitung bei, in der die Teile und ihre Funktionen erklärt werden. Es gibt eine Schritt-für-Schritt-Anleitung, die Ihnen hilft, die Aufgabe erfolgreich auszuführen.
Die Anweisungen werden nicht direkt auf die zu montierenden Teile gedruckt. Wieso den? Dies würde zu einer hohen kognitiven Belastung führen und zu einem höheren Risiko von Benutzerfehlern und Frustrationsgefühlen führen. ( Jemand, der es immer hasst, die Bedienungsanleitung lesen zu müssen .)
Durch die Verwendung einer Möbelmontage-Analogie haben wir genauere Ziele und Ergebnisse für die beiden Hauptaspekte dieses neuen Systems definiert:
- Flex Comp UI : Benutzer treffen ihre Auswahl und übermitteln ihre Präferenzen – der aktionsorientierte Teil.
- Interne Dokumentation und unterstützendes Material: Benutzer können tief in jedes Finanzkonzept eintauchen, das mit diesem neuen Tool und der zugrunde liegenden Logik zusammenhängt.
Aber beide Facetten waren gleichermaßen entscheidend. Bei Möbeln sind die Einsätze gering. Wenn Sie Möbel oft genug zusammengebaut haben, können Sie wahrscheinlich ohne die Anleitung erfolgreich sein. Und wenn Sie es vermasseln, nehmen Sie es einfach auseinander und versuchen es erneut. Es gibt kein Redo für comp. Einmal getroffene Entscheidungen der Mitarbeiter bleiben bis zum nächsten Wahlfenster gesperrt. Die Entscheidungen, die Mitarbeiter mit dem Tool treffen, wirken sich direkt auf ihren Lebensunterhalt aus, daher ist es wichtig, dass sie es beim ersten Mal verstehen. QuickInfos, die schnell mit der Theorie des Praxisteils verknüpft sind, versetzen Benutzer in die Lage, fundiertere Entscheidungen zu treffen.
Mit dieser absichtlichen Segmentierung konnten wir eine fokussiertere Benutzeroberfläche entwerfen und die externe kognitive Belastung minimieren, die mit dieser neuen Mitarbeitererfahrung einhergehen könnte.
Menschen können nicht viele Informationen in ihrem Kurzzeitgedächtnis behalten. Dies gilt insbesondere dann, wenn sie schnell hintereinander mit mehreren abstrakten oder ungewöhnlichen Datenelementen bombardiert werden. Nielsen-Norman-Gruppe
Das Slider-Rezept
Es gibt mehrere interaktive Steuerungsoptionen für die numerische Parameterauswahl: Stepper, Matrizen, virtuelle Knöpfe, Schieberegler, Textfelder und Umschalter, um nur einige zu nennen. Jeder kann je nach Kontext angemessen sein. Für das Flex Comp-Hauptsteuerelement wollten wir, dass die Benutzeroberfläche die Benutzerdaten, die im Backend geändert und verarbeitet werden, auf natürliche Weise abbildet.
Wie wir Fehlerzustände minimiert haben
Wir untersuchten Optionen mit mehreren Schiebereglern, die mit eindeutigen Variablen gestapelt waren, und stellten schnell fest, dass die Benutzeroberfläche zu viele Fehlerszenarien verarbeiten und kommunizieren müsste. (Und wer wird schon gerne von einer Benutzeroberfläche angeschrien?!)
Wenn wir mehrere Schieberegler an einen Gesamtwert binden, haben wir oft zu viel oder zu wenig von jedem Schieberegler aus der verfügbaren Gesamtmenge zugewiesen. Dies würde dazu führen, dass sich der Gesamtzuweisungswert eines Mitarbeiters in einem konstanten Fehlerzustand befindet und die primäre Übermittlungsaktion auf der Seite blockiert wird, bis er alles herausgefunden hat.
Gute Fehlermeldungen sind wichtig, aber die besten Designs verhindern sorgfältig, dass Probleme überhaupt erst auftreten. Konzentrieren wir uns also auf das Konzept, das fehleranfällige Bedingungen beseitigt.
Unser endgültiger Ansatz bedeutet, dass sich der Benutzer immer in einem gültigen Zustand befindet, was zu einer positiveren und erfreulicheren Erfahrung führt.
Die richtige Balance zwischen Exploration und Präzision
Bei komplexen Parametern muss zwischen diesen beiden Begriffen abgewogen werden:
- Exploration: Benutzer können die Wirkung des Reglers für den gesamten Bereich des Parameters (in diesem Fall durch Verschieben des Reglers) einfach erkunden, und
- Genauigkeit : Ermöglicht dem Benutzer, einen bestimmten Wert genau auszuwählen (in diesem Fall durch Verwendung der Textfelder).
An jedem Ende sehen Sie die Textfelder, mit denen der Benutzer durch Eingabe oder Tastaturnavigation leicht eine genaue Zahl erreichen kann. Diese Kombination von Steuerungen sorgt dafür, dass diese Komponente den W3C/WAI-Standards entspricht, was eine wesentliche Anforderung für jedes Designelement in diesem System war. Die Leitplanken hindern den Benutzer auch daran, Werte außerhalb ihres zugewiesenen Limits auszuwählen. Das Szenario jedes einzelnen Benutzers ist einzigartig und durch seine eigene Grenze begrenzt.
In jeder Phase des Prozesses haben wir ein sehr wichtiges Element im Auge behalten: Unser Startdatum. Dieses Datum hat uns geholfen, uns auf die wesentlichen Teile von V1 zu konzentrieren, und es hat uns auch geholfen, schnell die richtigen Entscheidungen zu treffen.
Am Ende dieses Designabenteuers waren wir müde, aber von unserer Lösung überzeugt. Wir vertrauten unserem Prozess und konnten alle Kästchen auf unserer Liste der Anforderungen für die Einführung von Designs ankreuzen:
- Ist es einfach zu bedienen? ✔️
- Ist es zugänglich? ✔️
- Entspricht es regionalen regulatorischen Unterschieden?✔️
- Sieht es gut aus? ✔️
Shopify Flex comp hatte im ersten Opt-in-Fenster eine Opt-in-Rate von 92 %. Es wird von Tausenden von Shopify-Mitarbeitern verwendet und ist in Dutzenden von Ländern in vielen verschiedenen Währungen verfügbar. Einige der weltweit größten Unternehmen suchen jetzt Rat bei der Neugestaltung ihrer Talent- und Vergütungssysteme.
Wenn ich auf dieses Abenteuer zurückblicke, haben meiner Meinung nach einige Schlüsselelemente den Unterschied ausgemacht.
Es war sehr wichtig, von Anfang an zu akzeptieren, dass sich dieses Projekt nicht wie eine lange, ruhige Flussfahrt anfühlen würde. Mit dieser Einstellung und Denkweise blieben wir auf unsere Hauptziele konzentriert und bewahrten trotz der zahlreichen Änderungen und eines aggressiven Zeitplans einen produktiven Teamgeist.
UX-Designer sind diejenigen, die die Empathie der Benutzer an den Entscheidungstisch bringen. Erklären, warum X- oder Y-Entscheidungen die Erfahrungen der Benutzer beeinträchtigen und letztendlich die Benutzerzufriedenheit mit dem Produkt beeinträchtigen könnten. Es braucht viel Energie und Motivation, ein Team voranzutreiben, in dem UX-Designer in der Minderheit sind, aber es ist so wichtig. Der Schlüssel zum Erfolg von Flex Comp war es, während des gesamten Erstellungs- und Entwicklungsprozesses starke Fürsprecher für die Interessen, Bedürfnisse und Erfahrungen der Benutzer zu sein.
Danke, dass ich diese schöne Reise mit dir teilen durfte. Ich hoffe, die Lektüre hat Ihnen gefallen. Wenn Sie Lust haben zu reden, sich zu vernetzen, können Sie sich gerne hier melden .

![Was ist überhaupt eine verknüpfte Liste? [Teil 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)



































