COPPE UFRJ – Julia Gandolpho

COPPE - UFRJ

Setor: Educação
Desafio: Renovar e modernizar o site de um centro de ensino e pesquisa que estava estagnado há mais de 20 anos.
Meu papel: UX/UI Designer
Link: https://coppe.ufrj.br
Data: Nov 2022 – Jun 2023

Repensando o site de um dos maiores centros de pesquisa da América Latina.

A COPPE é a unidade que coordena os programas de pós-graduação em engenharia da Universidade Federal do Rio de Janeiro (UFRJ). Ela é o maior centro de ensino e pesquisa em engenharia da América Latina.

Esse foi um projeto feito pela agência Piloti Mobile & Internet,

Problema

O site do instituto estava antiquado, complicando as atualizações e a criação de novas páginas pelos professores. Além disso, a estrutura e a organização do site refletiam os valores e as práticas de 20 anos atrás, tornando-se uma barreira para a comunicação eficaz e para a experiência do usuário contemporânea.
Um ponto adicional que complicava ainda mais a organização do site era o portal de notícias do instituto, conhecido como “Planeta COPPE”. Dado o fluxo constante de matérias diárias, esse portal ocupava um espaço significativo das páginas e, muitas vezes, se misturava de forma confusa com as demais informações do site, tornando a navegação desafiadora.
Portanto, era evidente que uma reformulação completa era essencial para modernizar o site, promover uma experiência de usuário mais eficaz e alinhar sua estrutura com os valores e práticas da instituição.

Solução

Precisaríamos repensar a estrutura do site considerando a visão da nova diretoria, definindo o aluno como usuário principal do site. Precisaríamos separar o portal de notícias e reestruturá-lo para simplificar a classificação de matérias e facilitar a busca de informações.
Para isso escolhemos trabalhar com o WordPress, que é uma ferramenta de fácil uso (para as pessoas que iriam manter o site futuramente), versátil (permitindo organizar tanto o site principal quanto o portal de notícias sem que um interferisse no outro) e segura (com atualizações constantes e suporte 24h).

Meu papel

Por ser a única designer do projeto, pude participar de todas as etapas do processo. Isso me permitiu desempenhar um papel integral desde as reuniões iniciais até a entrega final, resultando em um crescimento significativo em diversas áreas, como:

Comunicação com o cliente

Sendo o principal ponto de contato entre a agência e o cliente, tive a oportunidade de aprimorar minhas habilidades de comunicação. Isso incluiu a capacidade de compreender e atender às diferentes demandas e visões apresentadas pelos diretores, que tinham necessidades diversas em relação ao site. Aprendi a equilibrar suas expectativas com os objetivos do projeto, garantindo uma colaboração produtiva e satisfatória.

Design
Visual

Ao desenvolver o design visual do site, incluindo seleção de paletas de cores, tipografia e elementos gráficos, pude aprender a como estruturar esses elementos, garantindo uma estética atrativa e consistente com a identidade da instituição e considerando as mudanças que ela inevitavelmente irá viver. A interface precisou ser atraente sem haver restrições que impedissem a reformulação dos conteúdos da instituição no futuro.

Acompanhamento e Feedback Contínuo

Pude trabalhar em estreita colaboração com a equipe de desenvolvimento, acompanhando as features implementadas e dando feedback constante para garantir que as implementações estivessem alinhadas visando design e usabilidade.

Treinamento
da Equipe

Pude conduzir sessões de treinamento para a equipe de manutenção do site, garantindo que estivessem aptos a seguir as diretrizes de design e manter a integridade do projeto após a conclusão. Também criei um manual de uso para as equipes futuras poderem manter o site com o mesmo nível de qualidade ao longo dos anos.

O processo

Conversas iniciais

Inicialmente tive reuniões com toda diretoria envolvida para compreender suas principais necessidades e qual seria a visão que guiaria o desenvolvimento do site daqui para frente. As reuniões aconteceram presencialmente, no próprio campus universitário, e serviram para debater soluções utilizadas por outras universidades e o que se encaixava com os propósitos da COPPE.

Problemas-chave encontrados nas reuniões

Público alvo mal definido

Desorganização das informações

Portal de notícias escondido

Dificuldade de atualização

Nessas conversas percebemos alguns pontos que precisariam ser abordados:

Melhoria da Experiência do Usuário

A revitalização do site resulta em uma experiência mais intuitiva e acessível para alunos, professores, funcionários e visitantes, tornando a busca por informações e interações com a instituição mais eficazes e satisfatórias.

Alinhamento com a Visão Institucional

A nova estrutura do site reflete a visão da instituição, com ênfase na multidisciplinaridade dos cursos e nas “Áreas Transversais,” promovendo a identidade e os valores acadêmicos da universidade.

Reorganização das Notícias

A separação e reestruturação do portal de notícias simplifica a classificação de matérias e facilita a busca de informações, melhorando a visibilidade e a compreensão das notícias relevantes para a comunidade acadêmica.

Manutenção e Sustentabilidade

A escolha da plataforma WordPress garante que a equipe da instituição mantenha o site de forma eficiente e segura, garantindo atualizações constantes e suporte contínuo.

Adaptação às Mudanças Futuras

O design flexível e as diretrizes de design bem documentadas permitem que a instituição se adapte facilmente a futuras mudanças, mantendo a relevância e a coesão do site ao longo do tempo.

Estudos e wireframes

Durante as reuniões com a diretoria, ficou evidente que o site anterior não atendia mais às expectativas dos alunos, professores e visitantes em relação à usabilidade e conteúdo relevante. Em resposta a essas preocupações, colaborei próxima à equipe de liderança para delinear um novo mapa do site que refletisse as prioridades da instituição e os objetivos de comunicação.
Por isso elaborei fluxogramas para explorar possíveis estruturas de site e esboços iniciais como ponto de partida para os wireframes. Esses esboços representavam variações na organização de conteúdo, hierarquia de informações e disposição de elementos. Eles foram cruciais para visualizar ideias de maneira concreta, facilitando discussões e tomadas de decisão. Garantiram que nos mantivéssemos alinhados com os objetivos do projeto, promovendo clareza e coerência em nossas soluções de design.
Iniciei o processo de design criando wireframes no Figma, traduzindo os esboços iniciais.

Percalços no caminho

O processo de atualização do site não esteve isento de desafios. Um dos principais obstáculos que enfrentamos foi a necessidade de reorganizar os conteúdos do Planeta COPPE, a página de notícias do site, que estava anteriormente desorganizada e com seu conteúdo frequentemente se confundindo com informações institucionais. Precisamos simplificar a classificação de matérias e facilitar a busca de informações, tornando o portal mais independente. Isso garantiria que as informações não se misturassem com o restante do site, proporcionando uma experiência de leitura mais fluida e organizada.
Além disso, o processo foi influenciado pela mudança na estruturação do centro de pesquisa, que passou a enfatizar a multidisciplinaridade dos cursos por meio das “Áreas Transversais”. Essa mudança exigiu uma adaptação na arquitetura do site para destacar essas áreas de estudo de forma apropriada e refletir a nova abordagem educacional da instituição.
Por último, a troca na diretoria durante o processo trouxe novas prioridades e interesses, o que nos obrigou a ser flexíveis e ágeis em nossos ajustes e na comunicação com os novos líderes. Apesar desses desafios, a colaboração contínua e o comprometimento com a melhoria da experiência do usuário foram fundamentais para o sucesso da revitalização do site.

UI Design

Após resolver os problemas de arquitetura da informação e definir os wireframes, iniciei o design das telas finais no Figma. Meu objetivo primordial era criar uma identidade visual alinhada com os sites de universidades renomadas, como Stanford e Brown. A equipe da COPPE expressou o desejo por um design que fosse simples, moderno e flexível, permitindo ajustes futuros.
O design foi projetado para ser responsivo, adaptando-se a uma variedade de plataformas, abrangendo desde alunos que acessam informações rapidamente em celulares até professores que buscam artigos em desktops.

Resultado

Visite o site da COPPE

Me acompanhe pela internet

Linkedin Behance Instagram

Precisa de um designer?

Entre em contato