Escola de Arquitetura e Design da UFMG

Escola de Arquitetura e Design da UFMG

UI/UX e Web Design

Solucionando problemas centrais de usabilidade por meio de uma arquitetura de informação atualizada e um novo sistema de design visual.

A Escola de Arquitetura e Design da UFMG (EAD UFMG), sede de seus programas homônimos, é uma instituição de prestígio, mas seu site oficial não estava atendendo às necessidades de sua comunidade. O portal, fundamental para processos acadêmicos como consulta de cursos e registro de estágios, era uma fonte de frustração para muitos usuários. A interface era confusa, a navegação estava fragmentada e o design visual era datado e desorganizado.

O problema era crítico: 86% dos estudantes relataram dificuldade em encontrar o que precisavam no site, o que os forçava a depender de grupos de conversa informais para obter informações essenciais.

Realizei um projeto voluntário de UI/UX ponta a ponta, no qual meu desafio foi diagnosticar e mitigar esses problemas de usabilidade. O foco principal foi em um design pragmático e orientado por pesquisas, isto é, que buscava melhorar a experiência do usuário sob restrições do mundo real, indo além de uma simples reformulação visual criativa.

Objetivos centrais:

  • Conduzir análises heurísticas, pesquisas com usuários e entrevistas com stakeholders para identificar pontos de dor e definir os requisitos de projeto.

  • Utilizar os achados para projetar uma nova Arquitetura de Informação lógica e um UI Kit consistente e acessível.

  • Desenvolver e lançar um beta funcional para comprovar, com dados quantitativos e qualitativos, que o novo design resolveu os problemas centrais.

Priorizando uma abordagem pragmática

Minhas pesquisas afirmaram que os problemas centrais eram funcionais e não apenas visuais. Os usuários estavam frustrados com a navegação caótica, a arquitetura de informação fragmentada em 12 categorias e elementos inconsistentes.

Portanto, tomei a decisão de adotar uma abordagem visual e estrutural intencionalmente pragmática. Em vez de uma ruptura significativa com a identidade visual da Escola, o que levaria a um rebranding criativo demorado, foquei meus esforços em sistematizar e aprimorar a identidade existente. Isso me permitiu priorizar questões mais urgentes, como corrigir a navegação, melhorar a usabilidade e criar uma estrutura de site lógica.

O novo sistema visual

O novo sistema visual

A abordagem visual foi derivada diretamente da forte identidade modernista da Escola. Analisei o logotipo existente, caracterizado por bordas angulares e formas geométricas, e o utilizei como base para a direção visual da nova interface (UI). Isso se traduziu em uma abordagem minimalista e séria que privilegia o uso amplo de respiros, baixo peso visual e fotografia limpa em vez de ilustrações.

Essa filosofia de design estrutural e limpo, que reflete a própria arquitetura da escola, foi aplicada a cada componente.

LAYOUT E COMPONENTES

LAYOUT E COMPONENTES

Espelhando diretamente o símbolo do logotipo, apliquei cantos retos em todos os componentes da interface (UI), como boxes e cards. Também utilizei linhas finas para criar divisão e estrutura, reforçando a estética arquitetônica e modernista do site.

TIPOGRAFIA

TIPOGRAFIA

Selecionei a família tipográfica DM Sans por dois motivos:

  • Harmonia com a marca: como o logotipo original não incluía um componente tipográfico, era essencial escolher uma fonte que harmonizasse com suas formas geométricas. A DM Sans, sendo uma sans-serif geométrica, foi a escolha ideal.

  • Clareza e funcionalidade: devido à sua grande altura de x, a DM Sans oferece excelente legibilidade mesmo em tamanhos reduzidos, garantindo que o site permaneça acessível e a leitura seja agradável.

PALETA DE CORES

PALETA DE CORES

Para manter a conformidade visual com a UFMG e preservar o senso de familiaridade, adotei intencionalmente uma paleta monocromática. Mantive o vermelho institucional, mas o expandi para uma gama mais versátil (vermelho, vermelho vibrante e tons de cinza). Isso permitiu criar uma hierarquia visual mais clara, eliminando o caos cromático do site original.

COMPONENTES DA INTERFACE

COMPONENTES DA INTERFACE

Minha abordagem na construção do UI Kit foi totalmente orientada à resolução de problemas: cada componente foi projetado para sanar um ponto de dor específico identificado na pesquisa.

Por exemplo, a pesquisa revelou que informações críticas e prazos importantes se perdiam em meio a longos blocos de texto. Para resolver isso, criei um componente de "notas de página" para destacar visualmente informações essenciais, garantindo que avisos cruciais fossem notados imediatamente pelos alunos.

Impacto e resultados

Para validar o novo design, desenvolvi e lancei uma versão beta funcional utilizando o Framer, disponibilizando-a para a comunidade acadêmica. O beta obteve 196 visitantes únicos e 43 respostas de feedback, demonstrando uma evolução clara em:

  1. Funcionalidade: as avaliações saltaram de 41% negativas (no site original) para 88% positivas ("Bom" ou "Muito Bom").

  1. Design Visual: a satisfação dos usuários subiu de 49% de rejeição para 91% de aprovação.

  1. Experiência Geral: 93% dos usuários classificaram o novo design como "Bom" ou "Muito Bom".

Os dados comprovam que a abordagem pragmática foi eficaz para mitigar os problemas críticos de usabilidade e hierarquia visual do portal.

Aprendizados pessoais

Este projeto representou um importante exercício de equilíbrio entre pragmatismo e criatividade, especialmente em contextos complexos sob prazos restritos. A oportunidade de exercitar uma vertente mais analítica e lógica do design, em contraste com projetos puramente voltados para branding, foi uma experiência extremamente enriquecedora e que expandiu minha visão sobre o papel do designer como solucionador de problemas.