Pagstar Dashboard e checkout
O painel administrativo da Pagstar permite ao time interno controlar e configurar o sistema, enquanto o painel empresarial oferece uma visão detalhada das transações, possibilitando a visualização dos ganhos e a realização de transferências via Pix.
Ambas as plataformas facilitam a gestão dos pagamentos recebidos através do checkout Pix da Pagstar, assegurando eficiência e segurança para administradores e clientes empresariais.
Papel desempenhado
Design Lead
Skills
Figma, Figmajam, Pesquisa com usuários, Descoberta de produto, Card sorting, Double diamond
PerÃodo
out 2022 - atual
Painéis
O Checkout Pix da Pagstar e o painel de visualização de extratos já existiam, porém com funcionalidades limitadas e seguia um template escolhido pelos programadores, sem a contribuição do time de design.
A missão do time de design foi entender o produto, identificar as necessidades e dificuldades dos usuários, e criar uma nova versão das telas dos painéis, aprimorando tanto a funcionalidade quanto a estética da plataforma. Para alcançar esse objetivo, conduzi o time por meio de um processo de double diamond, que abrange as etapas de descoberta, definição, desenvolvimento e entrega do produto.
Descoberta dos produtos
Inicialmente, utilizando a matriz CSD, identificamos certezas, suposições e dúvidas cruciais para orientar a pesquisa com os usuários. Esta pesquisa foi realizada tanto com os usuários do painel interno quanto com os clientes, destacando questões fundamentais para iniciar o processo de design de forma embasada.
Além disso, o time conduziu uma pesquisa de mercado para examinar as funcionalidades presentes em sistemas similares, predominantemente encontrados em plataformas de internet banking. Essa análise proporcionou insights valiosos sobre as práticas comuns e as expectativas dos usuários em relação aos recursos oferecidos.
Definição dos painéis
Após a pesquisa, o time adquiriu insights significativos e uma compreensão aprofundada das rotinas e necessidades dos clientes no sistema. Com base nessas informações, foi possÃvel identificar que os sistemas para o time interno da Pagstar e para os clientes seriam distintos, devido à s suas diferentes necessidades. Juntamente com stakeholders do projeto, esses insights foram organizados e representados em um diagrama de cÃrculos para uma melhor visualização e compreensão das descobertas.
Desenvolvimento
Na fase de desenvolvimento, iniciamos a elaboração dos primeiros wireframes, ainda em baixa fidelidade, para os painéis destinados ao uso interno na Pagstar e para o painel de uso dos clientes. Neste estágio, guiei o time através de uma etapa que denomino "playground", na qual os designers têm liberdade para criar individualmente suas ideias de wireframes. Posteriormente, nos reunimos para avaliar coletivamente as propostas, selecionando elementos que melhor se adequam ao contexto. Em seguida, colaborativamente, desenvolvemos wireframes de média fidelidade para conduzir testes de usabilidade com os usuários.
Definição do menu
Durante o desenvolvimento dos wireframes, identificamos a necessidade de obter mais informações sobre o comportamento dos usuários para definir o menu dos painéis. Dada a complexidade das funcionalidades do sistema, optamos por um menu lateral retrátil, simplificando-o para Ãcones. Embora tivéssemos decidido o design do menu, ainda precisávamos determinar a melhor forma de agrupar as opções para garantir maior intuitividade aos usuários do sistema.
Para abordar essa questão, coordenei o time na realização de um card sorting, envolvendo tanto membros internos da equipe da Pagstar quanto clientes que teriam contato direto com o sistema em operação.
Incialmente, definimos as etapas do teste:
Pré-teste
Desenvolvemos um exercÃcio denominado "ExercÃcio do Armário" para explicar o card sorting de forma clara aos participantes. Neste exercÃcio, os participantes foram desafiados a organizar peças de roupas dentro de caixas, simulando a organização de um armário pessoal. Criamos cartões representando diferentes peças de roupas, enquanto os participantes tinham a liberdade de nomear as caixas, que representavam os compartimentos do armário, e arrastar os cartões das roupas para dentro delas conforme sua preferência. Com isso, os participantes tiveram mais clareza na hora de realizar o card sorting real.
Card Sorting
Durante a aplicação do teste real, apresentamos aos participantes 20 funcionalidades essenciais do sistema, solicitando que as organizassem em caixas conforme sua intuição, além de atribuir nomes a essas caixas. Esse método permitiu a identificação da estrutura de organização preferida pelos participantes para o menu do sistema. O card sorting foi conduzido com 5 indivÃduos, e com base nos resultados obtidos, identificamos padrões semelhantes que nos possibilitaram criar o menu para os dois painéis de forma coerente.
Primeira entrega
Após a definição do menu, procedemos à finalização dos wireframes em alta fidelidade. Depois de algumas reuniões com a equipe de produto, chegamos a uma versão que agradava tanto aos usuários quanto aos stakeholders internos.
Na primeira entrega, o time de design concentrou-se nas telas principais: Home e Extrato. As demais telas seriam desenvolvidas nas próximas sprints, enquanto a equipe de desenvolvimento trabalhava nas telas de Home e Extrato.
Cadastro de clientes
Com o avanço do produto, a necessidade de permitir o cadastro de clientes no sistema, utilizado pela equipe comercial da Pagstar, tornou-se uma prioridade.
Primeiramente, foi necessário entender o fluxo atual de cadastro junto à equipe responsável, desde a prospecção do cliente até sua implantação. Para isso, realizei reuniões com a equipe e, em conjunto, criamos um fluxo visual do processo.
Após algumas rodadas de validação com a equipe comercial, desenvolvemos uma tela que atendia às suas necessidades e facilitava o dia a dia do departamento, de maneira mais intuitiva.
Conclusão
Apesar de a metodologia Double Diamond ter sido uma aliada do time no processo da primeira entrega dos painéis, em determinado momento foi necessário voltar à fase de descoberta para identificar um elemento essencial do produto. No caso do cadastro de clientes, o processo Double Diamond não foi realizado integralmente, pois a necessidade era mais clara e havia menos etapas envolvidas. As metodologias existem por um motivo: orientar o desenvolvimento de produtos centrados nos usuários. Contudo, na prática, adaptamos essas metodologias conforme a necessidade e o momento.