A marca de marmita vegana nasceu em 2016 e após o rápido crescimento da operação precisou reformular seu e-commerce — buscando aprimorar a experiência do cardápio e implantar um novo modelo de assinatura — e procurou a Plurix para ajudar nessa reestruturação.

Principais problemas que motivaram a reformulação do e-commerce:

1. A plataforma não explicava o serviço, impactando em consumo de horas da equipe de atendimento para responder dúvidas básicas de clientes e potenciais clientes;
2. Não existiam filtros no cardápio, um problema que prejudicava a experiência atual do cliente e seria potencializado com o crescimento do portfólio da marca;
3. Os usuários se frustravam ao descobrir somente na etapa do checkout que seu endereço não estava dentro da área de entrega, após dedicar tempo na montagem do cardápio.

Objetivos:

• Redução de contatos com a equipe de atendimento para sanar dúvidas básicas;
• Aumento da conversão através da nova experiência do cardápio;
• Aumento no volume de clientes da assinatura.

O processo de imersão e pesquisa

Imersão no negócio:

O primeiro passo foi fazer um workshop de imersão para entender os movimentos já planejados pela marca, necessidades do negócio que o novo e-commerce precisaria atender e as dores dos usuários já identificadas pela equipe de atendimento em relação a marca e a plataforma atual.

O mais importante nesta etapa é colocar as áreas estratégicas para participar da discussão. Traga a visão do marketing, os desenvolvedores, a galera de atendimento, e qualquer outra área que de alguma forma se relacione com o produto atual e pode colaborar para uma visão panorâmica dos pontos fortes e fracos do produto.

Um workshop simples, utilizando como ferramenta principal a matriz CSD, foi o suficiente para imergir no negócio e mapear uma série de questões úteis para aprofundarmos nas próximas etapas.

A importância de uma marca direcionada a dados

Beleaf é uma marca liderada por pessoas que reconhecem a importância dos dados e foi daqui que tiramos insumos valiosos durante a etapa de pesquisa:

• Google Analytics e Hotjar: as ferramentas nos deram respostas sobre conteúdos e funcionalidades da plataforma antiga que eram importantes para os usuários, pontos da navegação que geravam abandono e outros insights sobre usabilidade.
• Pesquisas de perfil do cliente e pratos: a marca já contava com pesquisas recentes que nos muniram de informações sobre o perfil demográfico dos clientes, o interesse do público pela marca e as expectativas em relação aos produtos.
• Pesquisas de satisfação: após 10 dias da compra todo cliente recebe um convite para responder uma pesquisa composta por questões quantitativas e qualitativas que, para a nossa necessidade de investigação, foi um prato cheio para captarmos insights sobre as motivações de compra, as dificuldades enfrentadas no site, a percepção geral da marca e em quais aspectos a experiência deixava a desejar.

Além das fontes acima, também utilizamos as redes sociais da marca para mapear as principais dúvidas que os usuários apresentavam, elogios e elementos que evidenciassem os motivos que levam as pessoas a se engajarem e comprarem Beleaf.

Redes sociais, lojas de app e ReclameAqui são excelentes fontes para se aproximar da percepção dos usuários sobre produtos e serviços. Essa investigação é válida mesmo em projetos que contemplem pesquisas qualitativas.

Nunca subestime um bom desk research

Um panorama da indústria alimentar, veganismo, hábitos de alimentação saudável e delivery de refeição, somados a um rico benchmark de players do segmento e análogos, trouxeram para mesa aspectos e tendências que explicaram, amplificaram e até extrapolaram as percepções do público que já estava dentro do ecossistema da Beleaf.

Não menospreze essa etapa da pesquisa. Ela é importante para, por exemplo, identificar pontos que os usuários ainda não conseguem verbalizar para você, mas que o mercado já consegue apontar como uma tendência de comportamento. Dedique um tempo para planejar essa etapa e se perguntar o que pode ser mapeado/investigado que te ajudará a responder questões que você tem em mãos. — E né, além de tudo é um método barato.

Validando hipóteses

Com base nas etapas anteriores, definimos hipóteses e rodamos formulários online com 2 públicos:

• Clientes: base de usuários que fizeram uma ou mais compras na plataforma Beleaf. Validação de pontos em relação as informações disponíveis sobre os produtos, modelos de compra (à la carte, combos e assinatura) e priorização de funcionalidades.
• Leads: base de usuários que navegaram na plataforma, mas não efetuaram uma compra. Esse público foi estratégico para investigarmos e validarmos questões referentes as primeiras impressões sobre a marca e compreensão do serviço.

Aprendizados da etapa de pesquisa

1. O público consome Beleaf principalmente por se identificar com os valores da marca
2. Por terem uma dieta livre de proteína animal ou com algum outro tipo de restrição, os ingredientes e informações nutricionais são aspectos extremamente importantes para a escolha dos pratos
3. Os usuários desistiam de comprar por terem dúvidas sobre as refeições, prazos e formas de entrega (é comida congelada? vão me entregar no mesmo dia?…)
4. Muitos clientes não sabiam que existiam outros modelos de compra (combo e assinatura) além dos pratos à la carte, mesmo tendo interesse nestas modalidades.

Projetando a solução

Para iniciar o desenho da solução, é essencial ter uma visão nítida das necessidades para o novo produto. Não tente fazer isso se ainda não está claro qual é o valor do negócio para o público e o que exatamente materializa a promessa do negócio. Recomendo esse texto do Bruno Canato que fala bem sobre isso.

Apresentando o negócio e sanando as principais dúvidas

Na nova proposta, implementamos a página “Como Funciona” que — junto a outros componentes espalhados pela plataforma — exerce a função de sanar dúvidas básica sobre o negócio que oneravam a equipe de atendimento ou causavam desistência da compra.

Uma nova experiência de cardápio

Na experiência do novo cardápio, o usuário acompanha sua cesta enquanto monta o cardápio, além disso cards estratégicos apresentam benefícios dos outros modelos de compra para usuários que ainda não conhecem. Os filtros foram desenvolvidos com base nas principais necessidades do público, com destaque para o filtro de Ingredientes que possibilita que os usuários eliminem dos resultados pratos que contenham ingredientes indesejados.

Os detalhes relevantes do prato

Os novos cards do cardápio exibem informações nutricionais em destaque do prato (como “pouca gordura”, “muita fibra”…) e um modal fullscreen permite que o usuário veja outros detalhes nutricionais, avaliações, informação sobre o preparo da refeição e pratos recomendados, sem abandonar a página do cardápio.

Mais opções de combos

Com novas opções de combos — criados para atender a demanda de usuários com refrigerador sem capacidade para a única opção disponível antes (21 pratos) — aplicamos mais protagonismo para este modelo de compra, com presença no menu principal e um novo fluxo de seleção de pratos, com possibilidade de adição de doces e pratos complementares ao combo.

Testes e refinamento do protótipo

Antes de seguir para o desenvolvimento, realizamos testes de usabilidade no protótipo com leads e clientes dos diferentes modelos de compra, para coletar percepções sobre a nova plataforma e identificar potenciais problemas de interface, navegação e compreensão das informações.

Testar o produto na etapa de protótipo é essencial para assegurar que o que foi projetado está aderente ao público sem impactar em custos adicionais de desenvolvimento para correções posteriores ao lançamento.

Resultados da nova versão

Já é possível identificar alguns resultados do novo desenho:

• Com o novo e-commerce a marca observou um aumento de 23% na taxa de conversão;
• Mesmo com um crescimento de quase 200% em receita, o volume de atendimento se manteve estável — ou seja, a marca não precisou aumentar o time de atendimento para acompanhar seu crescimento 😜

Se você gostou deste case, quer tirar alguma dúvida ou saber mais sobre nossos projetos, deixe aqui seu comentário!

Aproveitamos para agradecer ao Jônatas Mesquita, fundador da Beleaf, que acompanhou o projeto de perto, com a disponibilidade necessária para que a Plurix e a Beleaf pudessem juntas construir essa solução. E a Daiane Melanda, que liderou este projeto aqui na Plurix e idealizou a escrita deste case ❤

Este artigo foi escrito originalmente pela Daiane Melanda. O conteúdo original pode ser lido aqui.

Desde 2017, a Coinext vem se consolidando no segmento de plataformas de trading de criptomoedas, sendo hoje uma das 5 maiores plataformas de trade de cripto no Brasil, com +200 mil usuários e com volume negociado de +6,5 bilhões de reais.

🤓 Caso você não conheça este assunto, a gente te explica: criptomoedas são qualquer forma de moeda que existe digital ou virtualmente e usa criptografia para a realização de transações. Já as plataformas de trade de criptomoedas são o local onde é possível comprar, vender, trocar ou guardar criptomoedas como Bitcoin, Ethereum, Dogecoin etc.

Início do projeto

Em agosto de 2021, a Coinext nos procurou e apresentou um grande desafio: melhorar a experiência de uso da plataforma e buscar meios para evoluí-la de uma maneira saudável e escalável, proporcionando uma maior atração e retenção de usuários.

Principais motivações para reformulação da plataforma:

• Inconsistência entre diferentes versões da plataforma (desktop, mobile e app), o que gera ruídos e danos à experiência dos usuários
• Dificuldade para evolução da plataforma de maneira consistente, pois não havia um racional de design (UX e UI) previamente definido
• Minimizar danos à percepção de valor da marca pelos usuários, provocados por uma má experiência de uso
• Construir uma interface que atraia novos usuários, mas não remover as características que usuários recorrentes/avançados gostam, como a possibilidade de acompanhar o mercado e comprar/vender criptos em uma tela só (na versão desktop)

Com isso, entendemos que precisávamos de 5 etapas para este projeto:

1) Imersão e Discovery: workshop de imersão, matriz CSD, mapa de afinidade, análise heurística, desk research e benchmark de interface.

2) Workshop de cocriação: a ferramenta ideal para juntos levantarmos os problemas e possíveis soluções para este cliente.

3) Prototipação: protótipos de média fidelidade para materializarmos as ideias

4) Testes de usabilidade: testamos o protótipo com usuários reais e obtivemos feedbacks para melhorias ainda em fase de protótipo, economizando tempo e dinheiro do projeto

5) UI: respeitando o guia de marca, criamos um layout para a plataforma

1. Imersão e Discovery

Workshop de Imersão

🗣️ Workshops de Imersão são quando nossa equipe se reúne com o cliente visando entender objetivos de curto/médio prazo, limitadores conhecidos, histórico, seus aprendizados com projetos anteriores e estratégias já definidas pelo negócio.

Durante 2 horas, buscamos extrair das lideranças da Coinext o máximo de informações relevantes para o sucesso do projeto.

Alinhando Expectativas

Além de coletar as motivações por trás deste projeto de maneira mais estruturada, nosso papel também foi de gerar consenso entre os participantes.

O grupo sintetizou o objetivo do projeto da seguinte forma:

Criar uma jornada mais fluída e unificada entre as plataformas, para que os usuários tenham mais autonomia em seu uso diário.

Em seguida, os convidamos a pensar no que seria necessário para alcançar tal objetivo. Além disso, também pedimos que refletissem sobre possíveis resultados negativos. Esta parte é essencial para identificar o que não devemos fazer:

Imagine que daqui 1 ano o projeto foi um desastre… O que causou o fracasso do projeto? Por que não conseguimos alcançar o objetivo?

Matriz CSD

🗣️ Criada pela consultoria Livework, a Matriz CSD é uma ferramenta para mapear de forma ordenada o conhecimento em três categorias:
Certezas: informações já confirmadas por pesquisa ou conhecimento empírico. Suposições: hipóteses que precisamos responder ao longo do projeto.
Dúvidas: tudo aquilo que ainda não temos certeza, mas gostaríamos de saber sobre o negócio, usuários, tendências etc.

Em seguida, usamos a Matriz CSD para mapear o conhecimento dos participantes sobre a plataforma de trade atual.

Concentramos as discussões e preenchimento da matriz em três pilares:

• Primeiro uso da plataforma
• Uso recorrente da plataforma
• Abandono da plataforma

Criamos boards para cada participante no Miro, plataforma online de “lousa digital” que permite colaboração em tempo real.

Após preencherem individualmente, discutirem em grupo e remanejarmos alguns desses post-its digitais, encerramos o workshop e começamos a consolidar o grande volume de informações geradas pelos participantes.

Mapa de Afinidade

🗣️ O Mapa de Afinidade é uma ferramenta de pesquisa utilizada para agrupar informações e ideias em temas e padrões, facilitando a análise e síntese de achados de pesquisa.

Utilizamos o Mapa de Afinidade para agrupar e consolidar os post-its, buscando unificar aqueles com textos iguais/similares para facilitar o consumo das informações por nós.

O agrupamento revelou questões que deveríamos nos atentar ao longo do projeto, como: cadastro e ativação, valor percebido da Coinext, arquitetura da informação e outros.

Discovery

Na Plurix, acreditamos ser impossível separar a pesquisa do design.

Por isso, nos aprofundamos sobre o negócio e usuários das seguintes maneiras:

1. Elaboramos um documento com diversas dúvidas que tínhamos sobre o negócio, como:

• Regras de negócio
• Métricas do negócio
• Dúvidas sobre criptomoedas e trading
• Concorrentes diretos e indiretos
• Referências tanto em negócios quanto design

💡 É crucial absorver o máximo de informações sobre o negócio do cliente. Só assim é possível gerar insights que mudam a maneira como enxergamos determinados problemas e conduzimos o projeto.

2. Solicitamos à Coinext o maior número de informações sobre seus usuários:

• Insights de entrevistas com usuários
• Personas da Coinext
• Relatórios CSAT (Customer Satisfaction Score) e NPS (Net Promoter Score)
• Mapa de Jornada do Usuário
• Dúvidas, incidentes frequentes e dependências do suporte, mapeados pelo SAC

Todo esse material nos deu uma visão mais clara de quem eram os usuários e sua relação com a plataforma atual, além de dar insumos para iniciar nossas pesquisas, com um viés mais técnico de UX/UI.

Análise Heurística

🗣️ A análise heurística se trata de uma avaliação conduzida por um especialista em UX em produtos e serviços, levando em conta boas práticas e experiência do profissional.

Iniciamos nosso processo de pesquisa com uma análise heurística, pois ela nos indicaria os problemas técnicos de navegação, usabilidade e interface que deveríamos solucionar durante a etapa de prototipação.

Nossa análise, pautada pelas 10 Heurísticas de Nielsen e boas práticas de acessibilidade, geraram +100 slides de uma análise minuciosa da plataforma de trade da Coinext.

Os principais problemas que encontramos ao longo de nossa análise foram:

1. Instabilidade e problemas de performance
2. Pouco feedback de ações realizadas pelo usuário
3. Pouca prevenção ao erro, crítico devido ao contexto de uso da plataforma (compra e venda apressada para garantir rentabilidade na operação, por exemplo)
4. Uso excessivo de modais para realização/conclusão de atividades
5. Pouco contraste em determinadas áreas da plataforma

🤓 A Coinext adicionou um valor em R$ em uma conta que criamos para realização das análises. Posteriormente, a Plurix adicionou mais uma quantia nela para que pudéssemos operar na plataforma e entender melhor a dinâmica do mercado.

O dia em que compramos um Bitcoin por 400 mil reais

Mesmo durante o desenho de telas no Figma, acessávamos constantemente a plataforma atual da Coinext para tirar dúvidas e consultar informações. Por esse motivo, passamos a ter acesso irrestrito a muitas áreas e fluxos da plataforma, como uma chamada OTC.

De maneira simples, OTC (Over-the-Counter) é uma área da plataforma da Coinext onde é possível comprar uma quantidade maior de Bitcoins por valores menores do negociado pelo mercado de compra e venda “padrão”.

Enquanto navegávamos pela plataforma, não ficou claro para nós (e muito provavelmente para alguns usuários) que o fluxo de “simulação” de valores para compra via OTC não era uma simulação. Após o usuário clicar no botão Cotar, estava na verdade assumindo um compromisso com a Coinext de depositar o valor daquela cotação em até 24h. Caso não o fizesse, estava sujeito a ser banido da plataforma, pois esse processo é extremamente complexo e custoso para a Coinext.

O resultado foi a compra de 1 Bitcoin por um dos designers da Plurix 😅

Felizmente essa compra aconteceu durante uma reunião com uma liderança da Coinext, que conseguiu reverter o processo rapidamente. Este episódio foi emblemático, pois ele deixou claro para todos o quão custoso pode ser um erro de usabilidade.

Benchmark de Interfaces

🗣 O benchmark de interfaces é um mapeamento de sites/apps para identificar as melhores práticas usadas pelo mercado para realizar uma série de atividades e entender como determinados problemas foram solucionados. Esse mapeamento serve para referências técnicas/visuais para resolução de desafios específicos nos projetos.

Nesta etapa, analisamos empresas do segmento e de mercados análogos para identificar as melhores práticas para construir interfaces altamente complexas, em especial versões mobile e aplicativos.

Além da camada visual, analisamos as plataformas sob diversas óticas, como:

• Arquitetura da Informação: a interface é bem construída? Existe uma boa hierarquia?
• Interação: quais ações são possíveis? É fácil realizá-las? Como posso desfazer algo? É fácil se perder durante a navegação?
• Fraquezas: o que não funciona tão bem? Existe algo que devemos evitar em nossos protótipos neste projeto?

2. Cocriação

Desde o início da pandemia, formatamos nosso workshop de cocriação para uma versão remota que ocorre em 2 ou 3 dias. No primeiro dia compartilhamos nossos achados e insights e nos outros dias realizamos atividades para a geração de ideias para solucionar problemas que identificamos.

A importância da inspiração

Durante nossos encontros com a Coinext, buscamos criar um ambiente que estimulasse o pensamento criativo, pois destes encontros sairiam ideias que definiriam o sucesso do desafio que tínhamos em mãos.

O conteúdo que mais se destacou foi uma pesquisa que apresentamos ao grupo, sobre a tendência que temos de adicionar coisas para resolver problemas, não remover coisas. Por exemplo, quando encontramos um problema em nossas empresas, a reação natural é adicionar uma nova política, funcionalidade ou software.

Nós quase nunca pensamos em remover algo das nossas políticas, funcionalidade do nosso app ou abandonar algum software que usamos no dia a dia.

Essa mensagem ficou gravada na mente do time da Coinext durante todo projeto; não era incomum alguém resgatar esse conceito durante uma discussão:

Pensando naquela tendência de adição que a Plurix apresentou, precisamos mesmo dessas funcionalidades na plataforma?

Workshop de Cocriação — Dia 1

Após apresentarmos a tendência de adição, reforçamos que o workshop de cocriação era um espaço seguro para explorar ideias sem medo de errar/ser julgado e apresentamos o primeiro exercício da cocriação, chamado “Como podemos…”.

Nele, enquanto apresentávamos os achados da imersão e discovery, os participantes iam escrevendo post-its no Miro com os desafios atrelados aos achados da seguinte maneira:

Reformula o desafio em uma pergunta que comece com “Como podemos…”

Por fim, apresentamos aos participantes nossos insights sobre este mercado, a Coinext e até mitos de UX que deveriam ser derrubados.

Workshop de Cocriação — Dia 2 e 3

Após apresentarmos conteúdos para inspirar os participantes, apresentamos a próxima atividade. Baseado nos achados e discussões anteriores, definimos quatro temas que serviriam de base para geração de ideias:

• Onboarding e validação de documentos
• Login: segurança e 2FA (Segurança de 2 Fatores)
• Saques e depósitos
• Trade

Crazy 4's

🗣 O Crazy 4’s é uma adaptação do exercício chamado Crazy Eights, que ganhou fama através do Design Sprint. O objetivo é tirar os participantes da zona de conforto e explorarem ideias que sejam menos óbvias para resolução de problemas; aqui, cada participante tem que gerar 4 ideias totalmente diferentes umas das outras em 4 minutos.

Durante todo 2º dia e parte do 3º, aplicamos o Crazy 4’s para gerar um grande volume de ideias. Esse exercício foi dividido em dois momentos:

• 1ª Etapa: individualmente, o grupo tinha 4 minutos para escrever 4 ideias totalmente diferentes em post-its no Miro.
• 2ª Etapa: individualmente, deveriam escolher até 2 das ideias que escreveram e mais gostaram. Após a escolha, o grupo tinha alguns minutos para refinar as ideias.

Pedimos que compartilhassem com o grupo as duas ideias que mais gostaram da primeira etapa e seus refinamentos.

Matriz de Esforço x Impacto

🗣️ A Matriz de Esforço x Impacto é uma ferramenta para priorização de ideias de maneira crítica, levando em conta os recursos disponíveis para materialização delas, como tempo, dinheiro, tecnologia e equipe, por exemplo.

No 3º e último dia de workshop, posicionamos as ideias geradas anteriormente na Matriz de Esforço x Impacto. Neste exercício, os participantes decidiriam quais ideias gostariam de priorizar neste projeto de melhoria das plataformas de trade e quais ficariam para um segundo momento.

Importante: é importante destacar que as ideias que surgem durante o workshop foram um complemento às melhorias melhorias que tanto a Coinext quanto a Plurix haviam identificado anteriormente.

Para agilizar o processo de priorização, consolidamos as ideias que foram geradas pelos participantes, similar ao que fizemos com os post-its da Matriz CSD. A dinâmica ocorreu da seguinte maneira:

1. O facilitador lia um post-it por vez e perguntava aos participantes o melhor lugar para posicioná-lo na matriz.
2. Caso a discussão se alongasse, o facilitador poderia intervir com o intuito de ajudar a posicioná-lo na matriz (relembrando pontos discutidos anteriormente).
3. O local dentro do quadrante também era discutido: quanto mais alto verticalmente os post-its, maior o impacto positivo para a experiência; quanto mais à direita, maior os esforços para implementar determinada ideia pelos times da Coinext.

A imagem abaixo mostra a matriz totalmente preenchida. Cada quadrante tem um nome, que ajudou a posicionar os post-its:

• O que deve ser feito já: ideias com baixo esforço de implementação e alto impacto para o usuário.
• O que deve ser feito daqui a pouco: ideias com alto esforço de implementação e alto impacto para o usuário.
• Fazer apenas quando e se tiver tempo: ideias com baixo esforço de implementação e baixo impacto para o usuário.
• Não fazer: ideias com alto esforço de implementação e baixo impacto para o usuário.

Considerações finais

O processo de cocriação é uma progressão natural de geração e seleção de ideias com o potencial de solucionar problemas enfrentados pelo negócio e sanar dores dos usuários. Por mais que esse processo faça sentido para profissionais de UX, alguns clientes podem se sentir desconfortáveis, pois o processo é diferente dos que estão habituados.

Por isso, sempre buscamos deixar claro aos participantes como será nossa condução do workshop, pedindo que confiem em nós e encarem este momento como um momento de enxergar as coisas com outros olhos, ampliando sua visão sobre o problema e aumentar o foco naquilo que, de fato, precisa ser realizado.

3. Prototipação

Durante o processo de prototipação, encontramos diversos desafios para transformar as ideias e necessidades do negócio/usuários em telas no Figma:

• Plataformas de trade são complexas: existem inúmeras regras de negócio que devem ser respeitadas, limitações técnicas e tecnológicas, extensão de fluxos e informações em diversos formatos (números, gráficos, textos) para apresentar aos usuários.
• Telas pequenas: tivemos que ter cuidado redobrado para que nosso layout comportasse todos os elementos necessários sem comprometer leitura, contraste e áreas de toque.
• Clareza e transparência: esses foram princípios que guiaram o desenho do protótipo, mas nem sempre foi fácil honrá-los, afinal plataformas como a da Coinext possuem uma alta complexidade, pela natureza do negócio. Neste quesito, nosso maior desafio foi buscar um equilíbrio entre as necessidades de novos usuários e os heavy users que possuem perfis e necessidades completamente diferentes.

Planejamento

🗣 O Mapa da Plataforma é um documento que permite termos uma visão geral de páginas e sub-páginas da nova plataforma da Coinext. Esse documento ajuda a termos uma noção da complexidade e tamanho do protótipo que iremos criar.

Antes de abrir o Figma, fizemos um planejamento no Notion daquilo que seria prototipado por nós. Nesse documento listamos os elementos que deveriam estar presentes nas páginas e sub-páginas, como: botões, campos para inserir dados, gráficos, links, ícones etc.

Além dessa listagem, adicionamos referências visuais/estruturais retiradas do benchmark de interface.

Início da prototipação

🗣 Na Plurix, costumamos criar protótipos em média fidelidade: eles não possuem imagens finais e em alta definição, ícones ou muitas cores; isto ocorre porque o foco neste momento são questões estruturais e fluxos de navegação.

Com o terreno mapeado, iniciamos a prototipação no Figma, sempre respeitando o tempo necessário para construir algo de maneira consistente e escalável.

Grid, Tipografia e Cores

🗣 Grids são guias visuais que ajudam designers a posicionar elementos nas telas que estão desenhando, criando maior consistência, harmonia visual e ajudando no versionamento de plataformas desktop para mobile, e vice-versa.

Normalmente, os grids são compostos por colunas que variam de tamanho e de quantidade; o espaço entre uma coluna e outra é chamado de gutter. A margem se refere ao espaço livre nas laterais direita e esquerda das colunas, ajudando a enquadrar o conteúdo e dar um “respiro” à página.

Inicialmente, fizemos um estudo profundo de grids e tamanho de fontes que iríamos usar no protótipo, pois sabíamos que o padrão seriam telas carregadas de informações e com inúmeras funcionalidades, ainda mais nas versões mobile da plataforma.

Quanto a tipografia, definimos uma escala que comportasse tamanhos menores, com o cuidado de garantir a legibilidade pelos usuários. As cores utilizadas no protótipo foram apenas tons de cinza, preto para os textos e cores de destaque para alguns elementos interativos, como botões, gráficos e links.

Em tempo, nomeamos as cores e tamanhos de texto para simplificar diversas etapas do processo: aplicação de eventuais ajustes no protótipo, facilitar a tradução do Figma em código pelos desenvolvedores, facilitar a criação de uma guia de estilos…

Organização de telas e fluxos

Durante todo processo de desenho das telas e fluxos de navegação da nova plataforma, tomamos o cuidado de deixar o Figma organizado, algo que facilitava não apenas nosso dia a dia, mas também o entendimento do protótipo pela Coinext nas etapas de revisão ou solicitação de ajustes pontuais.

Mobile/App

A versão desenhada pela Plurix permite que os usuários acessem todas as informações e funcionalidades que antes estavam reservadas à versão desktop.

Porém, devido ao tamanho de tela ser menor, em determinados contextos (como compra e venda de cripto) foi necessário fragmentar o processo, organizando as informações de modo que o usuário as visse quando necessário, evitando sobrecarregar sua experiência de uso da plataforma no dia a dia.

Desktop

A versão desktop começou a ser desenhada logo que terminamos a versão mobile/app; o processo foi mais rápido, afinal tínhamos resolvido os desafios para contemplar todas as áreas da plataforma em uma tela menor, bastava adaptar os conteúdos e funcionalidades para um tamanho de tela maior.

Nesta versão, o racional foi permitir que usuários (especialmente heavy users) vejam um maior volume de informações de uma vez, facilitando o processo de tomada de decisão.

Também reorganizamos a plataforma como um todo, visando trazer mais clareza para o consumo de informações e acesso à funcionalidades sem depender tanto de modais.

4. Testes de usabilidade

🗣 Teste de usabilidade é uma técnica de pesquisa para avaliar um produto/serviço. Nele, conseguimos validar se as informações, funcionalidades e fluxos do nosso protótipo estão claros para nosso público-alvo através de atividades que damos às pessoas enquanto a observamos, ouvimos e tomamos notas.

Condução

No total, realizamos 4 testes de usabilidade com usuários da plataforma, recrutados pela própria Coinext devido restrições relacionadas a LGPD.

Para conduzir os testes, elaboramos um roteiro com aproximadamente 1 hora de duração que passava por fluxos que sabíamos que geravam atritos na plataforma atual e tentamos solucionar com nosso projeto (adaptação de fluxos, novas interações e áreas…)

Os testes foram conduzidos pelo Google Meet: durante 1 hora conversamos sobre suas experiências com cripto e a plataforma atual, em seguida, enviamos um link do protótipo mobile no Figma para acessarem e realizarem uma série de atividades, enquanto nossa equipe analisava suas interações com a nova plataforma e tomava notas.

Essas atividades foram estruturadas para simular um contexto de uso real e esses testes foram gravados com consentimento dos usuários para consulta posterior pelo time.

Resultados

Após a aplicação dos testes, foi possível verificar melhorias que deveríamos aplicar nas telas e fluxos que havíamos desenhado. Além disso, algumas pessoas sugeriram alguns ajustes e ideias que após serem discutidas pelo time, foram implementadas nas versões mobile, app e desktop da plataforma.

💡 Testes de usabilidade são cruciais: por mais que sejamos especialistas em UX, alguns problemas podem passar despercebidos, pois estamos imersos no dia a dia da prototipação.

Muito bons os pontos identificados nos testes e os ajustes finais. Já vi tudo aqui. Excelente o trabalho! ❤ — Denio Grossi, Head of Operations na Coinext

5. UI

Uma nova interpretação da marca

Desde o início, a Coinext nos deu liberdade para sugerir mudanças em alguns elementos, especialmente as cores e padrões utilizados pela marca.

Parte dessas mudanças foi arredondarmos botões para trazer um ar mais moderno para a interface e aumentar o espaço entre conteúdos para valorizar uma estética minimalista.

Escolha de cores

Algo que investimos muito tempo foi o uso de cores na plataforma, buscando atender às necessidades de usuários passariam muitas horas por dia olhando para a plataforma. Tal contexto de uso, nos fez optar por um tema escuro para uso na plataforma.

Definido o tema escuro, criamos uma nova paleta de cores inspirada nas cores da marca, mas com um caráter mais funcional.

Quando estávamos desenhando o gráfico de pizza presente na Carteira, notamos que as 5 cores que definimos seriam impossíveis de ser diferenciadas por pessoas daltônicas, o que nos levou a adotar uma textura (patterns) para permitir a compreensão do conteúdo sem depender apenas das cores.

Guia de estilos e Handoff

🗣 A guia de estilos é um documento que agrupa todos os elementos da interface, como tipografia, ícones, cards e botões; além disso, detalha características de espaçamento e cores. Seu intuito é facilitar a criação de novas telas e funcionalidades, tanto por desenvolvedores quanto pelos designers.

Para ganharmos agilidade, alinhamos com a Coinext que desenharíamos apenas algumas telas em UI (aplicando em nosso protótipo cores, ícones e outros elementos visuais).

Para facilitar a etapa de desenvolvimento e evolução da plataforma, nos reunimos com a Coinext mais uma vez para decidir como deveríamos formatar a guia de estilos, contemplando todos os elementos que estão presentes na interface: tipografia, cores, ícones, cards, imagens etc.

Após aprovarem todos os materiais gerados por nós, compartilhamos arquivos do Figma com a Coinext para que tivessem acesso às informações durante o desenvolvimento.

Gostamos muito da entrega da Plurix! Super completa.
- Denio Grossi, Head of Operations na Coinext

“Lembro que tivemos receio em contratar uma equipe de design externa para lidar com essa frente que tem tanto impacto no negócio. Escolhemos a Plurix entre quatro outras consultorias/agências de design que avaliamos, porque percebemos uma visão estratégica mais alinhada aos nossos objetivos, além de uma qualidade visual que nos chamou atenção. À medida que construíamos o projeto, tivemos certeza que foi a melhor escolha para o momento da Coinext. Dificilmente teríamos o mesmo resultado, com a mesma qualidade e no tempo que precisávamos, se tivéssemos feito tudo internamente. Hoje nós brincamos aqui na Coinext que se todo fornecedor fosse igual a Plurix, a gente nem traria mais gente pra dentro.”

Nosso projeto permitiu que a Coinext obtivesse muitos resultados positivos, mesmo não tendo implementado todas as melhorias até o momento. Confira os resultados que já dividiram conosco:

• “Com especificações de design bem definidas, hoje conseguimos estimar bem melhor o esforço e o impacto de cada história do backlog de produto, além de reduzir atritos entre design e desenvolvimento no momento da implementação.”
• “Os guias de componentes e de estilo permitem que consigamos desenhar e testar novas telas em pelo menos metade do tempo de antes.”
• “Tivemos uma redução dos chamados no Suporte categorizados como dúvidas em pelo menos 15%, considerando os fluxos que já implementamos.”
• “A visibilidade de todos os fluxos do produto com suas respectivas telas, permite a implementação gradual das melhorias, sem exigir mudanças drásticas no código ou na experiência que o usuário já estava habituado.”
• “À medida que implementamos, estamos eliminando inconsistências visuais e de experiência (e recebemos centenas de comentários positivos de clientes já na primeira semana).”

Se você ficou curioso para conhecer a plataforma da Coinext, acesse https://coinext.com.br/ e acompanhe a evolução e novidades da plataforma que estão sendo lançadas nas próximas semanas!

Aproveite para nos contar o que achou da plataforma :)