Product Design · UI/UX · Web

Movement

Design de uma plataforma web de consulta e rastreabilidade de pedidos para a Movement, com interfaces responsivas e guia de estilos.

Serviço
UI/UX Design, Web
Solução
Plataforma web
Indústria
Fitness
Desafio
Dar ao cliente uma forma de consultar o pedido e compreender suas etapas de envio.
Escolha central
Destacar o estado atual, organizar a sequência de atualizações e adaptar o fluxo a telas de computador e celular.
Entrega
Design da plataforma de rastreabilidade e documentação visual para o trabalho com AFL e Coopersap.
Apresentação das telas de pedidos Movement em computador e celular, com produtos e resumo da compra.

Contexto

Uma consulta direta sobre o andamento da compra

A Movement, marca de equipamentos fitness, precisava oferecer uma experiência web para o acompanhamento de pedidos. O projeto foi realizado em colaboração entre Auclan, AFL e Coopersap.

A atuação da Auclan concentrou-se no design das interfaces, na organização visual do fluxo de consulta e na documentação para a equipe parceira.

As condições de pedido e entrega exibidas nas telas fazem parte do material de apresentação do projeto.

Tela inicial Movement com campo de CPF ou CNPJ para acompanhar o pedido, sobre uma imagem de expedição.

Necessidade

Tornar a informação acessível ao cliente

No contexto apresentado pela empresa, as consultas sobre o envio das compras chegavam à central de atendimento. A proposta era criar um caminho de consulta pelo qual o cliente pudesse localizar o pedido e acompanhar suas atualizações.

Desafio

Traduzir etapas logísticas em uma sequência compreensível

O design precisava representar o processo de envio de forma coerente com a identidade da Movement. Para isso, o trabalho considerou:

  • Os padrões de atualização logística informados para o projeto.
  • As etapas de envio e as informações relevantes em cada estado do pedido.
  • A apresentação da mesma jornada em telas de computador e celular.
Composição das telas Movement com lista de pedidos, histórico de compras e rastreio com etapas de envio.

Decisão de design

Colocar o estado atual em primeiro plano

A página de rastreio destaca o estado do pedido e o situa em uma sequência visual. O histórico de atualizações, as informações de envio e os detalhes da compra complementam a consulta.

Ícones, cores, componentes, botões e hierarquia tipográfica seguem padrões compartilhados. Em celular, a sequência de estados passa a uma disposição vertical, preservando a leitura do percurso.

Tela de rastreio em computador com estado Enviado à transportadora, barra de progresso e informações de entrega.
01Na página de rastreio, destacamos o estado atual do pedido com elementos visuais como a barra de progresso.
Telas mobile com lista de pedidos, acompanhamento em sequência vertical e resumo da compra.
02A interface em celular reorganiza o rastreio em sequência vertical e mantém o acesso aos detalhes da compra.
Janela de histórico com datas das atualizações do pedido e informações de envio e entrega.Detalhes do pedido com resumo da compra, endereço, forma de pagamento e lista de produtos e peças.

Hand-off

Registrar as decisões para a implementação

A entrega à equipe parceira incluiu a documentação dos padrões visuais. O guia de estilos reúne paletas de cores, tipografia, estados e componentes utilizados nas interfaces.

Esse material registra as escolhas do design para orientar a continuidade do trabalho pelos responsáveis pela implementação.

Guia de estilos Movement com escalas de verde e cinza, cores de alerta, tipografia e componentes de interface.

Entrega

Design de consulta, rastreio e documentação visual

O projeto reuniu interfaces para localizar pedidos, consultar o histórico, acompanhar etapas de envio e visualizar os detalhes da compra. A apresentação inclui versões para computador e celular e o guia de estilos compartilhado com os parceiros.

Ficha Técnica

Time Auclan: UI/UX Design, Web Parceiros: AFL, Coopersap Cliente: Movement

Sua solução precisa ser mais clara para quem usa?

Iniciar um projeto
Necessários

Armazena sua escolha de privacidade neste navegador.