Case 08 / 11

Gianina

Plataforma que gera os catálogos em PDF da Gianina a partir de uma planilha, sem abrir programa de design.

Cliente: Gianina Distribuidora, de higiene pessoal, perfumaria e cosméticos, com filiais em Dracena, Rio Claro e São Paulo
Meu papel: Produto, UX e UI, design system e construção da plataforma
Entregas: Quatro telas de trabalho, importação de planilha, mesa de fotos, editor de capa e moldura, gerador de PDF por filial e design system

AberturaO início da semana, com o estado de cada passo, e o trilho abrindo as quatro telas, uma a uma.

Problema

O mix da Gianina muda toda semana, e cada catálogo era refeito à mão: planilha, pasta no Drive, Photoshop, InDesign e compressão do PDF, uma vez por filial. A conferência dos catálogos publicados achou 3 produtos repetidos, 19 descrições diferentes entre filiais e o e-mail de Dracena na contracapa de São Paulo.

Solução

Um cadastro único de produtos e fotos que gera o catálogo sozinho. A planilha entra por quatro passos, o sistema avisa o que falta e só grava depois de mostrar o que vai mudar. Dracena, Rio Claro, São Paulo e qualquer recorte saem da mesma base.

(01)

Passo a passo

A semana do catálogo, em quatro telas.

Gravações do uso da plataforma, da planilha ao PDF da filial. O trilho mostra os quatro passos, e o número em Produtos e fotos conta o que ainda está sem foto.

1 · PlanilhaO arquivo cai na tela e o sistema mostra o que entra, o que muda e o que sai do mix. Só grava depois de confirmado.

A conferência da planilha da semana: o resumo de quantos produtos entram, mudam e saem do mix, o aviso das linhas que ficaram de fora, as abas Novos, Alterados, Saem do mix e Problemas e a lista dos produtos novos — ConferênciaA conferência: o que entra, o que muda e o que sai do mix.

Planilha da semana na aba Problemas: a linha da planilha, o código, o problema, como EAN não confere, linha sem código e sem descrição, e o detalhe de cada um — ProblemasA aba Problemas: a linha, o código e o motivo de cada uma.

2 · Produtos e fotosCinco arquivos soltos de uma vez: a mesa de fotos acha o produto de cada um e deixa o que não bate para corrigir.

Lista de produtos filtrada por Sem foto: miniatura com o aviso sem foto, código, descrição, marca e em quais filiais está o produto — Sem fotoOs produtos sem foto no mix, com o filtro e a contagem.

A Mesa de fotos aberta sobre a lista, com cinco arquivos: três já ligados ao produto pelo código, e dois com o aviso de que o nome do arquivo não bate com nenhum código — Mesa de fotosA mesa de fotos: o produto de cada arquivo, e dois para corrigir.

3 · Capa e molduraAs páginas do modelo, o gabarito e os dados de cada filial. O telefone é arrastado na própria página, e dá para desfazer.

O editor de modelo na Capa: a lista de páginas à esquerda, a capa do catálogo no centro com a margem de segurança tracejada e, à direita, a arte da capa, o gabarito e o que a plataforma escreve por cima — CapaA capa, com a margem de segurança e o que a plataforma escreve por cima.

O editor de modelo em Produtos par: a moldura de uma página de produtos com a grade, a tarja da marca e o rodapé, e as opções de cada campo ao lado — MolduraA moldura das páginas de produtos, com a grade e o rodapé.

4 · Montar e gerarNome da edição, filiais e o que entra, com as páginas reais ao lado. O PDF sai em segundo plano e aparece na lista.

A tela Novo catálogo: nome da edição, as três filiais com o total de produtos no mix, as opções do que entra e, à direita, as páginas reais do catálogo com a contagem de 189 páginas, 5.333 produtos e 77 marcas — Novo catálogoNovo catálogo: a escolha à esquerda e as páginas reais à direita.

A lista de catálogos gerados, com o nome da edição, a filial, o tamanho, e os botões Abrir, Baixar PDF, refazer e apagar — CatálogosA lista de catálogos, com abrir, baixar o PDF e refazer.

(02)

Jornada

Cinco regras que mandam em todas as telas.

O quadro do processo mostra de onde elas saíram. O da jornada mostra, em cada passo, o que eu faço, o que o sistema mostra e o que ele impede.

Quadro no estilo FigJam: do problema ao PDF, em cinco seções ligadas por setas, o problema, o que eu levantei, o que eu decidi, o que eu construí e como ficou, com notas adesivas em primeira pessoa e um aprendizado em destaque

Quadro no estilo FigJam: do problema ao PDF, em cinco seções ligadas por setas, com notas adesivas em primeira pessoa

Quadro no estilo FigJam: a semana do catálogo em quatro passos, planilha, produtos e fotos, capa e moldura e montar e gerar, cada um com o print da tela e três notas, o que eu faço, o que o sistema mostra e o que ele impede, e embaixo as cinco regras de usabilidade

Quadro no estilo FigJam: a semana do catálogo em quatro passos, cada um com o print da tela e três notas, e as cinco regras de usabilidade

(03)

Design system

O visual do site da Gianina, em um sistema.

Azul, tinta e cinza, Faculty Glyphic só no título da tela e Mona Sans no resto. Nove componentes tirados do uso real, cada um com a regra de quando usar.

Prancha de cores do design system: o azul da marca e os azuis de ação, de leitura e de apoio, as tintas e os fundos, e os estados em ordem, atenção e problema, cada um com cor cheia, fundo e linha — CoresAs cores: um azul só, as tintas e os três estados.

Prancha de cores do design system: o azul da marca, as tintas e os fundos e os três estados — CoresAs cores: um azul só, as tintas e os três estados.

Prancha de tipografia do design system: a escala com Display em Faculty Glyphic e Headline, Title, Lead, Body, Label e Caption em Mona Sans, com o tamanho e o uso de cada um, a regra dos algarismos de largura fixa e o que o sistema evita — TipografiaA escala de texto, com a regra dos algarismos de largura fixa.

Prancha de tipografia do design system: a escala de texto e a regra dos algarismos de largura fixa — TipografiaA escala de texto, com a regra dos algarismos de largura fixa.

Prancha de forma do design system: os cantos de 8, 12, 16 e 24 pixels e a pílula, a escala de espaço na base de 4 pixels, as três sombras e o movimento — FormaCantos, espaço, sombra e movimento.

Prancha de forma do design system: cantos, espaço, sombras e movimento — FormaCantos, espaço, sombra e movimento.

Prancha de componentes do design system: botão principal, secundário, suave e discreto, campo de texto, passo do trilho, selo de estado, chave e painel com lista, todos com o HTML e o CSS do próprio sistema — ComponentesOs nove componentes, com o HTML e o CSS do próprio sistema.

Prancha de componentes do design system: os nove componentes em coluna — ComponentesOs nove componentes, com o HTML e o CSS do próprio sistema.

(04)

Resultado

O PDF de Dracena, em menos de 20 segundos.

O catálogo completo, com 189 páginas, 5.333 produtos e 32,7 MB, saiu em 17 e em 18 segundos nas duas vezes que medi. A mesma base gera Rio Claro, São Paulo e qualquer recorte.

Cinco páginas do PDF de Dracena gerado pela plataforma: a capa, a abertura com a Gianina em números, o índice por marca, uma página de produtos com a grade e a tarja da marca, e a contracapa — Catálogo geradoCapa, abertura, índice, produtos e contracapa do PDF de Dracena.

Cinco páginas do PDF de Dracena gerado pela plataforma: capa, abertura, índice, produtos e contracapa — Catálogo geradoCapa, abertura, índice, produtos e contracapa do PDF de Dracena.

< 20 spara gerar o PDF completo de Dracena, com 189 páginas e 32,7 MB, na versão de produção rodando no computador

4passos, no lugar de planilha, Drive, Photoshop, InDesign e compressão

8.077produtos e 100 marcas num cadastro só, para as três filiais

56%dos produtos são os mesmos nas três filiais e passam a ser cadastrados uma vez

O que muda na rotina

Ninguém procura arquivo nem confere página por página. O sistema avisa o que falta, mostra o que a planilha vai mudar antes de gravar e calcula índice, numeração e dados de cada filial na hora de gerar. Por isso o e-mail de uma filial não aparece mais na contracapa de outra.

(Próximo case) 09 / 11

Coco Bambu

Análise do site e das páginas de evento, e um padrão novo que põe o prato na primeira tela.

Abrir o case

Gianina

Problema e solução

A semana do catálogo, em quatro telas.

Cinco regras que mandam em todas as telas.

O visual do site da Gianina, em um sistema.

O PDF de Dracena, em menos de 20 segundos.