Bezel: Design System

A Plataforma MindMiners é uma plataforma automatizada de pesquisa que oferece uma solução completa para geração de consumer insights — desde a construção de questionários, coleta de dados com consumidores reais até a análise e visualização de resultados.

É voltada tanto para profissionais de pesquisa e marketing, quanto para áreas como produto, inovação, branding, experiência do cliente, RH e agências, que precisam tomar decisões baseadas em dados sobre comportamentos e preferências do público.

Pré-trabalho

Antes de começarmos a criar o design system em si, foi necessário realizar uma inspeção e auditoria para documentarmos todos os componentes existentes nos produtos. Com isso, conseguimos identificar problemas de inconsistências que nos guiaram a tomar decisões de design mais acertivas.

Quadro do Blueprint detalhado de um novo projeto DIY To/Be, com etapas, fluxogramas, diagramas e etapas de interação para inovação e gerenciamento de mudanças.

Planejamento e alinhamento

Inventário

Fundamentos de design

Definição de tokens

Criação de componentes

Integração e testes

Documentação

Manutenção e evolução

Princípios

Os princípios de design foram criados para servir de guia para o time tomar uma decisão de design baseada nos valores da empresa.

Simples

Proporcionar um visual limpo sem muitas distrações. Deixar as informações em evidência

(Evitar muito uso de cores além das primárias e secundárias e das escalas de branco/cinza. Bom espaçamento de informações)

Simples

Proporcionar um visual limpo sem muitas distrações. Deixar as informações em evidência

(Evitar muito uso de cores além das primárias e secundárias e das escalas de branco/cinza. Bom espaçamento de informações)

Simples

Proporcionar um visual limpo sem muitas distrações. Deixar as informações em evidência

(Evitar muito uso de cores além das primárias e secundárias e das escalas de branco/cinza. Bom espaçamento de informações)

Consistente

Criar uma consistência visual para que todos consigam se encontrar nos caminhos. Manter consistência em tamanhos, cores e voz(texto) para ajudar nessa jornada.  

(Reduzir, re-utilizar e evitar retrabalho)

Consistente

Criar uma consistência visual para que todos consigam se encontrar nos caminhos. Manter consistência em tamanhos, cores e voz(texto) para ajudar nessa jornada.  

(Reduzir, re-utilizar e evitar retrabalho)

Consistente

Criar uma consistência visual para que todos consigam se encontrar nos caminhos. Manter consistência em tamanhos, cores e voz(texto) para ajudar nessa jornada.  

(Reduzir, re-utilizar e evitar retrabalho)

Acessível

Tornar nossos produtos acessíveis para o máximo de pessoas possíveis. Projetar para todos com critérios básicos de acessibilidade para design e código.  

(Contraste de cores, navegação por voz, textos inclusivos)

Acessível

Tornar nossos produtos acessíveis para o máximo de pessoas possíveis. Projetar para todos com critérios básicos de acessibilidade para design e código.  

(Contraste de cores, navegação por voz, textos inclusivos)

Acessível

Tornar nossos produtos acessíveis para o máximo de pessoas possíveis. Projetar para todos com critérios básicos de acessibilidade para design e código.  

(Contraste de cores, navegação por voz, textos inclusivos)

Design tokens

Design tokens são variáveis de estilo, espelhados tanto em design quanto em tecnologia. São todas as possibilidades de estilo que usamos para construir o visual dos nossos componentes.

Dividido em dois

Com muitas variáveis de estilos, dividimos os design tokens em dois tipos: Global tokens e Brand tokens.