#Prototipação | Explore Tumblr Posts and Blogs

kaweski · 1 year

Text

Orange DS, como surgiu meu primeiro Design System

Neste post vou trazer minha trajetória dentro do Design System do

Inter Product Design, o Orange DS, e como foi minha visão de aprendizado até chegar onde estou hoje.

Spoiler alert: O post sobre migração de carreira ainda não escrevi, mas está pra nascer em breve, e logo coloco o link aqui para quem tiver curiosidade de saber como foi minha trajetória.

Background de Front-end Developer 👩🏼‍💻

Pra quem não me conhece, muito prazer eu sou a Nat Kaweski, sou formada em Ciência da Computação, me formei no final de 2020.

Eu trabalhava há 6 anos já como front-end developer e já tinha um ano como desenvolvedora no Inter no time de internet banking PJ, e foi quando surgiu a ideia de migrar pra área de design.

Mas pra quê isso hein?

Umas das coisas que eu sempre me dediquei muito foi a parte detalhista do front trabalhando especificamente com HTML e CSS. Eu ficava horas penteando layout, escrevendo e reescrevendo meus componentes em React/Angular com olhar muito crítico pro design, e o que milagrosamente sempre fez meu código se destacar aos olhos dos clientes, como algo que era fiel aos layouts propostos pelos designers com quem trabalhava.

A partir disso eu fui estudando Figma e as ferramentas mais complexas dentro dele, como Auto Layout, Variants, Version History, Constraints & Resizing, fui estudando um pouco de visual e prototipação também, me cadastrei em alguns challenges de UI na internet e fiz alguns cursos de design pela internet afora aí, além de ter estudado UX na faculdade e até na Alura no curso de carreira de UX/UI Design.

Primeiro contato com Design System

Com essa trajetória e esse desejo por trabalhar com a parte que me brilhava os olhos, o time de Product Design do Inter me proporcionou uma migração incrível de carreira, e eu me encontro com eles há mais de 1 ano.

Iniciei meu projeto trazendo uma solução legal que pretendo contar depois no post que farei sobre minha migração de carreira. 😊

A partir desse primeiro contato com o time de design, comecei a trabalhar com pessoas incríveis no time, sendo o Fabio Matsuda e o Cassius Fraga quem me proporcionaram essa migração de carreira.

Também fiz um trabalho em conjunto principalmente com o Célio Silva e o Cadu Braga, envolvendo nomenclatura de componentes, adaptação de componentes para uma utilização mais genérica e sempre pensando em organizações inteligentes dentro do Figma, seja em layouts, sortings ou até mesmo nas layers dos componentes.

Nós já tínhamos uma primeira biblioteca quando eu entrei no time, mas começamos a criar uma nova a partir da nova disposição da marca, foi quando realmente começou a nascer um novo Design System no Inter.

Outro passo importante que surgiu com a minha atuação no time de Design System (DS) foi o bloqueio das bibliotecas e liberação de edição somente pelo time de DS, versionamento os arquivos utilizando Version History do próprio Figma, evitando conflitos e alteração de componentes por qualquer pessoa do time de design.

Isso já trouxe qualidade pra dentro do nosso DS e trouxe um controle maior do time de DS sobre as bibliotecas.

Iconografia ✅

Além de todo esse processo inicial de introdução ao DS, foi me mostrada uma forma de criação e visual: a iconografia! Uma forma de ser simples e direta, trazendo para a parte visual o que a mensagem quer dizer a partir de um desenho simples.

Com isso nasceu um novo hobby, e criei toda uma biblioteca de variants com todas as variações possíveis de ícones dentro do nosso DS, a ideia é trazer simplicidade e trazer consistência na utilização dos tamanhos dos ícones.

Também foi feito um algoritmo que exporta todos os ícones em SVGs para facilitar o trabalho dos desenvolvedores front-end, que foi iniciado por mim no time de DS e finalizado pelo time de front-ends do Inter.

Organização dos componentes

Hoje a organização do nosso DS é estruturada com design atômico, um termo cunhado por Brad Frost, e que se baseia em pequenas partículas que juntas formam elementos maiores, e as nomenclaturas que utilizamos para nossas bibliotecas inicialmente foram baseadas em quarks, que juntos formam átomos, que por sua vez juntos formam moléculas, que juntas formam organismos vivos, os quais juntos formam fluxos inteiros.

Nos quarks colocamos vários conceitos que faziam sentido e formavam qualquer componente mais complexo dentro do nosso DS, são eles:

Espaçamentos múltiplos de 8px;

Famílias de fontes;

Cores principais e secundárias;

Logos do Inter;

Detalhes de bordas, ícones e coisas que são indivisíveis dentro da nossa estrutura.

A partir dessa organização, a gente separava entre biblioteca de componentes para Web e App, e lá dentro separávamos entre Átomos, Moléculas e Organismos de cada um.

Mais pra frente percebemos a necessidade de evoluirmos isso, mas vou deixar pra contar mais pra baixo. 🙃

Sobre o trabalho reativo

Um dos meus maiores enfrentamentos foi com a introspecção e timidez, eu tive que fazer encontros diários com os nossos product designers, a partir de calls, design critiques e outros ritos do nosso time.

Com isso pude aperfeiçoar minha comunicação e aprimorar minhas relações interpessoais, identificar o que cada designer precisava que o DS entregasse, e com isso criamos um fluxo de trabalho sob demanda.

Criamos um canal no nosso principal mensageiro, o Microsoft Teams, e centralizamos dúvidas, sugestões, bugs e anúncios do time em relação a DS, todas as demandas de DS dentro de um canal que apelidamos nada mais nada menos do que "Canal do Design System". 😋

A partir desse canal percebi a necessidade de aperfeiçoamento dos nossos componentes também, e a importância de criar componentes que fossem mais genéricos, e não tão elaborados e específicos para cada fluxo, já que hoje somos um Super App e atendemos a várias frentes e avenidas no mercado. Nesse momento eu estava trabalhando em par com o

Lucas Reis — um abraço amigo! — e que me ajudou num período de crescimento do nosso Design System, e me deu vários insights de quais pontos precisávamos atacar primeiro antes de evoluir de fato nossas bibliotecas.

Precisávamos de uma capacitação dos nossos designers no uso do Figma e do nosso DS de forma inteligente.

Validação dos fluxos

Como já contei, uma da formas de validação do trabalho dos product designers era o formato de design reviews, onde eu validava o uso correto e esperado do nosso DS. Outros formatos de validação era como review de commits.

Mas do que isso se trata?

Basicamente cada designer precisava informar no nosso Canal de Commits qual projeto estava trabalhando, e como o DS poderia validar o seu fluxo.

E foi nesse momento em que começamos a encontrar um gargalo no time, o uso do Figma como principal ferramenta me fez perceber que precisávamos capacitar urgentemente nossos designers e ensinar no uso das ferramentas mais de smart layout a partir de Workshops, tutoriais e até a partir de links dos playgrounds do próprio Figma.

Foi bem interessante pois foram dados vários Workshops e o time de fato foi aprendendo a usar todos os formatos de organização do Figma, e hoje temos um time mais capacitado que utiliza nosso DS de forma inteligente e que consegue entender a necessidade de termos bibliotecas mais abrangentes e genéricas, além de facilitar o uso entre as várias avenidas, facilita a vida dos desenvolvedores quanto a reutilização de código que precisam implementar em cada fluxo.

Isso trouxe ganho de tempo, consistência nos fluxos, além de trazer mais agilidade e demandas mais robustas quanto ao layout, ao invés de olharmos para detalhes simples, estávamos agora atuando com demandas mais complexas que exigiam mais das nossas skills dentro do time.

Nasce o Orange DS 🍊

Com isso fizemos uma retrospectiva do design system no primeiro semestre e quanto de ganho tivemos no primeiro semestre com a evolução do nosso Design System, e criamos sua primeira versão entregue para toda empresa, e batizamos de Orange DS!

Foi um marco para o time de Product Design, ganhamos protagonismo, estávamos sendo mais consistentes nas entregas, e foi um grande upgrade no nosso DS pois, quando se dá nome, se cria, se evolui e se mantém.

Trabalho stand alone por um tempo

Por um bom tempo permaneci sozinha no Design System, nisso eu tentei atacar o máximo de demandas possível até encontrarmos uma equipe legal para adentrar o nosso time de DS.

Foi quando fizemos uma Aceleração de Design com o time da Dio, e a apresentação consistia de como funcionava nosso trabalho dentro do Design System, e além disso: mostramos como é fácil criar telas utilizando um design system robusto e completo, e nosso exemplo foi criar um Spotify utilizando componentes do nosso Orange DS, foi nosso momento mão na massa.

Outra forma de trazer aprimoramento visual pro time foi sugerir uma forma de adaptação das nossas telas para versão Darkmode, esse mesmo estudo que fiz foi implementado por um time de desenvolvedores iOS. Recentemente foi feito um Hackaton dentro do time de T.I. — que consiste de um evento em que tinham 3 stacks a serem desenvolvidas: iOS, Android e Multiplataforma, do qual eu,

Adalton Junio e

Bruna Fragelli ganhamos o primeiro lugar, mas eu conto sobre esse projeto num outro post — mas o time de iOS adaptou meu estudo de Darkmode para as telas em iOS, e foi um sucesso! Eles ganharam em terceiro lugar, e aguardemos mais resultados dessas adaptações nos futuros projetos. 🙃

O time de Design System também foi responsável pelo refactor do novo Footer do site institucional, e recentemente do novo Header também. Foi feito estudo de análise dos dados coletados, teste de usabilidade, envolvimento das equipes, stakeholders, e todo o processo de descobrimento e criação de fluxo.

Outra forma de atuação do Design System nesse meio tempo foi o trabalho em conjunto com outros desenvolvedores, sendo desenvolvedores Front-end, melhorando assim a biblioteca no Storybook, trabalhando com desenvolvedores Android e iOS, fazendo validação de fluxos e agindo na solução de componentes base.

Também estamos atuando com o time de Métricas (juntamente com a

Adriana Tamie Akamine), fazendo o tagueamento de componentes base e averiguando os dados coletados a partir das plataformas de análise de dados. O foco desse processo é avaliar a usabilidade e verificar a interação dos usuários com nossos componentes mais básicos.

Fiz também um estudo de cores auxiliares das quais precisávamos para adaptação de fluxos que precisavam de cores além das que tínhamos como primárias e secundárias. Foi quando fiz um cherry pick no Material Design e criamos uma biblioteca auxiliar de cores, perfeitamente apelidadas com nomes de frutas para serem utilizadas dentro do nosso Orange DS.

Entrada de novos colegas no DS! 🥳

Pausei depois de quase dois anos sem descansar e tirei minhas férias.

Foi quando tive minha primeira promoção na vida, dada graças a minha querida

Thais Falabella que proporcionou a melhor gestão que já tive, trazendo caminhos incríveis para trilhar e oportunidades únicas que eu me senti realmente protagonista da minha carreira. Falarei melhor dela em outro momento quando for contar da minha trajetória dentro do design.

E enquanto estava de férias, outras duas pessoas ingressavam o time de DS para criarmos juntos o projeto que estamos dando vida hoje, um abraço especial para o

Mateus de Paula Tomaz Santos e para o

Lucas Castro. ❤️

Os dois têm olhares muito criteriosos pra acessibilidade, visual, ilustração, iconografia, white space, e entre outros, cada um com sua particularidade, e que tem servido de inspiração para deixar meu trabalho cada vez mais incrível quanto o deles.

Documentação

Com a entrada de novos olhares pro estava sendo criado por apenas uma pessoa até então — eu — , percebemos que nossa biblioteca estava excelentemente robusta, mas muito específica por se tratar de um Super App, haviam mais de 1000 componentes e styles nas nossas bibliotecas, o que criava mais gargalo dentro do DS pois estavam sendo utilizados muitos componentes.

Com isso, nós do time do DS resolvemos enxugar nossos componentes, além de simplificar a vida dos nossos product designers e desenvolvedores, e começamos a popular a nossa documentação com:

Anatomia dos componentes Informando os paddings, margins, spacings, fonte, border radius, etc.

O que pode fazer Aplicações em conjunto, sozinhos, quais layers poderiam ser ocultas, etc.

O que não pode fazer O que não poderia ser realizado na adaptação de cada componente, como layers que não poderiam ser ocultas, cores que não poderiam ser utilizadas, troca de fontes, etc.

Aplicação em fluxos Quais fluxos específicos aqueles componentes estava sendo utilizados, como adaptar no fluxo, como posicionar, etc.

Nova organização do Orange DS

A partir da documentação percebemos também que nossa biblioteca não parava de crescer, e a partir do momento que temos uma lib que já consistia de mais de 1000 componentes, porque continuava crescendo?

Foi quando percebemos que precisávamos criar componentes mais genéricos, mais robustos, que abrangessem todos as avenidas em que eram utilizados, prever utilização de novos componentes sem precisar ser reativo, e sermos mais proativos.

Foi quando adaptamos nosso design atômico para algo sem analogias trazendo a taxonomia de:

Foundation > Base Components > Components > Templates.

Além disso trouxemos bibliotecas que fariam sentido para avenidas que precisassem de bibliotecas "Not in DS", e denominamos como Exceptions & Helpers.

Próximos passos

Enfim, hoje nos encontramos num Design System que precisa de mais olhar crítico para a "robustês", enxugar o que se pode fazer, criando componentes e adaptando os já existentes para simplificação, escalabilidade e adaptação para os mais variados cenários.

O foco hoje do nosso trabalho é ser mais proativo e menos reativo como tava sendo lá no início, com isso evoluímos com um DS mais maduro e que tem acompanhado o time de product designer também.

Também estamos contratando desenvolvedores para nosso time de Design System, hoje contamos com um Front-end Developer, em breve vamos trazer outras stacks como iOS e Android developers, QA e P.O.

Eé isso! Espero que esse post seja de grande valia, mas principalmente dizer que um Design System é um produto que está sempre em evolução.

Assim como analogia que utilizamos antes, acredito que o DS é vivo ainda, por isso sofre grandes mudanças constantemente, sempre evoluindo junto com o time, principalmente porque o time também evolui.

Não esquece de dar 👏 pra continuarmos evoluindo e crescendo.

#designsystem #design #uxui

1 note · View note

brasilempregos · 1 year

Link

Descrição da vaga Pessoa empreendedora saúde mental Descrição: O você deve ter para ser um(a) ACEr: Ensino superior completo; Experiência com Gestão de Projetos; Experiência com empreendedorismo/ ter criado sua própria Startup; Experiência com metodologias ágeis; Prototipação e MVP; Capacidade de construir e analisar BCs de modelos de negócios; Desejável experiência no mercado da Saúde, especialmente em Saúde Mental; Desejável residir em SP. Você é/tem? Autorresponsabilidade; Comunicação; Espírito de Equipe; Mobilização de Pessoas; Networking Estratégico; Pensamento Científico; Visão Estratégica. Buscamos uma pessoa empreendedora para estruturar em parceria com a ACE um novo negócio na área da saúde. Essa pessoa será a principal responsável por gerir a operação da empresa, definindo e administrando as estratégias financeiras e operacionais da empresa, desde a validação até a escala. Planejar, organizar e operar o processo de validação do negócio, assegurando a saúde financeira da companhia, afim de torná-la cada vez mais lucrativa, realizando controle de gastos de maneira estratégica. Quando você for um(a) ACEr você vai: Estruturar o processo de validação do novo negócio; Ser o principal guardião do plano de negócios e do orçamento da empresa; Planejar, organizar, dirigir e controlar as atividades relacionadas ao administrativo, financeiro, contabilidade, fiscal, controladoria, tesouraria e departamento pessoal; Implantar e melhorar continuamente processos e políticas da empresa; Acompanhar questões jurídicas que afetem o setor, garantir que a empresa cumpra todos os requisitos legais e regulamentares; Trabalhar com métodos ágeis, desde entrevistas exploratórias até construção e iteração de MVP com cliente; Trabalhar na execução ponta-a-ponta de um Business Case com as principais descobertas e métricas levantadas via testes, incluindo modelagem financeira – é importante que essa pessoa já tenha atuado com isso; Garantir o alinhamento entre todos os stakeholders envolvidos no processo: co-founders, investidores, colaboradores e clientes.

0 notes

petrosolgas · 2 years

Text

Vibra Energia abre 120 vagas de emprego presencial e home office para profissionais de nível técnico e superior

A Vibra Energia, empresa que atua na distribuição e comercialização de combustíveis provenientes do petróleo e biocombustíveis, está em busca de profissionais para preenchimento de vagas home office e presenciais no Rio de Janeiro. São no total 120 vagas de emprego voltadas para profissionais de nível técnico e superior, com cargos para Designer de Produtos, Engenheiro de Dados, Cientista de Dados, Analista de Trade Marketing Jr, Arquiteto de Aplicações, entre outras funções.

Cargos oferecidos pela Vibra Energia

Confira algumas vagas home office e Rio de Janeiro:

Designer de produtos – RJ

Necessário superior completo, ter experiência em aceleração de ideias até prototipagem, desejável pós-graduação e ter participado de algum bootcamp, curso relacionado à UX ou design, experiência de 3 a 5 anos na área, conhecimento em inglês intermediário.

Engenheiro de dados – RJ

Necessário experiência em projetos de dados, com programação em Python e prática em Azure Data Platform, usando alguns de seus componentes: Synapse Analytics, Data Factory, Data Flow, Data Lake, Databricks, desejável conhecimento de Alteryx, Tableau e em SSIS.

Engenheiro de manutenção (elétrica) – RJ

Necessário curso de engenharia elétrica com registro no conselho de classe CREA, disponibilidade para viagens, inclusive para trabalhos eventuais em finais de semana e feriados, desejável experiência em rotinas de manutenção, em fiscalização de serviços ou obras e na elaboração de especificações de contratação de serviços elétricos.

Analista de desenvolvimento sistemas – Home office

Necessário curso superior completo nas áreas de TI, engenharia, administração ou marketing, experiência no desenvolvimento de ponta a ponta de produtos digitais, conhecimento de técnicas de design thinking para ideação, pesquisa, prototipação e validação de soluções, desejável inglês avançado e habilidade de organização e planejamento para manter tarefas e Roadmap priorizados, alinhados às diretrizes de negócio do produto.

Analista de operações Jr

Necessário formação em engenharia mecânica ou civil, experiência em acompanhamento de investimento, conhecimento do Pacote Office, principalmente Excel avançado, desejável ter foco em resultado e em segurança operacional, proatividade, liderança e capacidade analítica.

Saiba como participar do processo seletivo da Vibra Energia

Profissionais que possuam os pré-requisitos exigidos e tenham interesse em vagas home office ou presenciais abertas na Vibra Energia devem acessar a página de oportunidades da empresa na plataforma da recrutadora Gupy. Para confirmar a participação no processo seletivo é necessário selecionar a vaga desejada e candidatar-se criando um login no site.

Benefícios oferecidos

Os candidatos selecionados para trabalhar na Vibra Energia receberão vários benefícios, dentre eles estão incluídos:

Assistência médica;

Assistência odontológica;

Plano de previdência complementar;

Licença maternidade de 180 dias;

Licença paternidade de 20 dias consecutivos;

Disponibilização da plataforma de bem-estar, com atividades voltadas para o corpo e mente;

Benefícios educacionais para filhos, da creche ao ensino médio.

Conheça a Vibra Energia

A Vibra Energia (ex-BR Distribuidora) é uma sociedade anônima de capital aberto com sede na cidade do Rio de Janeiro, fundada em 12 de novembro de 1971, a empresa foi subsidiária da Petrobras até julho de 2019.

A companhia atua no segmento de distribuição e comercialização de combustíveis derivados de petróleo, biocombustíveis, lubrificantes, emulsões asfálticas e produtos químicos. Segundo a Exame, em 2017 era a segunda maior empresa brasileira em faturamento.

A Vibra Energia é a maior do setor de distribuição de combustíveis no Brasil, a empresa está presente nos 26 estados brasileiros e no Distrito Federal com mais de 8 mil postos licenciados sob a bandeira Petrobras, Ipiranga e Raízen como seus principais concorrentes.

O post Vibra Energia abre 120 vagas de emprego presencial e home office para profissionais de nível técnico e superior apareceu primeiro em Petrosolgas.

0 notes

lasgportfolio · 2 years

Text

Repensar a experiência da área Perfil do app XP foi o primeiro desafio que tive na XP Inc. Na época, o perfil era a quarta tela mais acessada a partir da home e existia um desejo entre os stakeholders de dar mais protagonismo àquela área.

Trabalhar no Perfil Progressivo foi uma experiência interessante e inspiradora que me fez transitar entre user research, gamification, planejamento e facilitação de workshops ao mesmo tempo que davas meus primeiros passos para conhecer o negócio e as pessoas da XP Inc.

Minha atuação: planejamento e execução do processo de discovery, facilitação de workshops, planejamento e acompanhamento do processo de entrevista com usuários, prototipação em alta fidelidade, hand-off de componentes e fluxos.

problem spacing

Print em produção da tela do perfil no app XP em Junho 2021

Esse era o perfil do app XP em junho de 2021, quando comecei a trabalhar no projeto de Perfil Progressivo. Com os dados de tagueamento do app, identificamos que essa era a quarta área mais acessada a partir da home, com 55,6% dos cliques. Isso significava que uma quantidade gigante de usuários estavam sendo redirecionados para uma lista simples de opções de menu.

Por se tratar de uma tela construída em sistema legado e não sincronizada com as ferramentas de analytics, não conseguíamos saber ao certo o número de page-views do Perfil. Mas, tendo o número de cliques a partir da home e sabendo que esta tinha uma média de 1M acessos/mês, era possível entender que uma tela com tantos acessos dentro da navegação do app merecia mais protagonismo do que um menu em lista: ela poderia ser usada para que o usuário acompanhasse seu avanço na XP e para oportunidades de cross-selling.

Os principais motivos que nos levaram a priorizar o Perfil Progressivo dentro do backlog da squad eram:

A tela era totalmente construída em legado e não obedecia as diretrizes visuais do design system

A XP tinha duas modalidades de conta: Conta Digital e Conta Investimentos. Somente uma era contemplada no perfil e não estava claro para o usuário qual era a modalidade do número de conta exibido ali.

A quantidade estimada de acessos por mês abria possibilidades para utilizar a área como mais do que um menu, como oferecer insights sobre a saúde financeira do cliente e fazer cross-selling de produtos

Em uma pesquisa quantitativa (planejada e disparada antes de eu entrar na XP), os usuários avaliavam a experiência do perfil com uma nota 3/5

Nesta mesma pesquisa, quando perguntados sobre o que poderia melhorar na experiência, os clientes citaram itens relacionados à melhoria da arquitetura de informação, novas features e melhorias de layout.

worksession de ideação

Uma das coisas que eu mais gosto de fazer enquanto product designer é planejar e facilitar workshops. Os resultados gerados e as ideias que nascem ao colocar pessoas de expertises diferentes para pensar juntos em soluções para um problema são sempre superiores do que quando uma pessoa pensa sozinha em tudo.

Ao mesmo tempo, eu era nova na empresa e uma worksession também era uma forma excelente de conhecer as pessoas com quem eu teria interface no dia-a-dia e me apresentar para elas. Pensando nisso, agendei um workshop que tinha como objetivo responder ao desafio levantado pelos stakeholders: Como podemos trazer protagonismo para o perfil e torná-lo imprescindível para a jornada dos clientes?

O workshop remoto reuniu pessoas de tech, produtos e design da tribo e consistiu em apresentar o problem spacing, os resultados da pesquisa quantitativa, um breve benchmark e então, uma dinâmica de How Might We com a pergunta-tema. Depois da dinâmica, os participantes foram divididos em grupos e desenharam wire-frames das ideias mais votadas.

Exemplos de wireframes gerados pelos grupos durante o workshop

Depois de analisar os resultados do workshop, consegui dividir as ideias dos participantes em três grupos principais

Recomendação e estatística: visão de extrato centralizado de todas as contas, estatísticas de uso dos serviços, análise sobre risco e rentabilidade, nível de diversificação da carteira e adequação ao perfil de investidor, junto com recomendações de produtos.

Gamifcation e benefícios: tarefas a serem concluídas relacionadas aos investimentos e sistema de pontuação/recompensas, uso de estratégias de social e member get member

Arquitetura de informação: alterar o gatilho de acesso ao perfil na home, separar a área de configurações da área de perfil, reorganizar os itens existentes por tema e melhorar a interface, adequando ao Soma Design System.

protótipo inicial e validação com usuários

Unindo os resultados da pesquisa quantitativa com as ideias e os rascunhos dos participantes do workshop, consegui desenhar um primeiro protótipo que visava corrigir os problemas encontrados no perfil atual e trazia uma nova feature gamificada.

Prototipação no Figma do fluxo de teste para clientes avançados

Com a ajuda de uma das especialistas em user research do time, defini as perguntas a serem respondidas, escrevi o roteiro, planejei e recrutei usuários para entrevistas que tinham como objetivo validar o conceto de gamificação e testar a usabilidade do novo perfil.

Foram realizadas 6 entrevistas com clientes XP, divididos entre 3 que se consideravam iniciantes nos investimentos e 3 que afirmavam já possuir um conhecimento mais avançado sobre o tema.

Exemplo da primeira tela do fluxo em cada versão do protótipo. A tela da esquerda foi utilizada nos testes com clientes Iniciantes; a da direita, com clientes Avançados.

percepções gerais dos testes

O que foi positivo

A ideia de uma solução gamificada ligada à vida financeira foi bem recebida por todos os participantes. Eles se interessavam, engajavam, faziam perguntas e conseguiam encaixar dentro do próprio dia-a-dia

A nova arquitetura de informação do perfil estava, em geral, clara. Os clientes conseguiam navegar e buscar as informações e gostaram do novo layout. Eram necessários poucos ajustes pontuais

O que foi negativo

Os usuários não entenderam muito bem a mecânica da gamificação. Os pontos que mais geraram dúvidas foram equilíbrio entre desafio proposto e pontos recebidos, resgate de brindes através de pontos e nivelamento de conhecimento.

Uma gamificação assertiva é aquela que é permeada em todo o serviço. Os usuários sentiram falta disso durante o teste e questionavam se ações feitas fora do que foi proposto no protótipo gerariam pontos.

A ideia de recomendação de investimentos dentro do perfil gerou confusão entre os clientes mais iniciantes e desconfiança entre os mais avançados.

O principal insight que tirei dos testes é que a gamificação precisava ter uma mecânica muito sólida para fazer sentido e que o ideal seria redesenhar o seu funcionamento com a ajuda de um profissional de game design para, então, testar novamente. Por outro lado, as alterações na estrutura da tela de perfil que não envolviam a feature gamificada precisavam de poucos ajustes pontuais e já poderiam entrar no backlog do time técnico.

workshop: priorização técnica

Depois de iterar o protótipo com as melhorias identificadas no teste, planejei uma dinâmica de priorização com o time técnico. A dinâmica consistia em três etapas: primeiro, eu apresentei o protótipo e o time tech dividiu o conteúdo do fluxo em entregas menores.

Em seguida, nós discutimos e atribuímos uma nota entre P, M e G para cada entrega nos atributos Esforço técnico, Valor para o negócio e Valor para o usuário. Todos os membros da squad (PM, desenvolvedores mobile e backend e eu) trouxemos insights e votamos em todos os quesitos, mesmo os que não necessariamente faziam parte da nossa skill. Os desenvolvedores e o PM acompanharam as entrevistas com o usuário, o que fez essa discussão ser muito rica e colaborativa.

A terceira parte consistia em alocar cada entrega em uma matriz de Valor x Esforço. Assim, conseguimos entender quais eram as partes mais importantes, quais geravam valor com menos esforço e poderiam ser priorizadas primeiro e quais poderiam ser descartadas.

Visão da dinâmica. Cada card preto é uma entrega e os emojis dentro dele representam os votos acordados pela squad em cada atributo.

Após esta etapa com os desenvolvedores, utilizei o Maze para uma rodada de testes de usabilidade remotos rápidos a fim de validar que as features descartadas não teriam impacto na experiência geral, e também ter resultados quantitativos para corroborar os resultados encontrados nas entrevistas com users.

protótipo final e handoff

Depois de mapear os resultados do Maze, o que o time considerou como impossibilidades técnicas e o que foi descartado da primeira versão, iterei novamente o desenho das telas para uma visão de alta fidelidade. Pedi ajuda para devs e PM para mapear os casos de uso e construí o user flow das telas.

Link para o protótipo final

Principais telas no fluxo do Perfil: (da esquerda para a direita) Perfil, Header expandido e Configurações

Parte da documentação de hand-off no Figma

Componentes novos propostos no Perfil documentados para entrar no Soma Design System

entrega em produção e resultados

Fiz o acompanhamento e validação das entregas ao longo do fluxo do time de desenvolvimento. O novo perfil subiu em produção com um gatilho de feedback voluntário que redirecionava o usuário ao Medallia, onde ele poderia avaliar o NPS da nova tela e deixar comentários. O score da tela flutuava em uma média mensal de 70 pontos.

Ao longo do tempo, o perfil foi sendo iterado com ajustes simples para atender à necessidades do negócio e dos usuários. Entre as mudanças feitas, estão a adição de um fluxo para edição de dados cadastrais e atualização dos atalhos disponíveis para novas features lançadas pela XP.

#gamification #user research #ui #xp #delivery #discovery

0 notes