En juillet 2022, Shopify a lancé Shopify Flex Comp , notre nouvelle approche de la rémunération qui place la réflexion sur les produits au premier plan de la façon dont les employés de Shopify (alias Shopifolk) sont payés. C'est un projet audacieux et ambitieux qui a le potentiel de réécrire l'histoire de la rémunération dans notre industrie.

Flex Comp donne aux employés une agence sur leur salaire. Jusqu'à aujourd'hui, la manière standard pour les entreprises en croissance de payer leurs employés était un mélange inflexible et imprévisible de liquidités et de capitaux propres qui enlève la liberté d'action aux employés et les récompense en fonction des caprices du marché. Notre nouveau système permet aux employés de choisir exactement comment ils souhaitent répartir leur rémunération totale - entre le salaire, les unités d'actions restreintes (RSU) et les options d'achat d'actions - et d'ajuster leurs préférences à mesure que leur vie change.

Conçu par une petite (mais puissante) équipe et livré en quatre mois, l'outil devait fonctionner pour des milliers d'employés dans plusieurs pays avec des devises et des cadres juridiques différents.

Concevoir un outil aussi complexe avec ce calendrier a obligé l'équipe de conception à adopter une approche et un état d'esprit différents pour réussir. Maintenir un état d'esprit adaptatif, gérer des variables changeantes, collaborer avec des équipes de diverses disciplines et distiller des exigences juridiques/financières complexes dans une conception facile à utiliser ont été quelques-uns des défis uniques que nous avons rencontrés au cours du processus.

En tant que designer de produits chez Shopify, j'ai dirigé les efforts de conception de ce projet. Voici l'histoire de la façon dont nous avons abordé l'UX derrière l'outil Flex Comp de Shopify et les principaux défis auxquels nous avons été confrontés tout au long du parcours de conception.

Construire l'avion en le pilotant

Pendant quatre mois, nous avons construit l'avion comme nous l'avons piloté.

Côté design nous :

• Créer des histoires d'utilisateurs ;
• Scénarios et tâches utilisateur cartographiés ;
• A exploré différents concepts;
• Wireframer les solutions (desktop et mobile);
• Simplifié l'architecture de contenu ;
• Création d'un nouveau langage visuel de marque et d'interface utilisateur spécifique à l'outil ;
• Testé nos solutions avec des employés internes dans différents rôles et niveaux d'ancienneté ;
• Testé nos solutions auprès d'utilisateurs en situation de handicap ;
• Tester les solutions avec les différents cas extrêmes et plusieurs devises ;
• Création de visuels pour le matériel de formation et la documentation des employés ;

Parallèlement, d'autres équipes de Shopify (juridique, finance, ingénierie , support, RH, accessibilité) cherchaient des détails dans leurs domaines respectifs. Les variables juridiques, financières et techniques changeaient chaque jour, rendant le projet parfois difficile et frustrant.

Comment l'équipe de conception a-t-elle réussi à maintenir le cap durant cette folle aventure ?

L'état d'esprit adaptable est la clé

Pour que ce projet soit un succès, nous avons compris très tôt qu'il fallait adopter un solide état d'esprit d'adaptabilité. Nous avons dû commencer à concevoir sans exigences finales et sachant que les variables pouvaient changer. Nous avons dû présenter aux dirigeants des conceptions qui n'étaient pas entièrement étoffées, et ce n'était pas grave. Beaucoup d'exploration de conception serait jetée et c'était également acceptable.

'' Le changement est inévitable. '' Et cela ne pourrait pas être plus vrai. La capacité de s'adapter lorsque le changement survient inévitablement est une compétence essentielle en milieu de travail. Avoir un état d'esprit adaptatif vous permet de regarder clairement un scénario et de faire les ajustements nécessaires pour continuer à avancer.
Beth Hendricks

Le scénario à haute confiance

À quoi ressemble le scénario de cas d'utilisation à 80 % ? Et quels sont les nombreux cas extrêmes pour lesquels nous devons concevoir ?

Le nouveau système de rémunération devait fonctionner dans des dizaines d'endroits à travers le monde avec différentes réglementations et lois financières. Nous savions que l'expérience devait être modulable car tous les collaborateurs n'auraient pas les mêmes profils d'affectation.

Travaillant en étroite collaboration avec l'équipe des finances, nous avons développé un profil d'utilisateur qui représenterait les scénarios les plus courants pour notre nouveau système d'allocation. Cet exercice nous a permis de définir certaines tâches utilisateur avec lesquelles nous pourrions commencer à travailler car elles seraient nécessaires pour la plupart des utilisateurs :

1. Comparez vos préférences d'allocation actuelles avec votre nouveau profil d'allocation
2. Sélectionnez votre allocation répartie entre le salaire et les capitaux propres
3. Sélectionnez votre répartition des capitaux propres entre les UAR et les options
4. Relisez votre résumé
5. Soumettez vos préférences
6. Accédez facilement à l'assistance et à d'autres documents pour des questions supplémentaires

Cet exercice nous a permis d'identifier les flux à haute confiance afin que nous puissions commencer à esquisser des idées et les partager avec les experts de chaque discipline.

Collaboration active > Rétroaction asynchrone

Une fois que nous avons eu notre carte de blocs d'interface utilisateur à haute confiance, nous avons mis en place des rituels de collaboration interdisciplinaires. Deux fois par semaine, nous avions des sessions où nous présentions nos meilleures options UX à un groupe de leaders de chaque discipline (juridique, finance, talent, ingénierie). Nous avons posé des questions et expliqué la raison d'être de notre approche UX aux décideurs de chaque discipline. C'était aussi un excellent moyen de comprendre pourquoi certaines choses ne pouvaient pas fonctionner et de trouver des solutions collectivement.

Ces sessions collaboratives ont été extrêmement puissantes pour de nombreuses raisons :

• Plusieurs disciplines sont restées alignées sur une vision unifiée de l'expérience utilisateur
• Nous avons rapidement adapté l'interface utilisateur en fonction de l'évolution des besoins
• Nous avons minimisé les risques de sur-conception pour des solutions qui ne fonctionneraient pas
• Les ingénieurs pourraient évaluer la faisabilité technique de la solution proposée et identifier les risques et les opportunités pour des choses qui pourraient ne pas sembler faciles intuitivement
• Les ingénieurs frontaux ont pu commencer le prototypage rapidement afin que nous puissions tester et ressentir l'expérience telle que nous l'avons conçue.
• Nous avons évité de communiquer des commentaires, des justifications et des idées par le biais de longs fils de discussion et d'e-mails Slack, ce qui a permis d'économiser de l'énergie et du temps.

Concevoir un système de clarté

Il est incroyablement simple pour un employé intégré au nouveau système de compensation d'ajuster son allocation totale de récompenses en faisant glisser un curseur vers la droite ou vers la gauche. Mais pour l'équipe UX, concevoir cet outil unique en son genre - atteindre ce résultat - était tout sauf facile. Voyons donc la complexité cachée derrière cette interface utilisateur facile à utiliser.

Les gens ont différents niveaux de connaissances concernant les concepts financiers. Lorsque nous avons reçu la documentation financière qui expliquait le nouveau système aux employés, nous avons vu des concepts comme "salaire vs équité", "UAR vs options", "% de X avait un impact sur % de Y". Nous avons pensé : nous devons rendre cela simple.

Nous voulions minimiser le stress lié aux décisions d'affectation des employés et les aider à se sentir maîtres de leurs choix. Le système Shopify Flex Comp est un outil positif qui apporte l'agence à nos employés. Lors de la conception d'un système en étroite collaboration avec des experts financiers et juridiques, il est facile de supposer que vos utilisateurs comprennent les concepts économiques.

Décomposer la complexité

Lorsque vous achetez un nouveau meuble et que vous souhaitez l'assembler, il est toujours accompagné d'un manuel d'instructions, qui explique les pièces et leurs fonctions. Il existe un guide étape par étape qui vous aide à mener à bien la tâche.

Les instructions ne sont pas imprimées directement sur les pièces à assembler. Pourquoi? Cela entraînerait une charge cognitive élevée et entraînerait un risque plus élevé d'erreurs de l'utilisateur et un sentiment de frustration. ( Quelqu'un qui déteste toujours avoir à lire le manuel .)

En utilisant une analogie d'assemblage de meubles, nous avons défini des objectifs et des résultats plus précis pour les deux principales facettes de ce nouveau système :

1. Flex comp UI : Les utilisateurs font leur sélection et soumettent leurs préférences — la partie orientée vers l'action.
2. Documentation interne et matériel de support : les utilisateurs peuvent approfondir chaque concept financier lié à ce nouvel outil et la logique sous-jacente.

Mais les deux facettes étaient tout aussi cruciales. Avec les meubles, les enjeux sont faibles. Si vous avez assemblé suffisamment de meubles, vous pouvez probablement réussir sans le manuel. Et si vous vous trompez, il vous suffit de le démonter et de réessayer. Il n'y a pas de refaire pour comp. Une fois effectués, les choix des employés sont bloqués jusqu'à la prochaine fenêtre électorale. Les choix que font les employés à l'aide de l'outil ont un impact direct sur leurs moyens de subsistance, il est donc essentiel qu'ils le comprennent du premier coup. Le fait d'avoir des info-bulles qui se lient rapidement à la théorie de la partie pratique permet aux utilisateurs de prendre des décisions plus éclairées.

Grâce à cette segmentation intentionnelle, nous avons pu concevoir une interface utilisateur plus ciblée et minimiser la charge cognitive superflue qui pourrait accompagner cette nouvelle expérience employé.

Les gens ne peuvent pas garder beaucoup d'informations dans leur mémoire à court terme. Cela est particulièrement vrai lorsqu'ils sont bombardés de plusieurs éléments de données abstraits ou inhabituels en succession rapide. Groupe Nielsen Norman

La recette des sliders

Il existe plusieurs options de contrôle interactif pour la sélection de paramètres numériques : steppers, matrices, boutons virtuels, curseurs, champs de texte et bascule, pour n'en nommer que quelques-uns. Chacun peut être approprié selon le contexte. Pour le contrôle principal Flex Comp, nous voulions que l'interface utilisateur mappe naturellement les données utilisateur modifiées et traitées dans le backend.

Comment nous avons minimisé les états d'erreur

Nous avons exploré les options avec plusieurs curseurs empilés avec des variables uniques, et avons rapidement réalisé que l'interface utilisateur devrait gérer et communiquer trop de scénarios d'erreur. (Et qui aime se faire engueuler par une interface utilisateur ? !)

Lors de la liaison de plusieurs contrôles de curseur à une valeur totale, nous avons souvent fini par allouer trop ou trop peu de chaque curseur à partir du total disponible. Cela entraînerait la valeur d'allocation totale d'un employé dans un état d'erreur constant et l'action de soumission principale sur la page serait bloquée jusqu'à ce qu'il ait tout compris.

De bons messages d'erreur sont importants, mais les meilleures conceptions empêchent soigneusement les problèmes de se produire en premier lieu, alors concentrons-nous sur le concept qui élimine les conditions sujettes aux erreurs.

Notre approche finale signifie que l'utilisateur est toujours dans un état valide, ce qui se traduit par une expérience plus positive et plus agréable.

Le juste équilibre entre exploration et précision

Avec des paramètres complexes, un équilibre doit être trouvé entre ces deux notions :

• Exploration : Permettre aux utilisateurs d'explorer facilement l'effet du contrôle pour toute la plage du paramètre (dans ce cas, en faisant glisser le contrôleur), et
• Précision : Permettre à l'utilisateur de choisir précisément une valeur spécifique (dans ce cas, en utilisant les champs de texte).

Sur chaque extrémité, vous verrez les champs de texte qui permettent à l'utilisateur d'atteindre facilement un nombre précis en tapant ou en naviguant au clavier. Cette combinaison de contrôles rend ce composant conforme aux normes W3C/WAI, qui était une exigence essentielle pour chaque élément de conception de ce système. Les garde-corps empêchent également l'utilisateur de sélectionner des valeurs en dehors de leur limite allouée. Le scénario de chaque utilisateur individuel est unique et délimité par sa propre limite.

Tout au long de chaque étape du processus, nous avons gardé un élément très important à l'esprit : notre date de lancement. Cette date nous a aidés à rester concentrés sur les éléments essentiels de la V1, et cela nous a également aidés à prendre rapidement les bonnes décisions.

A la fin de cette aventure de conception, nous étions fatigués mais confiants dans notre solution. Nous avons fait confiance à notre processus et avons pu cocher toutes les cases de notre liste d'exigences de lancement de conception :

• Est-il facile à utiliser? ✔️
• Est-ce accessible ? ✔️
• Est-ce conforme aux différences réglementaires régionales ?✔️
• Ça a l'air bien ? ✔️

Shopify Flex comp avait un taux d'opt-in de 92% dans la première fenêtre d'opt-in. Il est utilisé par des milliers d'employés de Shopify et disponible dans des dizaines de pays dans de nombreuses devises différentes. Certaines des plus grandes entreprises du monde sollicitent désormais des conseils pour repenser leurs systèmes de gestion des talents et de rémunération.

En repensant à cette aventure, certains éléments clés ont fait toute la différence selon moi.

Accepter dès le départ que ce projet ne ressemblerait pas à un long voyage fluvial calme était très important. Avec cette attitude et cet état d'esprit, nous sommes restés concentrés sur nos objectifs premiers tout en gardant un esprit d'équipe productif malgré les multiples changements et un échéancier agressif.

Les concepteurs UX sont ceux qui apportent l'empathie des utilisateurs à la table de décision. Expliquer pourquoi les décisions X ou Y pourraient nuire à l'expérience des utilisateurs et, en fin de compte, affecter la satisfaction des utilisateurs à l'égard du produit. Il faut beaucoup d'énergie et de motivation pour pousser une équipe dans laquelle les designers UX sont minoritaires, mais c'est tellement important. Être un ardent défenseur des intérêts, des besoins et des expériences des utilisateurs tout au long du processus de création et de développement a été la clé du succès de Flex Comp.

Merci de m'avoir permis de partager ce beau voyage avec vous. J'espère que vous avez apprécié la lecture. Si vous avez envie de parler, de vous connecter, n'hésitez pas à nous contacter ici .