Em julho de 2022, a Shopify lançou o Shopify Flex Comp , nossa nova abordagem de remuneração que coloca o conceito de produto em primeiro plano na forma como os funcionários da Shopify (também conhecidos como Shopifolk) são pagos. É um projeto ousado e ambicioso que tem o potencial de reescrever a história da remuneração em nosso setor.

O Flex Comp dá autonomia aos funcionários sobre o pagamento. Até hoje, a forma padrão para as empresas em crescimento pagarem aos funcionários tem sido uma mistura inflexível e imprevisível de dinheiro e patrimônio que tira a agência dos funcionários e os recompensa com base nos caprichos do mercado. Nosso novo sistema permite que os funcionários escolham exatamente como desejam alocar sua recompensa total — entre salário, Unidades de Ações Restritas (RSUs) e Opções de Ações — e ajustar suas preferências à medida que suas vidas mudam.

Projetada por uma equipe pequena (mas poderosa) e entregue em quatro meses, a ferramenta precisava funcionar para milhares de funcionários em vários países com diferentes moedas e estruturas legais.

Projetar uma ferramenta tão complexa com esse cronograma exigiu que a equipe de design adotasse uma abordagem e uma mentalidade diferentes para obter sucesso. Manter uma mentalidade adaptativa, lidar com variáveis ​​variáveis, colaborar com equipes de várias disciplinas e destilar requisitos jurídicos/financeiros complexos em um design fácil de usar foram alguns dos desafios únicos que encontramos durante o processo.

Como designer de produto da equipe da Shopify, liderei os esforços de design neste projeto. Aqui está a história de como abordamos o UX por trás da ferramenta Flex Comp da Shopify e os principais desafios que enfrentamos ao longo da jornada de design.

Construindo o avião enquanto voa

Ao longo de quatro meses, construímos o avião enquanto voávamos.

Do lado do design nós:

• Criação de histórias de usuários;
• Cenários de usuário mapeados e tarefas;
• Explorou diferentes conceitos;
• Wireframed das soluções (desktop e mobile);
• Simplificou a arquitetura de conteúdo;
• Criação de novo visual de branding e linguagem de UI específica para a ferramenta;
• Testamos nossas soluções com funcionários internos em diferentes funções e níveis hierárquicos;
• Testamos nossas soluções com usuários com deficiência;
• Testei as soluções com os diferentes casos de bordas e múltiplas moedas;
• Criação de visuais para material de treinamento e documentação de funcionários;

Ao mesmo tempo, outras equipes da Shopify (jurídico, financeiro, engenharia , suporte, RH, acessibilidade) estavam descobrindo detalhes em seus respectivos domínios. Variáveis ​​legais, financeiras e técnicas mudavam a cada dia, tornando o projeto, às vezes, desafiador e frustrante.

Como a equipe de design conseguiu manter o rumo durante esta aventura selvagem?

Mentalidade adaptável é a chave

Para que este projeto fosse um sucesso, percebemos desde o início que tínhamos que adotar uma sólida mentalidade de adaptabilidade. Tivemos que começar a projetar sem requisitos finais e sabendo que as variáveis ​​poderiam mudar. Tínhamos que apresentar projetos à liderança que não estavam totalmente desenvolvidos, e estava tudo bem. Muita exploração de design seria jogada fora e isso também estava bem.

''A mudança é inevitável.'' E isso não poderia ser mais verdadeiro. A capacidade de se adaptar quando a mudança inevitavelmente ocorre é uma habilidade crítica no local de trabalho. Ter uma mentalidade adaptativa permite que você veja claramente um cenário e faça os ajustes necessários para seguir em frente.
Beth Hendricks

O cenário de alta confiança

Como é o cenário de caso de uso de 80%? E quais são os muitos casos extremos para os quais precisamos projetar?

O novo sistema de compensação precisava funcionar em dezenas de locais ao redor do mundo com diferentes regulamentações e leis financeiras. Sabíamos que a experiência precisava ser modular porque nem todos os funcionários teriam os mesmos perfis de alocação.

Trabalhando em estreita colaboração com a equipe financeira, desenvolvemos um perfil de usuário que representaria os cenários mais comuns para nosso novo sistema de alocação. Esse exercício nos permitiu definir algumas tarefas de usuário com as quais poderíamos começar a trabalhar porque seriam necessárias para a maioria dos usuários:

1. Compare suas preferências de alocação atuais com seu novo perfil de alocação
2. Selecione sua divisão de alocação entre salário e patrimônio
3. Selecione sua divisão de patrimônio entre RSUs e opções
4. Revise seu resumo
5. Envie suas preferências
6. Obtenha acesso fácil ao suporte e outra documentação para perguntas extras

Esse exercício nos permitiu identificar os fluxos de alta confiança para que pudéssemos começar a esboçar ideias e compartilhá-las com os especialistas de cada disciplina.

Colaboração ativa > Feedback assíncrono

Depois de termos nosso mapa de blocos de interface do usuário de alta confiança, implementamos rituais de colaboração interdisciplinar. Duas vezes por semana, tínhamos sessões em que apresentávamos nossas melhores opções de UX a um grupo de líderes de cada disciplina (jurídico, financeiro, talento, engenharia). Fizemos perguntas e explicamos a lógica por trás de nossa abordagem de UX para tomadores de decisão de cada disciplina. Foi uma excelente maneira também de entender por que certas coisas não funcionariam e trabalhar coletivamente em soluções.

Essas sessões colaborativas foram extremamente poderosas por vários motivos:

• Múltiplas disciplinas permaneceram alinhadas em uma visão unificada da experiência do usuário
• Adaptamos a interface do usuário rapidamente de acordo com os requisitos em constante mudança
• Minimizamos os riscos de excesso de design para soluções que não funcionariam
• Os engenheiros podem avaliar a viabilidade técnica da solução proposta e identificar riscos e oportunidades para coisas que podem não parecer fáceis intuitivamente
• Os engenheiros de front-end poderiam começar a prototipar rapidamente para que pudéssemos testar e sentir a experiência conforme a projetamos.
• Evitamos comunicar comentários, justificativas e ideias em longos tópicos e e-mails do Slack, economizando energia e tempo.

Projetando um sistema de clareza

É incrivelmente simples para um funcionário que entra no novo sistema de compensação ajustar sua alocação total de recompensas arrastando um controle deslizante para a direita ou para a esquerda. Mas para a equipe de UX, projetar essa ferramenta única - alcançar esse resultado - foi tudo menos fácil. Portanto, vamos cobrir a complexidade oculta por trás dessa interface do usuário fácil de usar.

As pessoas têm diferentes níveis de conhecimento sobre conceitos financeiros. Quando recebemos a documentação financeira que explicava o novo sistema aos funcionários, vimos conceitos como “salário x patrimônio”, “RSUs x opções“, “% de X estava impactando % de Y”. Pensamos: temos que tornar isso simples.

Queríamos minimizar o estresse relacionado às decisões de alocação dos funcionários e ajudá-los a se sentir no controle de suas escolhas. O sistema Shopify Flex Comp é uma ferramenta positiva que traz agência para o nosso pessoal. Ao projetar um sistema em estreita colaboração com especialistas financeiros e jurídicos, é fácil presumir que seus usuários entendam os conceitos econômicos.

Descompactando a complexidade

Quando você compra um móvel novo e quer montá-lo, ele sempre vem com um manual de instruções, que explica as peças e suas funções. Há um guia passo a passo que ajuda você a realizar a tarefa com sucesso.

As instruções não são impressas diretamente nas peças a serem montadas. Por quê? Isso teria uma carga cognitiva alta e resultaria em um risco maior de erros do usuário e sentimento de frustração. ( Alguém que sempre odeia ter que ler o manual .)

Usando uma analogia de montagem de móveis, definimos metas e resultados mais precisos para as duas principais facetas desse novo sistema:

1. Flex comp UI : os usuários fazem sua seleção e enviam suas preferências — a parte orientada para a ação.
2. Documentação interna e material de apoio: Os usuários podem mergulhar profundamente em cada conceito financeiro relacionado a esta nova ferramenta e à lógica subjacente.

Mas ambas as facetas foram igualmente cruciais. Com móveis, as apostas são baixas. Se você já montou móveis várias vezes, provavelmente terá sucesso sem o manual. E se você estragar, basta desmontá-lo e tentar novamente. Não há refazer para comp. Uma vez feitas, as escolhas dos funcionários ficam bloqueadas até a próxima janela eleitoral. As escolhas que os funcionários fazem ao usar a ferramenta afetam diretamente os meios de subsistência, por isso é fundamental que eles entendam isso na primeira vez. Ter dicas de ferramentas que se conectam rapidamente à teoria da parte prática configura os usuários para tomar decisões mais informadas.

Com essa segmentação intencional, conseguimos projetar uma interface do usuário mais focada e minimizar a carga cognitiva estranha que poderia acompanhar essa nova experiência do funcionário.

As pessoas não conseguem manter muita informação em sua memória de curto prazo. Isso é especialmente verdadeiro quando eles são bombardeados com vários dados abstratos ou incomuns em rápida sucessão. Grupo Nielsen Norman

A receita dos controles deslizantes

Existem várias opções de controle interativo para seleção de parâmetros numéricos: steppers, matrizes, botões virtuais, controles deslizantes, campos de texto e alternância, para citar alguns. Cada um pode ser apropriado, dependendo do contexto. Para o controle principal do Flex Comp, queríamos que a IU mapeasse naturalmente os dados do usuário sendo modificados e processados ​​no back-end.

Como minimizamos os estados de erro

Exploramos opções com vários controles deslizantes empilhados com variáveis ​​exclusivas e rapidamente percebemos que a interface do usuário teria que lidar e comunicar muitos cenários de erro. (E quem gosta de ouvir gritos de uma IU?!)

Ao vincular vários controles deslizantes a um valor total, muitas vezes acabamos alocando muito ou pouco de cada controle deslizante do total disponível. Isso resultaria no valor de alocação total de um funcionário em um estado de erro constante e na ação de envio principal na página sendo bloqueada até que eles descobrissem tudo.

Boas mensagens de erro são importantes, mas os melhores projetos evitam cuidadosamente a ocorrência de problemas em primeiro lugar, então vamos nos concentrar no conceito que elimina condições propensas a erros.

Nossa abordagem final significa que o usuário está sempre em um estado válido, resultando em uma experiência mais positiva e prazerosa.

O equilíbrio certo entre exploração e precisão

Com parâmetros complexos, um equilíbrio deve ser estabelecido entre essas duas noções:

• Exploração: permitir que os usuários explorem facilmente o efeito do controle para toda a faixa do parâmetro (neste caso, deslizando o controlador) e
• Precisão : permite ao usuário escolher com precisão um valor específico (neste caso, usando os campos de texto).

Em cada extremidade, você verá os campos de texto que permitem ao usuário chegar facilmente a um número preciso digitando ou navegando pelo teclado. Essa combinação de controles faz com que esse componente esteja em conformidade com os padrões W3C/WAI, que era um requisito essencial para cada elemento de design desse sistema. As proteções também impedem que o usuário selecione valores fora de seu limite alocado. O cenário de cada usuário individual é único e limitado por seu próprio limite.

Ao longo de cada etapa do processo, mantivemos um elemento muito importante em mente: Nossa data de lançamento. Essa data nos ajudou a manter o foco nas partes essenciais do V1 e também nos ajudou a tomar as decisões certas rapidamente.

No final desta aventura de design, estávamos cansados ​​mas confiantes na nossa solução. Confiamos em nosso processo e pudemos marcar todas as caixas em nossa lista de requisitos de lançamento de design:

• Isso é fácil de usar? ✔️
• É acessível? ✔️
• Está em conformidade com as diferenças regulatórias regionais?✔️
• Parece bom? ✔️

Shopify Flex comp teve uma taxa de aceitação de 92% na primeira janela de aceitação. Ele é usado por milhares de funcionários da Shopify e está disponível em dezenas de países em várias moedas diferentes. Algumas das maiores empresas do mundo estão agora buscando conselhos enquanto redesenham seus sistemas de talentos e remuneração.

Olhando para trás nesta aventura, alguns elementos-chave fizeram toda a diferença na minha opinião.

Aceitar desde o início que este projeto não pareceria uma viagem longa e calma em um rio foi muito importante. Com essa atitude e mentalidade, mantivemos o foco em nossos objetivos principais, mantendo um espírito de equipe produtivo, apesar das múltiplas mudanças e de um cronograma agressivo.

Os designers de UX são os que trazem a empatia do usuário para a mesa de decisão. Explicar por que as decisões X ou Y podem prejudicar as experiências dos usuários e, em última análise, afetar a satisfação do usuário com o produto. É preciso muita energia e motivação para impulsionar uma equipe na qual os designers de UX são a minoria, mas é muito importante. Ser um forte defensor dos interesses, necessidades e experiências dos usuários durante todo o processo de criação e desenvolvimento foi a chave para o sucesso do Flex Comp.

Obrigado por me deixar compartilhar esta linda jornada com você. Espero que tenham gostado da leitura. Se você quiser conversar, se conectar, sinta-se à vontade para entrar em contato aqui .