Usando UX Design para redesenhar a página inicial da Frexco

Nesse artigo eu mostro, como em pouco tempo utilizei os recursos disponíveis, para resolver o desafio que me classificou em um processo seletivo de UX Design.

Escrevi esse artigo porque acredito muito na troca e ajuda dentro da comunidade de Designers, senti a falta do compartilhamento de experiências sobre o nosso grande momento, que é o processo seletivo.

Lembrando que esses desafios devem ser resolvidos de uma forma simples, dentro de algumas horas, você não precisa entregar um trabalho de freela em um processo seletivo. Mas, faça o melhor que puder.

É importante dizer que essa não é a única ou melhor forma de resolver desafios, cada contexto vai exigir abordagens diferentes. Mas é um exemplo que pode lhe ajudar a ter ideias e se preparar.

O Desafio

Redesenhar a página inicial do site, para a versão mobile — Criar wireframe ou mesmo protótipo navegável, podendo utilizar qualquer ferramenta de Design.

Resolução

O primeiro passo foi pesquisar e aprender sobre a empresa

A Frexco é a principal ponte direta entre produtores e estabelecimentos do Brasil. Entregam todas as semanas toneladas de alimentos recém colhidos para famílias e estabelecimentos e seu objetivo é fomentar incessantemente que a cadeia de suprimentos seja mais justa.

Observando o site, é possível fazer ajustes levando em consideração, acessibilidade, heurísticas e leis de UX, no entanto fica difícil encontrar a solução ideal sem saber as dores enfrentadas tanto por clientes, quanto pelo negócio no momento atual.

Importante: Todas as informações presentes neste artigo foram encontradas por meio de pesquisa pública, nenhuma informação foi fornecida diretamente pela Frexco.

Imagens do site antes do redesenho

No mundo ideal eu conversaria com stakeholders, colaboradores, rodaria pesquisas, montaria personas e jornadas, mas como se trata de uma rápida atividade, pesquisei em blogs, YouTube e também no site da própria empresa.

Usuários

• Os usuários são pequenos e médios produtores (agricultores), tendo do outro lado estabelecimentos (restaurantes) e também pessoas físicas.

Mais informações sobre a Frexco

• Usam Logísticas que facilitam o transporte de alimentos, além de simplificar a cadeia analógica, usando tecnologia para digitalizar o pequeno agricultor e conectá-lo diretamente a restaurantes
• Busca fomentar o consumo de produtos de qualidade para ajudar a manter a renda dos pequenos produtores.
• A frexco compra dos produtores, coloca no markup e depois revende para restaurantes ganhando sua margem.
• Usa marchine learning e inteligência artificial para criar a melhor rota de entrega.
• A empresa entrou no B2C devido a crise da pandemia, mudando seu modelo de negócio.

Métricas atingidas até o momento

• Redução de 30% a 40% no preço de verduras em relação ao que os restaurantes pagam aos distribuidores que compram do CEASA.
• Diminuição de desperdício: A perda de produtos na cadeia de hortfruti gira em torno de 30%, na frexco não passa de 2%

Reclamações na versão para aplicativo:

Nota: 4.2 e mais de 1 mil downloads (Android) — Ainda não disponível para IOS.

• Demora na entrega para consumidores domésticos após a reabertura de restaurantes.
• Recebimento de produtos estragados
• Dificuldade para fazer cadastro e comprar

Análise competitiva (benchmark)

A chinesa Meicai (haviliada em 7 bilhões)

A Meicai — cujo nome significa “legume bonito” em chinês — foi fundada em 2014 por Liu Chuanjun, cientista especializado em foguetes. Usando um aplicativo de smartphone, proprietários de restaurantes na China podem pedir verduras diretamente das fazendas, se afastando do atacado tradicional ao eliminar intermediários. A empresa disse que atendia mais de 2 milhões de restaurantes em mais de 300 cidades chinesas no final de 2020.

A indiana Ninjacart

Ninjacart é a maior empresa de cadeia de suprimentos de produtos frescos da Índia. Somos pioneiros na solução de um dos problemas de cadeia de suprimentos mais difíceis do mundo, alavancando tecnologia inovadora. Adquirimos produtos frescos dos agricultores e os entregamos às empresas em 12 horas.

walmart

O WALMART funciona para a economia global como um regulador de mercado. Tamanho é o conhecimento dos consumidores e dos mais de 60.000 fornecedores dispersos por 70 países, que a empresa atua como uma enorme bolsa de mercadorias ao casar a oferta com a demanda para estabelecer seus preços. A tentativa constante de reduzi-los, nas árduas negociações que exasperam os fornecedores, tem tido um impacto brutal na maior economia do planeta.

Flipkart

FlipKart é uma empresa de comércio eletrônico fundada em 2007 por Sachin Bansal e Binny Bansal. A empresa está registrada em Singapura, mas tem a sua sede em Bangalore, Karnataka. Flipkart lançou a sua próprios produtos sob o nome DigiFlip com produtos, incluindo comprimidos, USBs, e sacos de laptop.

Após entender quem era a empresa, seus concorrentes e fazer um mini benchmark, chegou a hora de propor as melhorias que observei

Melhorias

Como não terei tempo para fazer testes de usabilidade com usuários, Coloquei como objetivo desse redesenho minimizar perguntas frequentes, se os usuários estão perguntando com frequência, é sinal de que estão sentindo atrito no site.(não estão encontrando sozinhos o que procuram, tendo dificuldades)

Lembrando que o objetivo do UX Designer não é desenhar um site mais bonito, mas melhorar a experiência do usuário.

Pergunta frequente que escolhi no FAQ do site:

Como sei se entregam em meu endereço?

Como terei poucas horas para me debruçar sobre esse projeto, vou atacar pontos mais óbvios, de qualquer forma, o ideal seria entender o negócio de dentro e suas dificuldades atuais, assim como analisar dados do site, rodar pesquisas, testes de usabilidade e testes AB.

Melhorias priorizadas

As melhorias foram priorizadas visando acertividade, e facilidade de resolução, ainda assim seria necessário rodar testes de usabilidade para confirmar a eficácia dos ajustes.

1 — Número de cliques para encontrar o que procura (Como sei se entregam em meu endereço?) — Se o cliente pergunta com frequência, é sinal de que está sentindo atrito, dificuldade para encontrar essa informação sozinho no site.

2 — Acessibilidade, texto em cima de vídeo (dificuldade para ler o texto acima de algo em movimento — vídeo) — Mensagem da empresa com muito texto e pouco destaque.

3 — Tamanho das Letras - Acessibilidade

4 — Botões iguais, dois botões lado a lado com o mesmo preenchimento (mesmo peso) e textos longos em botões, interface que não representa diálogo.

5 — Acrescentar explicação de benefícios, assim como na concorrência, vai trazer uma força maior para a marca e expressar o objetivo da empresa com eficácia.

6- Efeito estética- usabilidade: Em geral os usuários percebem um design esteticamente agrad*ável como um design mais utilizável — Por causa disso vou fazer alguns ajustes e brincar um pouco mais com as cores.

OBS: Será que esses CTA’s estão com alta conversão? Pode ser trabalhado nos próximos passos, através de testes AB.

Desenho de idéias para o novo Design

Desenhar no papel me ajudou a ter uma ideia geral, dos elementos que eu precisaria desenhar, o que não poderia faltar e também a pensar na melhor solução de design.

Para facilitar o desenho da tela inicial, criei um rápido e simples sistema de design, eu tentei não sair tanto do estilo da Frexco, mas não tenho certeza se o que possuem é definitivo, portanto me permiti brincar um pouco com cores e estilos.

Justificativas de questões levadas em consideração durante o Design

Heurísticas de Nielsen

• Segunda heurística de Nielsen: Trata sobre a correspondência entre o sistema e o mundo real, implemento essa heurística ao utilizar ícones e imagens, que são facilmente identicados pelo usuário.
• Quarta heurística de Nielsen: Consistência e padrões, apesar de ser um design sem fluxo, mantive a consitência de botões e textos clicáveis, além de cores e design geral.
• Oitava heurística de Nielsen: Estética e design minimalista, me atentei apenas ao que era importante ao usuário, deixando o layout e o conteúdo o mais simples e direto possível.

Leis de UX

• Efeito da Usabilidade Estética: O usuário tende a correlacionar usabilidade com a estética da interface, portante usabilidade e estética precisam andar de mãos dadas, acrescentei cores e alguns elementos de design para que a interface ficasse mais agradável ao usuário.
• Limiar de Doherty: Uma interface lenta, afeta a usabilidade do usuário, a primeira vez que acessei o site da Frexco, demorou um pouco para carregar, por conta do vídeo, elemento dispensável para a necessidade do usuário, muitos vídeos e imagens na interface, além de aumentar o tempo de carregamento, causam esfoço cognitivo e poluição visual. Portanto devem ser utilizados com cautela.
• Lei de Fitts: Essa lei trata do tempo que o usuário passa para entender a interface e agir, ou mesmo encontrar o que estava procurando, fazer o que queria fazer. Aqui eu entrego nas mãos do usuário a resposta para algumas dúvidas, onde estou, o que fazem, o que posso fazer aqui, e se isso é para mim (eles atendem minha região?) Acrescentei regiões atendidas.
• Lei de Hick-Hyman: Procurei não tornar a interface complexa, evitando que ela saisse do objetivo do usuário, também não dei varias opções de uma vez e mantive o design sempre centrado no usuário.
• Lei de Prägnanz: Utilizei formas simples para compor a estrutura da interface.
• Lei de Miller: Em relação a lei de Miller, fiquei atenta para que o usuário recebesse informações simples durante a interação, para que não o fizesse precisar pensar.
• Occam’s Razor: Exemplificando essa lei, eu cortei os elementos de design que me pareciam estar em excesso na interface, como o vídeo, por exemplo, pois penso que a falta dele não compromete a funcionalidade.
• Princípio de Pareto: Essa lei de UX releva a minha escolha de melhoria, quando resolvo um problema pontual, que foi colocar regiões atendidas na página inicial do site. 80% dos seus resultados são consequência de 20% dos seus esforços. Dito isso, me agradaria ver testes e descobrir o quanto essa mudança pode influênciar os resultados do negócio.
• Lei de Parkinson: Aqui eu tive o cuidado de evitar elementos demais, que pudessem cansar o usuário e, possivelmente, fizessem com que ele desistisse da interação.

Acessibilidade

• Precurei utlizar uma planilha de cores acessíveis, além de evitar colocar textos em cima de imagens ou vídeos. Também trabalhei a tipográfia com tamanhos recomendados pela comunidade de Design.
• Ainda assim, existem questões de acessibilidade que vão além da legibilidade, e afetam pessoas com outras dificuldades, que podem ser visual, auditiva, motora, mental ou intelectual.

Tela inicial da Frexco para a versão mobile

Levando em consideração a Lei de Parkinson, que diz que você desenvolve uma atividade dentro do prazo que lhe é dado, finalizei o design das telas dentro do prazo solicitado e levando em considerações as ferramentas e recursos disponíveis no momento.

Utilizei a ferramenta Figma para desenhar o protótipo de alta fidelidade.

🔗 Acesse aqui o protótipo

Próximos Passos

• Verificar dados do produto para criar métricas e acompanhar aquelas que já são medidas pela empresa.
• Rodar teste AB, para verificar se com a nova versão do site a conversão de novos clientes é maior.
• Rodar teste com usuários para descobrir suas dificuldades com o site.
• Verificar se o número de pessoas entrando em contato para perguntar se a Frexco atende em sua região foi realmente reduzido significantemente com o ajuste.
• Trabalhar em novas melhorias, para descobrir que problemas atacar, rodar sprints com sócios e colaboradores.
• Trabalhar questões de acessibilidade para o produto.

E ai, o que você achou?

Estou abertas para feedbacks, porque a melhoria não é só continua nos produtos, mas também em nosso estudos e aprendizados.

Se precisar de qualquer coisa, é só me chamar lá no linkedin ;)

Se esse artigo te ajudou de alguma forma, não esqueça de me ajudar do jeito Medium de ser, aplaudindo e seguindo o perfil.

Aplausos 👏👏👏 Se você gostou do artigo, assim mais pessoas poderão encontrá-lo.

Comentário 💬 Se você tiver algo a perguntar ou dizer

Você também pode me seguir, para ficar atualizado(a) sobre outros artigos.

Até mais!