CASE UI/UX

A Mundo do Caminhão contratou a Uncode para mais de 300h de estudos para o UX/UI do seu e-commerce

Mundo do Caminhão

O Mundo do Caminhão é uma plataforma de e-commerce dedicada a atender as necessidades dos caminhoneiros e de suas famílias. Focada em oferecer uma experiência de compra especializada, a loja reúne uma ampla variedade de produtos essenciais para o dia a dia no transporte de cargas, como peças, acessórios, e equipamentos para caminhões.

Desafio

Para compreender os desafios do “Mundo do Caminhão”, começamos conversando com nossos stakeholders
e usuários para mapear as características principais comportamentais e critérios de negócios.

A partir dessas conversas, identificamos que a navegação complexa do site estava deixando os usuários bastante perdidos. Assim, criamos um conjunto de princípios para guiar o design da loja.

ETAPA 2

Persona

A documentação da persona é uma etapa crucial, pois garante que a experiência de compra no e-commerce seja alinhada às características, necessidades e dores dos usuários. Para o projeto do Mundo do Caminhão, identificamos duas personas principais: o caminhoneiro e a administradora de uma pequena frota.

ETAPA 3

Análise comportamental e levantamento de hipóteses:

Instalamos uma ferramenta de heatmap, para entender os comportamentos dos usuários recorrentes no site. Identificamos as seguintes dores:

Baixo uso do scroll

Identificamos um baixo uso do scroll, o que indicava que informações essenciais estavam sendo deixadas de lado pelos usuários, que não visualizavam a página como um todo.

Ignorância de Funcionalidades

Observamos que vários elementos e funcionalidades importantes do site eram ignorados, principalmente devido à falta de contexto e clareza na apresentação.

Dificuldade com linguagem

O uso de termos técnicos e linguagem complexa estava dificultando a navegação para usuários leigos.

Problemas no Checkout

Muitos usuários recorrentes ficavam presos no processo de checkout, resultando em um abandono significativo na etapa de login do checkout.

ETAPA 4

Experimentos

Validamos nossas hipóteses com testes de usabilidade de guerrilha, focando em caminhoneiros locais. Eles realizaram tarefas com facilidade. A identificação de produto compatíveis com seus respectivos caminhões, a adição de produtos ao carrinho e a finalização de compras. Esses testes também revelaram que as esposas e filhos dos caminhoneiros ajudam nas compras online, dado que os caminhoneiros têm preocupações com fraudes, reforçando a necessidade de uma interface clara e segura.

A partir das análises, desenvolvemos novos protótipos focados em:

Organizar a taxonomia para facilitar a “encontrabilidade” dos produtos

Reestruturamos a organização das categorias e subcategorias, e realizamos testes de usabilidade com caminhoneiros.

Encorajar o uso da funcionalidade Minha Garagem

Para este projeto, destacamos a funcionalidade “Minha Garagem” na página inicial da loja, ajudando os usuários a entenderem sua função, cadastrarem seus caminhões e encontrarem peças compatíveis. Desenhamos protótipos e realizamos testes de usabilidade para validar nossas hipóteses na prática.

Simplificar o linguajar da loja.

Um dos grandes problemas da loja era o reconhecimento das funcionalidades devido ao uso de jargões como wish list, blog, cashback, login e checkout. Para resolver isso, personalizamos todo o UX writing da loja, adaptando-o para a persona simples do caminhoneiro.

Melhorar o Processo de Login no Checkout.

Nos testes de usabilidade realizados no início do projeto, identificamos que os usuários com contas já criadas não conseguiam acessar suas contas de forma simples para finalizar a compra. Embora suas credenciais os identificassem como usuários, não havia uma maneira fácil de fazer login sem ter que clicar em “esqueci minha senha”.

ETAPA 4

Design de interface

Nosso processo de design é colaborativo, focado em criar interfaces eficientes. Utilizamos as ferramentas mais atualizadas do mercado, seguindo rigorosamente os requisitos necessários para o desenvolvimento.

Ferramenta

Realizamos o layout no Figma, seguimos um fluxo colaborativo e estruturado para criar as interfaces necessárias.

Acessibilidade

O design segue as diretrizes WCAG, para garantir contraste adequado e acessibilidade.

Design Responsivo

Desenhamos interfaces responsivas que se adaptam a diferentes dispositivos, desde desktops até mobile.

Feedbacks

Realizamos sessões de validação com o cliente para garantir que o design atenda às suas expectativas.

Layout mobile first

mobile header

Ac-

Cairo

Desktop layout

antes

depois

antes

depois