Produto digital · Plataforma de estoque e vendas para joalheria (back-office web)

Orit — relógios e joias.

Plataforma de estoque e vendas que encurta o caminho da peça avaliada até a vitrine do e-commerce.

Orit (sistema de gestão de uma rede de compra e venda de joias e relógios de luxo; nome do cliente não divulgado por confidencialidade) · 2020 · UX/UI Designer

Cadastro de produto: formulário à esquerda, as seis etapas do processo sempre à vista à direita.

15 dias

da avaliação ao cadastro no e-commerce, o tempo que o projeto queria encurtar

50–100

colaboradores usando o sistema

+10.000

clientes compradores e vendedores atendidos

Fonte: painel do Behance (Missão); painel do Behance (Impacto).

O trabalho

O Orit é a plataforma interna de uma rede que compra e vende joias e relógios de luxo, com lojas em shoppings pelo Brasil e loja virtual. O trabalho desenhou o sistema web do zero: identidade, arquitetura por setor e os fluxos de cadastro, consulta e conclusão de peças. A meta era reduzir os 15 dias que uma peça levava entre a avaliação e o cadastro no e-commerce.

O contexto

Uma peça de luxo seminova passa por muita gente antes de ser vendida: o avalista examina e precifica, a frente de loja fecha a compra, o caixa registra, o estoquista guarda e o time do e-commerce publica. Em cada etapa alguém abria uma planilha ou um sistema diferente e digitava de novo o que o colega já sabia. O Orit foi pensado para ser o único lugar por onde a peça passa, da avaliação à nota fiscal. O público é interno — entre 50 e 100 colaboradores em lojas espalhadas pelo país — e o sistema roda no navegador, em telas de 1366 px, sobre componentes do Angular Material.

O desafio

O problema de negócio era tempo: 15 dias entre avaliar uma peça e vê-la cadastrada no e-commerce. O problema de UX por trás disso era excesso. Um cadastro único pedia a todo mundo todos os campos — quem só precisava registrar peso e foto via tela de nota fiscal e titularidade. Com muitos setores no mesmo processo, ninguém sabia em que etapa a peça estava nem o que faltava para ela sair. E a entrada mais comum, o lote de peças compradas juntas, era cadastrada uma a uma. O trabalho atacou esses três pontos: condicionar o que cada perfil vê, dar visibilidade do processo inteiro e tratar o lote como caminho principal, não como exceção.

Setor: Varejo de luxo · Compra e venda de joias e relógios seminovosPeríodo: 2020Função: UX/UI DesignerFerramentas: Adobe XD, Photoshop, Illustrator, Angular Material, Bootstrap

Como foi feito

Do problema à tela.

01
Entender quem mexe na peça
O primeiro passo foi mapear os perfis: avalistas, frente de loja, caixa, atendentes e estoquistas, cada um com uma fatia do processo. Esse mapa virou a espinha do menu — Estoque, Produto e Avaliação de um lado; Compra, Venda e Cliente no bloco Comercial — e a regra de que cada colaborador logado só vê as ações do seu nível e setor.
02
Achar o gargalo
Olhando o volume de entradas, cerca de 40% das peças chegavam em lote, mas o sistema só sabia cadastrar uma por vez. Essa descoberta mudou a ordem do fluxo: antes de qualquer campo, o colaborador escolhe se está cadastrando uma peça ou várias.
03
Testar com quem usa
Testes com os funcionários mostraram que a foto é o que eles mais usam para localizar uma peça na consulta — mais que código ou descrição. A tabela foi redesenhada com a imagem na primeira coluna por causa disso.
04
Desenhar sobre componentes prontos
A interface foi construída sobre Angular Material, com grade de 8 px e tela de referência de 1366 px. Isso deu velocidade ao time de desenvolvimento e consistência entre as dezenas de formulários do sistema.
05
Entregar em sprints
O projeto rodou em 6 meses e 12 sprints. O MVP priorizou o cadastro e a consulta; o painel inicial e os filtros ficaram mapeados em parte, para evoluir com o uso real.

O que melhorou no UX

8 decisões, com a tela pra provar.

01 / 08

Três portas de entrada em vez de um formulário só

O atrito: Todo mundo caía no mesmo cadastro completo, com campos de nota fiscal e titularidade que só interessam a um setor. Quem só precisava registrar uma peça nova perdia tempo pulando etapas.
O que a tela faz agora: Um modal de pré-cadastro pergunta o tipo de entrada: Cadastro Básico, Disponíveis para Tratamento (com o contador de peças aguardando) ou Avaliação. Cada caminho carrega só as etapas úteis, e todos terminam no mesmo cadastro completo.; Por que é melhor: Cada perfil vê menos campos e nunca precisa entender o processo inteiro para fazer a sua parte. O contador no cartão de tratamento já avisa que há trabalho pendente sem abrir nenhuma lista.

Modal Selecione o tipo de entrada com três opções: Cadastro Básico, Disponíveis para Tratamento com contador 5 e Avaliação em breve — Pré-cadastro: três portas de entrada, cada uma com só os campos que aquele setor precisa.

Três modais do Orit: aviso Salvar antes de continuar, seleção do tipo de entrada e tela de login com e-mail e senha — Modais enxutos: aviso de alterações não salvas, escolha do tipo de entrada e login.

02 / 08

Lote como caminho principal

O atrito: Cerca de 40% das peças entravam em lote, mas eram digitadas uma a uma, repetindo categoria, unidade e dados da compra a cada item.
O que a tela faz agora: A primeira decisão do cadastro é Individual ou em Lote. No lote, cada peça vira um bloco numerado (Peça 1, Peça 2…) com fotos próprias e o link Adicionar Peça; os dados da compra e a nota fiscal são preenchidos uma vez para o lote todo.; Por que é melhor: O trabalho repetido some e a nota fiscal sai unificada no final. O painel original estima que o lote encurta o processo em mais de 40%.

Tela Tipo de Cadastro com as opções Cadastro Individual e Cadastro em Lote em destaque e, à direita, o passo a passo de seis etapas — Primeira decisão do cadastro: uma peça ou um lote. O passo a passo mostra onde o colaborador está.

Dois formulários de Principais Características lado a lado: cadastro individual de uma peça e cadastro em lote com bloco Peça 1, fotos e botão Adicionar Peça — Mesmo formulário, dois modos: individual à esquerda e em lote à direita, com fotos e Adicionar Peça.

Formulário de cadastro em lote com categoria, unidade, quantidade, preço do grama do ouro, peso bruto e líquido, descrição com dica de formato, fotos do relógio e link Adicionar Peça — Cadastro em lote: unidade dentro do campo, cotação do ouro ao lado e dica de como escrever a descrição.

03 / 08

Indicador de etapas fixo

O atrito: O cliente relatou que ninguém sabia em que ponto do processo a peça estava nem o que ainda faltava — a peça sumia entre setores.
O que a tela faz agora: As seis etapas (categoria, características, dados da compra, origem, transferência de titularidade e nota fiscal) ficam sempre visíveis ao lado do formulário. Concluída em verde com um resumo do que foi preenchido, atual em laranja, pendente em cinza.; Por que é melhor: É a primeira heurística de Nielsen aplicada ao chão de loja: visibilidade do estado do sistema. Quem pega a peça no meio do caminho sabe o que o colega já fez e o que falta, sem perguntar.

Cadastro de produto: formulário à esquerda, as seis etapas do processo sempre à vista à direita.

Indicador de etapas vertical com seis passos: categoria, características, dados da compra, origem, transferência de titularidade e nota fiscal; dois concluídos, um em andamento — Indicador de etapas: concluído em verde, atual em laranja, pendente em cinza, com o resumo do que já foi preenchido.

04 / 08

Busca com autocompletar e recuperação de cadastro

O atrito: Uma peça que já passou pela loja voltava a ser digitada do zero, com risco de duas fichas para o mesmo item.
O que a tela faz agora: O campo Descrição ou Código sugere resultados enquanto a pessoa digita (RE550… já lista Oyster Precision, Submariner, Perpetual). O link Cadastro existente puxa categoria, marca e demais dados de uma peça já registrada.; Por que é melhor: Menos digitação, menos erro de grafia e um cadastro só por peça. Quem está no balcão com o cliente esperando ganha segundos que contam.

Dois modais de cadastro básico: um com autocompletar de código e descrição do produto, outro com os dados recuperados de um produto já cadastrado — Busca com autocompletar por código ou descrição e recuperação de dados de uma peça já cadastrada.

05 / 08

Consulta pensada para achar a peça de olho

O atrito: Na consulta, o colaborador procurava pelo código ou pela descrição, mas nos testes ficou claro que ele reconhece a peça pela imagem.
O que a tela faz agora: A foto virou a primeira coluna da tabela. O status aparece como selo colorido (Concluído, Pré-cadastrado) e a ação Concluir fica na própria linha, sem abrir a peça. Os filtros moram num painel lateral que mostra quantos produtos vão aparecer (72 produtos) antes de aplicar.; Por que é melhor: A varredura visual é mais rápida que ler código. Ver o total antes de filtrar evita a tela vazia e o vai-e-volta de ajustar filtro por tentativa.

Tela Consultar Produtos com busca, tabela de peças com foto, código, preço e status, painel lateral de filtros e detalhe ampliado da tabela — Consulta de produtos: busca, tabela com foto em primeiro lugar e painel de filtros que mostra quantos itens vão aparecer.

Tabela de produtos com colunas foto, código, categoria, descrição, preço de venda, preço de custo, status e ações — Detalhe da tabela: status Concluído ou Pré-cadastrado e a ação Concluir na própria linha.

Painel lateral de filtros com categoria, marca, faixa de valor, materiais em caixas de marcar, contagem de 72 produtos e botão Filtrar — Filtros em painel lateral: a contagem de resultados aparece antes de aplicar.

06 / 08

Campos que carregam o contexto

O atrito: Peso, preço e descrição de uma joia têm regras próprias — unidade, cotação do dia, ordem das informações — e cada colaborador escrevia de um jeito.
O que a tela faz agora: A unidade fica dentro do campo (610 gramas), o preço do grama do ouro mostra a cotação atual ao lado, ícones de moeda e balança agrupam os campos por tipo e a descrição traz a fórmula esperada: Categoria + Marca + Modelo + Pedras + ct + Metal.; Por que é melhor: Padroniza a ficha sem treinamento: a tela ensina o formato na hora de preencher, e a descrição sai igual para o e-commerce.

Cadastro de produto: formulário à esquerda, as seis etapas do processo sempre à vista à direita.

07 / 08

Revisar tudo antes de concluir

O atrito: Uma peça de dezenas de milhares de reais cadastrada com erro custa caro para corrigir depois de publicada ou faturada.
O que a tela faz agora: A última etapa reúne cadastro básico, termo de responsabilidade, nota fiscal e fotos, cada um com um botão Visualizar. O botão Concluir Cadastro só ganha destaque quando as seis etapas estão em verde.; Por que é melhor: O colaborador confere com calma, num lugar só, e assume o cadastro com segurança. O erro é pego antes de virar problema fiscal.

Tela de conclusão do cadastro com cartões Cadastro Básico, Termo de Responsabilidade e Nota Fiscal com botão Visualizar, fotos da peça, seis etapas concluídas e botão Concluir Cadastro — Conclusão: tudo revisável antes de gravar. O botão de concluir só aparece com as seis etapas em verde.

08 / 08

Modais que não atrapalham

O atrito: Cadastrar peça é tarefa repetitiva e exige atenção; qualquer janela a mais quebra o ritmo de quem faz isso o dia inteiro.
O que a tela faz agora: Os modais mostram o mínimo: título, um ícone, uma frase e uma ação principal. O aviso Salvar antes de continuar? aparece só quando há alteração não salva, com Salvar em destaque e Cancelar como link.; Por que é melhor: Menos interrupção e nenhuma perda de trabalho por fechar a tela sem querer — o que, num cadastro de seis etapas, significa não começar de novo.

Mais telas

O resto do trabalho, tela por tela.

Página inicial

Painel inicial do Orit com menu lateral por setor, saudação ao colaborador, atalhos para Estoque, Produtos e Avaliação e gráfico de produtos cadastrados e não cadastrados — Início do sistema: menu por setor, atalhos e o estoque dividido entre cadastrados e não cadastrados (versão MVP, com a anotação da grade de 8px).

O que fica desse trabalho

Antes de desenhar um campo, descobrir por onde a maior parte do trabalho entra — aqui, o lote — e fazer desse caminho o principal.
Em processo com muitos setores, mostrar a etapa atual e as anteriores vale mais que qualquer campo novo: resolve a pergunta 'onde está a peça?'.
Teste com quem usa muda coluna de tabela: a foto na frente veio dos funcionários, não do designer.
Modal bom é modal que some rápido: título, uma ação e pronto.
Um sistema interno também merece marca — o Orit laranja deu identidade a uma ferramenta de bastidor.

Entregas

Identidade da marca Orit
Arquitetura de informação por setor
Fluxo de cadastro individual e em lote
Consulta de produtos com filtros
Indicador de etapas e modais
Interface sobre Angular Material (grade de 8 px, 1366 px)

Cores do projeto

#FF5C01 · #F4F4F4

Ver no Behance

Telas do projeto original; dados pessoais que apareciam nas telas foram cobertos. Trabalho feito pelo fundador da Apol pra Orit (sistema de gestão de uma rede de compra e venda de joias e relógios de luxo; nome do cliente não divulgado por confidencialidade).