En julio de 2022, Shopify lanzó Shopify Flex Comp , nuestro nuevo enfoque de compensación que pone el pensamiento de producto a la vanguardia de cómo se les paga a los empleados de Shopify (también conocido como Shopifolk). Es un proyecto audaz y ambicioso que tiene el potencial de reescribir la historia de la compensación en nuestra industria.

Flex Comp les da a los empleados agencia sobre su salario. Hasta el día de hoy, la forma estándar en que las empresas en crecimiento pagan a los empleados ha sido una combinación inflexible e impredecible de efectivo y capital que les quita agencia a los empleados y los recompensa según los caprichos del mercado. Nuestro nuevo sistema permite a los empleados elegir exactamente cómo quieren asignar su recompensa total, entre salario, Unidades de acciones restringidas (RSU) y Opciones de acciones, y ajustar sus preferencias a medida que cambian sus vidas.

Diseñada por un equipo pequeño (pero poderoso) y enviada en cuatro meses, la herramienta tenía que funcionar para miles de empleados en varios países con diferentes monedas y marcos legales.

Diseñar una herramienta tan compleja con esta línea de tiempo requirió que el equipo de diseño adoptara un enfoque y una mentalidad diferentes para tener éxito. Mantener una mentalidad adaptativa, lidiar con variables cambiantes, colaborar con equipos en una variedad de disciplinas y destilar requisitos legales/financieros complejos en un diseño fácil de usar fueron algunos de los desafíos únicos que encontramos durante el proceso.

Como diseñador de productos del personal de Shopify, dirigí los esfuerzos de diseño de este proyecto. Esta es la historia de cómo abordamos la UX detrás de la herramienta Flex Comp de Shopify y los principales desafíos que enfrentamos a lo largo del proceso de diseño.

Construyendo el avión mientras lo vuela

Durante cuatro meses, construimos el avión a medida que lo volábamos.

En el lado del diseño nosotros:

• Historias de usuario creadas;
• Escenarios y tareas de usuarios mapeados;
• Explorado diferentes conceptos;
• Wireframed las soluciones (escritorio y móvil);
• Simplificó la arquitectura de contenido;
• Creó una nueva marca visual y un lenguaje de interfaz de usuario específico para la herramienta;
• Probamos nuestras soluciones con empleados internos en diferentes roles y niveles de antigüedad;
• Probamos nuestras soluciones con usuarios con discapacidades;
• Probé las soluciones con los diferentes casos de bordes y múltiples monedas;
• Creación de elementos visuales para el material de capacitación y la documentación de los empleados;

Al mismo tiempo, otros equipos en Shopify (legal, finanzas, ingeniería , soporte, recursos humanos, accesibilidad) estaban averiguando detalles en sus respectivos dominios. Las variables legales, financieras y técnicas cambiaban todos los días, haciendo que el proyecto, a veces, fuera desafiante y frustrante.

¿Cómo logró el equipo de diseño mantener el rumbo durante esta aventura salvaje?

La mentalidad adaptable es clave

Para que este proyecto fuera un éxito, nos dimos cuenta desde el principio que teníamos que adoptar una mentalidad de adaptabilidad sólida. Tuvimos que empezar a diseñar sin requisitos finales y sabiendo que las variables podían cambiar. Tuvimos que presentar diseños al liderazgo que no estaban completamente desarrollados, y eso estuvo bien. Se desperdiciaría mucha exploración de diseño y eso también estaba bien.

"El cambio es inevitable". Y eso no podría ser más cierto. La capacidad de adaptarse cuando el cambio llega inevitablemente es una habilidad fundamental en el lugar de trabajo. Tener una mentalidad adaptativa te permite ver con claridad un escenario y hacer los ajustes necesarios para seguir avanzando.
beth hendricks

El escenario de alta confianza

¿Cómo es el escenario del caso de uso del 80 %? ¿Y cuáles son los muchos casos extremos para los que necesitamos diseñar?

El nuevo sistema de compensación necesitaba funcionar en docenas de lugares alrededor del mundo con diferentes regulaciones y leyes financieras. Sabíamos que la experiencia debía ser modular porque no todos los empleados tendrían los mismos perfiles de asignación.

Trabajando en estrecha colaboración con el equipo de finanzas, desarrollamos un perfil de usuario que representaría los escenarios más comunes para nuestro nuevo sistema de asignación. Ese ejercicio nos permitió definir algunas tareas de usuario con las que podríamos comenzar a trabajar porque serían necesarias para la mayoría de los usuarios:

1. Compare sus preferencias de asignación actuales con su nuevo perfil de asignación
2. Seleccione su división de asignación entre salario y equidad
3. Seleccione su división de capital entre RSU y opciones
4. Revisa tu resumen
5. Envía tus preferencias
6. Obtenga acceso fácil a soporte y otra documentación para preguntas adicionales

Ese ejercicio nos permitió identificar los flujos de alta confianza para poder empezar a esbozar ideas y compartirlas con los expertos de cada disciplina.

Colaboración activa > Comentarios asincrónicos

Una vez que tuvimos nuestro mapa de bloques de interfaz de usuario de alta confianza, implementamos rituales de colaboración entre disciplinas. Dos veces por semana, teníamos sesiones en las que presentamos nuestras mejores opciones de UX a un grupo de líderes de cada disciplina (legal, finanzas, talento, ingeniería). Hicimos preguntas y explicamos la lógica detrás de nuestro enfoque UX a los tomadores de decisiones de cada disciplina. También fue una excelente manera de entender por qué ciertas cosas no podían funcionar y trabajar colectivamente en soluciones.

Esas sesiones colaborativas fueron extremadamente poderosas por muchas razones:

• Múltiples disciplinas se mantuvieron alineadas en una visión unificada de la experiencia del usuario
• Adaptamos la interfaz de usuario rápidamente de acuerdo con los requisitos cambiantes
• Minimizamos los riesgos de sobrediseñar soluciones que no funcionarían
• Los ingenieros podrían evaluar la viabilidad técnica de la solución propuesta e identificar riesgos y oportunidades para cosas que pueden no parecer fáciles intuitivamente.
• Los ingenieros front-end podrían comenzar a crear prototipos rápidamente para que pudiéramos probar y sentir la experiencia a medida que la diseñamos.
• Evitamos comunicar comentarios, fundamentos e ideas a través de largos hilos y correos electrónicos de Slack, ahorrando energía y tiempo.

Diseñando un sistema de claridad

Es increíblemente simple para un empleado que se incorpora al nuevo sistema de compensación ajustar su asignación total de recompensas arrastrando un control deslizante hacia la derecha o hacia la izquierda. Pero para el equipo de UX, diseñar esta herramienta única en su tipo, lograr ese resultado, fue todo menos fácil. Entonces, cubramos la complejidad oculta detrás de esa interfaz de usuario fácil de usar.

Las personas tienen diferentes niveles de conocimiento con respecto a los conceptos financieros. Cuando recibimos la documentación financiera que explicaba el nuevo sistema a los empleados, vimos conceptos como "salario frente a capital", "RSU frente a opciones", "% de X impactaba en % de Y". Pensamos: tenemos que hacer esto simple.

Queríamos minimizar el estrés relacionado con las decisiones de asignación de los empleados y ayudarlos a sentirse en control de sus elecciones. El sistema Shopify Flex Comp es una herramienta positiva que brinda agencia a nuestra gente. Al diseñar un sistema en estrecha colaboración con expertos financieros y legales, es fácil suponer que sus usuarios entienden los conceptos económicos.

Desempaquetando la complejidad

Cuando compras un mueble nuevo y quieres montarlo, siempre viene con un manual de instrucciones, en el que se explican las piezas y sus funciones. Hay una guía paso a paso que le ayuda a llevar a cabo la tarea con éxito.

Las instrucciones no están impresas directamente en las piezas a ensamblar. ¿Por qué? Eso sería una carga cognitiva alta y daría como resultado un mayor riesgo de errores del usuario y un sentimiento de frustración. ( Alguien que siempre odia tener que leer el manual .)

Al usar una analogía con el ensamblaje de muebles, definimos objetivos y resultados más precisos para las dos facetas principales de este nuevo sistema:

1. Flex comp UI : los usuarios hacen su selección y envían sus preferencias: la parte orientada a la acción.
2. Documentación interna y material de apoyo: los usuarios pueden profundizar en cada concepto financiero relacionado con esta nueva herramienta y la lógica subyacente.

Pero ambas facetas fueron igualmente cruciales. Con los muebles, las apuestas son bajas. Si ha ensamblado muebles suficientes veces, probablemente pueda tener éxito sin el manual. Y si te equivocas, simplemente lo desarmas y vuelves a intentarlo. No hay rehacer para comp. Una vez hechas, las elecciones de los empleados quedan bloqueadas hasta la próxima ventana de elección. Las decisiones que toman los empleados al usar la herramienta tienen un impacto directo en el sustento, por lo que es fundamental que la comprendan la primera vez. Tener información sobre herramientas que se vincule rápidamente a la teoría de la parte práctica prepara a los usuarios para tomar decisiones más informadas.

Con esa segmentación intencional, pudimos diseñar una interfaz de usuario más enfocada y minimizar la carga cognitiva superflua que podría acompañar a esta nueva experiencia de empleado.

Las personas no pueden guardar mucha información en su memoria a corto plazo. Esto es especialmente cierto cuando son bombardeados con múltiples datos abstractos o inusuales en rápida sucesión. Grupo Nielsen Norman

La receta de los deslizadores

Existen múltiples opciones de control interactivo para la selección de parámetros numéricos: escaladores, matrices, botones virtuales, controles deslizantes, campos de texto y alternar, por nombrar algunos. Cada uno puede ser apropiado dependiendo del contexto. Para el control principal de Flex Comp, queríamos que la interfaz de usuario mapeara naturalmente los datos del usuario que se modifican y procesan en el backend.

Cómo minimizamos los estados de error

Exploramos opciones con múltiples controles deslizantes apilados con variables únicas y rápidamente nos dimos cuenta de que la interfaz de usuario tendría que manejar y comunicar demasiados escenarios de error. (¡¿Y a quién le gusta que una interfaz de usuario le grite?!)

Al vincular múltiples controles deslizantes a un valor total, a menudo terminábamos asignando demasiado o muy poco de cada control deslizante del total disponible. Eso daría como resultado que el valor de asignación total de un empleado esté en un estado de error constante y que la acción de envío principal en la página se bloquee hasta que resuelvan todo.

Los buenos mensajes de error son importantes, pero los mejores diseños evitan cuidadosamente que ocurran problemas en primer lugar, así que centrémonos en el concepto que elimina las condiciones propensas a errores.

Nuestro enfoque final significa que el usuario siempre está en un estado válido, lo que resulta en una experiencia más positiva y placentera.

El equilibrio adecuado entre exploración y precisión

Con parámetros complejos, se debe establecer un equilibrio entre estas dos nociones:

• Exploración: permitir a los usuarios explorar fácilmente el efecto del control para todo el rango del parámetro (en este caso, deslizando el controlador), y
• Precisión : permitir al usuario elegir con precisión un valor específico (en este caso, mediante el uso de los campos de texto).

En cada extremo, verá los campos de texto que permiten al usuario llegar fácilmente a un número preciso escribiendo o navegando con el teclado. Esa combinación de controles hace que ese componente cumpla con los estándares W3C/WAI, que era un requisito esencial para cada elemento de diseño en este sistema. Las medidas de seguridad también evitan que el usuario seleccione valores fuera de su límite asignado. El escenario de cada usuario individual es único y está limitado por su propio límite.

A lo largo de cada etapa del proceso, tuvimos en cuenta un elemento muy importante: nuestra fecha de lanzamiento. Esa fecha nos ayudó a mantenernos enfocados en las partes esenciales de V1 y también nos ayudó a tomar las decisiones correctas rápidamente.

Al final de esta aventura de diseño, estábamos cansados ​​pero confiados en nuestra solución. Confiamos en nuestro proceso y pudimos marcar todas las casillas en nuestra lista de requisitos de lanzamiento de diseño:

• ¿Es fácil de usar? ✔️
• ¿Es accesible? ✔️
• ¿Cumple con las diferencias regulatorias regionales?✔️
• ¿Se ve bien? ✔️

Shopify Flex comp tuvo una tasa de suscripción del 92 % en la primera ventana de suscripción. Es utilizado por miles de empleados de Shopify y está disponible en docenas de países en muchas monedas diferentes. Algunas de las empresas más grandes del mundo ahora buscan asesoramiento mientras rediseñan sus sistemas de talento y compensación.

Mirando hacia atrás en esta aventura, algunos elementos clave marcaron la diferencia en mi opinión.

Aceptar desde el principio que este proyecto no se sentiría como un largo y tranquilo viaje por un río fue muy importante. Con esta actitud y mentalidad, nos mantuvimos enfocados en nuestros objetivos principales mientras mantuvimos un espíritu de equipo productivo a pesar de los múltiples cambios y una línea de tiempo agresiva.

Los diseñadores de UX son los que traen la empatía del usuario a la mesa de decisiones. Explicar por qué las decisiones X o Y podrían dañar las experiencias de los usuarios y, en última instancia, afectar la satisfacción del usuario con el producto. Se necesita mucha energía y motivación para impulsar un equipo en el que los diseñadores de UX son una minoría, pero es muy importante. Ser fuertes defensores de los intereses, las necesidades y las experiencias de los usuarios a lo largo del proceso de creación y desarrollo fue clave para el éxito de Flex Comp.

Gracias por permitirme compartir este hermoso viaje con ustedes. Espero que hayan disfrutado la lectura. Si tiene ganas de hablar, conectarse, no dude en comunicarse aquí .