Design System: Olé Design System

Várias fases de criação de componentes e documentação de um sistema de design

Função

Designer de produtos

Função

Designer de produtos

Função

Designer de produtos

Setor

Design

Setor

Design

Setor

Design

Duração

1 mês (2022)

Duração

1 mês (2022)

Duração

1 mês (2022)

Etapa 1. Atomic Design

Em nossa primeira aula, nos aprofundamos nos conceitos do Atomic Design, aprendendo sobre átomos, moléculas, organismos, páginas e modelos. O objetivo era criar nossas regras de forma clara e compreensível, independentemente das estruturas anteriores.

Estágio 2. Matriz R.A.S.C.I.

Em seguida, definimos as funções de cada membro do grupo no desenvolvimento do sistema de design usando a matriz R.A.S.C.I. (Responsible, Authority, Support, Consulted, Informed). Notavelmente, os membros da nossa equipe optaram por se envolver ativamente em todos os aspectos do processo, evitando a função "Informado" para garantir uma participação abrangente.

Etapa 3. Análise das partes interessadas

Para entender o impacto do Sistema de Design em várias áreas da empresa, realizamos uma análise das partes interessadas. Isso envolveu a documentação de análises comportamentais em uma tabela e um gráfico, fornecendo uma perspectiva visual do poder e do interesse de cada setor em relação ao Sistema de Design.

Etapa 1. Atomic Design

Estágio 2. Matriz R.A.S.C.I.

Etapa 3. Análise das partes interessadas

Etapa 4. Roteiro

Depois de realizar a análise das partes interessadas e criar a matriz, desenvolvemos o modelo Go Product Roadmap. Esse modelo definiu as entregas trimestrais e delineou os estágios necessários para cada versão a fim de garantir a integridade.

Etapa 5. Inventário de componentes

Nosso objetivo era criar um sistema de design para uma plataforma on-line existente. Nosso grupo escolheu o Dribbble, uma comunidade on-line para apresentação de conteúdo artístico. Devido à complexidade da plataforma, com várias guias e componentes, dividimos o trabalho entre os designers. Cada designer se concentrou em uma guia específica, comparando e priorizando componentes básicos e complexos.

Um inventário foi criado no Notion, usando a página "Inspiração" como referência, e documentamos todo o processo de desenvolvimento no Notion.

Etapa 6. OKR

Estabelecemos os principais objetivos e resultados para nosso Sistema de Design. Isso nos ajudou a entender as atividades, a disseminação e as mudanças que o Olé Design System traria quando aplicado à plataforma.

Resultados

Cada designer selecionou um componente básico para criar e trabalhou com dois tipos de tokens para obter uma compreensão mais profunda da criação do Design System. Definimos de forma colaborativa uma regra semântica para garantir que os tokens e os componentes fossem identificados e aplicados de forma consistente.

Durante nossa pesquisa no Dribbble, identificamos inconsistências e propusemos várias alterações:

Princípios de produto redefinidos
Tipografia aprimorada para maior acessibilidade
Espaços, cores e estados aprimorados

Experimente no Zeroheight

A etapa final envolveu a publicação dos tokens e componentes no O͟l͟é͟ ͟D͟e͟s͟i͟g͟n͟ ͟S͟y͟s͟t͟e͟m͟ ͟o͟n͟l͟i͟n͟e͟ ͟l͟i͟b͟r͟a͟r͟y͟ ͟o͟n͟ ͟Z͟e͟r͟o͟h͟e͟i͟g͟h͟t͟. Isso foi feito para facilitar o acesso de todos os usuários e desenvolvedores.

Resultados

Durante nossa pesquisa no Dribbble, identificamos inconsistências e propusemos várias alterações:

Princípios de produto redefinidos
Tipografia aprimorada para maior acessibilidade
Espaços, cores e estados aprimorados

Experimente no Zeroheight

Outros projetos

Projeto de graduação: um chatbot para pessoas com epilepsia

O chatbot "Eva", uma inovação tecnológica para ajudar a disseminar conhecimento e informações sobre saúde, usando o fluxo de conversação

Experiência do usuário: Soluções apropriadas para uma fertilização agrícola eficiente

A plataforma on-line ajuda os técnicos agrícolas a recomendar o melhor fertilizante para o solo

Projeto de redesign: E-mail

Elevar a experiência do usuário de uma renomada empresa de hospedagem, SaaS, serviços de Internet e computação em nuvem

Mobile Design: Análise do solo unificada com recomendação

A plataforma móvel ajuda os usuários com a análise do solo para recomendar o melhor fertilizante para o solo

Pesquisa de experiência do usuário: Catálogo de fertilizantes

Reorganização da arquitetura de informações na página do catálogo de fertilizantes, adicionando preços de produtos

Projeto de redesign: plataforma on-line de ensino de beleza

Projetar um aplicativo responsivo para conectar professores de beleza e entusiastas da beleza, do conceito ao protótipo.

Ana Neves

Ana Neves

Ana Neves