Métodos: Double Diamond, Atomic Design, benchmarking, inventário de componentes, definição de requisitos, entrevista com usuários, teste de usabilidade

Ferramentas: Figma, Google Docs/Sheets, Coda, Notion

Acesse o protótipo / Leia a documentação

Contexto

O curso de Design da Universidade Federal de Santa Catarina (UFSC) já possuía uma identidade visual consolidada para aplicações analógicas e audiovisuais, mas enfrentava dificuldades na padronização em ambientes online devido às limitações técnicas do sistema interno utilizado para criar os sites da universidade. Essa situação resultava em páginas inconsistentes e desalinhadas com a identidade visual do curso.

O desafio era criar um design system robusto e modular que integrasse os princípios visuais do curso ao ambiente online, respeitando as restrições técnicas existentes e elevando a experiência digital para professores, alunos e visitantes.

Metodologia

Para estruturar o projeto, foi utilizada a metodologia Double Diamond, expandindo ideias nas fases de pesquisa e desenvolvimento, e focando mais nas fases de definição e entrega.

Além disso, foi aplicado o Atomic Design para criar um sistema modular, onde elementos básicos se combinam para formar componentes maiores e mais complexos.

Etapas do Projeto

Pesquisa e Benchmarking

• Levantamento de materiais existentes: foi reunida toda a identidade visual consolidada do curso para entender como integrá-la ao ambiente digital.

• Benchmarking de design systems: foi analisada design systems de instituições públicas, educacionais e universitárias para identificar características essenciais e especificidades necessárias. Foi criado um quadro comparativo para mapear componentes, elementos e padrões recorrentes.

Inventário de Componentes

Foi avaliado o site atual do curso para entender como o conteúdo é organizado e identificar padrões e inconsistências nos elementos visuais e funcionais.

Definição dos Requisitos

Com base nas descobertas, foram listados os componentes e elementos necessários, estabelecendo requisitos funcionais e visuais para o design system.

Estruturação do Design System

O design system foi organizado em cinco partes principais:

• Princípios de design: a base filosófica que guia todos os outros elementos, assegurando consistência e alinhamento com os valores da marca.

• Linguagem de design: fundamentos visuais como paleta de cores, tipografia, tokens de espaçamento e hierarquia visual.

• Componentes: elementos modulares como botões, inputs, checkboxes e selects, cada um com variantes e especificações detalhadas.

• Templates: protótipo funcional do site do curso, mostrando a aplicação prática do design system em versões desktop e mobile.

• Documentação: guia detalhado para o uso e aplicação do design system, garantindo consistência entre diferentes usuários e equipes.

Teste e Resultados

Após o desenvolvimento, foram realizados testes com usuários comparando os protótipos criados com o design system ao site atual.

Resultados:

• Facilidade de encontrar informações: os usuários relataram maior clareza e agilidade na navegação.

• Melhora no aspecto visual: o novo design foi descrito como mais moderno e alinhado à identidade visual do curso.

O design system trouxe consistência, acessibilidade e modernidade ao site do curso de Design da UFSC, além de simplificar futuras implementações e adaptações.