Saltar para o conteúdo

Caso de estudo · UX/UI Design

Rede 1/4 — Microsite de habitação acessível para estudantes da NOVA

Enquanto colaborador na Link, participei na implementação e divulgação do projecto Rede 1/4 — uma iniciativa da Universidade NOVA de Lisboa que aproxima estudantes deslocados de anfitriões com quartos disponíveis.

Cliente
Universidade Nova de Lisboa
Contexto
Colaborador — Link
Set. 2024 · 5 meses
Papel
UX/UI Design · Lead
Responsabilidades
  • Identificação de necessidades
  • Protótipos lo-fi e hi-fi
  • Testes de usabilidade
  • Visual design · Storyboard
  • Desenvolvimento vetorial
  • Animação
Homepage do microsite Rede 1/4
Homepage
Percurso do estudante — Rede 1/4
Percurso Estudante
Percurso do anfitrião — Rede 1/4
Percurso Anfitrião
Perguntas frequentes — Rede 1/4
Perguntas Frequentes

A crise habitacional afecta directamente os estudantes deslocados

A crescente dificuldade dos estudantes deslocados em encontrar alojamento acessível e digno na Área Metropolitana de Lisboa, agravada pela escassez de oferta e pelo aumento dos preços no mercado habitacional, levou a NOVA a criar a Rede 1/4 — uma plataforma solidária e regulamentada.

73%
dos estudantes deslocados da NOVA têm dificuldade em encontrar habitação acessível
20%
abaixo do valor de mercado — preço máximo dos quartos Rede 1/4, garantido por protocolo
18
municípios cobertos pela rede na Área Metropolitana de Lisboa

O desafio de ambos os lados

Existem milhares de quartos devolutos em Lisboa cujos proprietários — muitas vezes reformados ou famílias com filhos crescidos — não sabem como ou a quem arrendar com segurança. Em simultâneo, estudantes vindos de outras cidades enfrentam uma procura caótica, sem plataformas de confiança que garantam condições justas.

A solução passou por criar um microsite intuitivo e acessível que simplificasse o processo de registo e correspondência entre estudantes e anfitriões, apoiado pela credibilidade institucional da NOVA.

CUSTO HABITAÇÃO vs TETO REDE 1/4 €520 Mercado Lisboa 2024 €369 Rede 1/4 máximo €220 Bolsa DGES média

Design Thinking — Double Diamond

O processo seguiu o modelo Double Diamond do Design Council — divergir para descobrir e compreender, convergir para definir e entregar. Cada fase foi informada por dados reais de utilizadores, garantindo que as decisões de design servissem as pessoas, não os pressupostos.

Descobrir Divergir Definir Convergir Desenvolver Divergir Entregar Convergir
Método 01

Identificação de Necessidades

Levantamento contextual junto de estudantes e potenciais anfitriões. Análise dos fluxos existentes e pontos de dor no processo de registo e correspondência.

Método 02

Protótipos Lo-fi

Wireframes em papel e digital para validar a arquitectura de informação e os fluxos principais, antes de investir em visual design. Iteração rápida com feedback da equipa.

Método 03

Protótipos Hi-fi

Protótipos de alta fidelidade em Figma com design system próprio. Componentes reutilizáveis e tokens de cor alinhados com a identidade visual do projecto.

Método 04

Testes de Usabilidade

Validação dos fluxos de registo com utilizadores reais — estudantes e anfitriões. Identificação de bloqueios e optimização antes do lançamento.

Método 05

Visual Design & Storyboard

Definição da linguagem visual com gradientes estratégicos: verde escuro para anfitriões, verde claro para estudantes. Storyboard dos fluxos principais.

Método 06

Animação & Vetorial

Desenvolvimento vectorial dos elementos de interface e animações que reforçam a fluidez da experiência, alinhadas com as formas curvilíneas da identidade.


O que os utilizadores precisam de verdade

A fase de investigação revelou que o preço, apesar de central, não era a única barreira. A confiança no processo, a clareza das condições e a facilidade de registo determinavam se um estudante ou anfitrião completava — ou abandonava — o fluxo.

🔐
Confiança institucional é decisiva

A validação pela NOVA é o principal factor de confiança para ambos os perfis. Anfitriões que hesitavam confiar em estudantes desconhecidos mostravam-se disponíveis quando a universidade garantia o processo.

📋
Burocracia afasta anfitriões

Proprietários com quartos disponíveis desistiam por receio de documentação complexa. A simplicidade do processo de registo foi prioridade máxima no design do microsite.

🎯
Dois perfis, dois modelos mentais

Estudantes e anfitriões têm expectativas, vocabulário e fluência digital muito diferentes. A arquitectura de informação teve de servir ambos sem criar fricção ou confusão entre perfis.

📍
Critérios de elegibilidade são bloqueantes

A falta de clareza sobre quem pode ser estudante ou anfitrião elegível era uma das maiores causas de abandono no registo. A informação tinha de estar visível antes de qualquer acção.

Testemunhos

"Tenho o quarto livre há dois anos. Se a universidade garantia quem era o estudante, alugava logo — era só isso que precisava de saber."

— Anfitrião · Almada · Entrevista exploratória

"Não consigo perceber se sou elegível antes de começar a preencher tudo. Desisti a meio porque não sabia se valia a pena."

— Estudante · NOVA FCSH · Teste de usabilidade

Dois utilizadores — uma solução

O microsite serve dois perfis com motivações, fluência digital e necessidades completamente distintas. As decisões de design foram sempre avaliadas contra estes dois contextos.

MF
Mariana Ferreira
Estudante · 22 anos · NOVA FCSH

Contexto

  • Deslocada do Porto, ingressou no Mestrado em Comunicação
  • Bolseira DGES — €210/mês de apoio à habitação
  • Gere tudo no telemóvel, pouco tempo para burocracia

Objectivos

  • Saber rapidamente se é elegível e o que precisa de fazer
  • Encontrar quarto abaixo de €350/mês, bem localizado
  • Sentir-se segura com o anfitrião antes de avançar

Frustrações

  • Critérios de elegibilidade pouco claros
  • Formulários demasiado longos para completar no telemóvel
  • Sem confirmação de que o processo está a correr bem
Clareza Rapidez Confiança
JA
José Antunes
Anfitrião · 61 anos · Almada

Contexto

  • Reformado, quarto livre desde que filho saiu de casa
  • Nunca arrendou; preocupado com burocracia e risco
  • Usa o computador, evita apps que não conhece

Objectivos

  • Perceber exactamente o que tem de fazer, passo a passo
  • Arrendar a alguém validado e de confiança
  • Ter suporte claro caso surja algum problema

Frustrações

  • Receio de assinar algo sem perceber as implicações
  • Não sabe o que acontece depois de registar o quarto
  • Linguagem técnica e jurídica cria desconfiança
Simplicidade Suporte Segurança

A jornada da Mariana — do primeiro contacto ao registo concluído

Fase Acções Pensamentos Emoção Pontos de dor Oportunidade de design
Consciência Recebe divulgação da NOVA sobre a Rede 1/4 "Pode ser a solução que procuro…" 🤔 Curiosa Desconhecia a existência do programa Comunicação clara e visível sobre quem é elegível
Exploração Visita o microsite no telemóvel "Sou estudante da NOVA — posso candidatar-me?" 😊 Esperançosa Critérios de elegibilidade escondidos ou pouco claros Secção "Estudantes Elegíveis" visível acima do fold
Registo Preenche formulário de registo como estudante "Há demasiados campos. Posso guardar e continuar?" 😰 Frustrada Formulário longo, sem progresso visível, sem guardar rascunho Registo progressivo em passos com indicador de progresso
Validação Aguarda confirmação do registo "Ficou registado? Não recebi confirmação…" 😟 Ansiosa Sem feedback após submissão; incerteza sobre próximos passos Email de confirmação imediato com resumo e timeline clara
Correspondência É contactada pela equipa da Rede 1/4 "Finalmente! Quando posso ver o quarto?" 🎉 Aliviada Tempo de espera indeterminado; sem actualizações proactivas Área pessoal com estado do processo em tempo real

Como poderíamos… (HMW)

HMW 01…tornar os critérios de elegibilidade visíveis antes de qualquer acção, para que ninguém comece um processo que não pode concluir?
HMW 02…simplificar o registo ao ponto de um anfitrião de 60+ anos o completar sem ajuda externa?
HMW 03…usar a autoridade institucional da NOVA como âncora de confiança ao longo de toda a experiência?
HMW 04…diferenciar claramente os percursos de estudante e anfitrião sem criar confusão para quem aterrissa pela primeira vez?

Dois percursos distintos, um microsite

A estrutura do microsite foi desenhada em torno dos dois perfis — estudante e anfitrião — com navegação e conteúdo claramente separados desde o primeiro momento. A homepage funciona como hub de distribuição, dirigindo cada utilizador para o percurso correcto.

redeumquarto.pt Homepage Encontrar Quarto Oferecer Quarto Perguntas Freq. Registar A rede que precisam Benefícios Critérios + Registo Solução inovadora Benefícios Critérios + Registo Globais Estudantes Anfitriões Página principal Percurso estudante / anfitrião Sub-secções

Identidade visual com propósito estratégico

O design seguiu a identidade do logótipo da Rede 1/4 — formas curvilíneas para transmitir fluidez e acolhimento. As cores foram aplicadas como gradientes estratégicos: verde escuro para os anfitriões, verde claro para os estudantes, criando distinção imediata entre perfis.

Paleta de Cores — Rede 1/4

Primary Gradiente
Anfitrião #0D5C3A
Estudante #1DBF8A
Background #F5F7F5
Texto #1A1A1A
Texto 2 #5C6E64

Princípio de diferenciação por cor

ANFITRIÃO

Verde escuro

ESTUDANTE

Verde claro

Escala Tipográfica

Display · 36px Rede 1/4
Heading · 22px Secção
Body · 16px Texto corrido da plataforma
Label · 12px LABEL · MONO · CAPS

Forma de identidade — curvilínear

Fluidez Acolhimento Confiança

O microsite entregue

O resultado final é um microsite com tema claro, gradientes verdes estratégicos e navegação bifurcada entre estudantes e anfitriões. Cada percurso apresenta benefícios, critérios de elegibilidade e um fluxo de registo optimizado.

01 Homepage do microsite Rede 1/4 — apresentação do projecto, CTAs para estudantes e anfitriões, parceiros e FAQ
Ecrã 01 Homepage — Hub de distribuição entre percursos, parceiros e perguntas frequentes
02 Página para estudantes — benefícios, critérios de elegibilidade e processo de registo
Ecrã 02 Percurso Estudante — Benefícios, critérios de elegibilidade, testemunhos e CTA de registo
03 Página para anfitriões — solução inovadora, benefícios e processo de registo de quarto
Ecrã 03 Percurso Anfitrião — Proposta de valor, benefícios e critérios para registar um quarto
04 Página de perguntas frequentes organizada por perfil — Globais, Estudantes e Anfitriões
Ecrã 04 FAQ — Perguntas frequentes segmentadas por perfil: Globais, Estudantes e Anfitriões

Testar cedo, iterar rápido

Os testes de usabilidade com estudantes e anfitriões revelaram bloqueios críticos que só utilizadores reais conseguem expor. Duas rondas de testes conduziram a iterações concretas que melhoraram significativamente a taxa de conclusão do registo.

❌ Problema identificado

Os critérios de elegibilidade para estudantes (ser de uma escola da NOVA, ter candidatura activa, ter alojamento fora do município de residência) não estavam visíveis antes do início do registo. Utilizadores preenchiam o formulário para descobrir no final que não eram elegíveis.

✅ Solução implementada

Secção "Estudantes Elegíveis" colocada acima do fold, antes de qualquer CTA de registo. Linguagem simplificada com lista de critérios clara e directa. Redução significativa de registos inválidos e de frustração no processo.

❌ Problema identificado

Anfitriões com menor fluência digital ficavam bloqueados a meio do processo de registo do quarto por não compreenderem o que era pedido em determinados campos ou por não receberem confirmação de que a submissão tinha sido recebida.

✅ Solução implementada

Adicionado feedback visual imediato após cada passo do registo. Textos de ajuda contextual em linguagem simples junto a cada campo. Ecrã de confirmação claro com resumo do que foi submetido e indicação dos próximos passos.

❌ Problema identificado

A diferenciação entre o percurso de estudante e de anfitrião não era imediatamente clara na homepage. Utilizadores chegavam pela primeira vez e não sabiam qual dos dois caminhos devia ser o seu ponto de entrada.

✅ Solução implementada

Redesign da homepage com dois CTAs visualmente distintos — "Procuras um quarto?" e "Tens um quarto disponível?" — com cores e iconografia diferenciadas. Hierarquia visual clara que direcciona cada utilizador ao percurso correcto sem ambiguidade.


Design com impacto social real

O projecto Rede 1/4 mostrou como o design centrado no utilizador pode servir objectivos sociais concretos — tornar o acesso ao ensino superior mais equitativo, ao remover uma das suas maiores barreiras práticas: a habitação.

Desenvolveu-se um microsite intuitivo e acessível, alinhado com a identidade visual do logótipo da Rede 1/4, que apresenta formas curvilíneas para transmitir fluidez e acolhimento. As cores foram aplicadas como gradientes estratégicos — verde escuro para os anfitriões e verde claro para os estudantes — criando distinção clara entre os perfis e reforçando a hierarquia visual de toda a plataforma.

O design focou-se em usabilidade, clareza nos fluxos de registo e feedback visual consistente, garantindo uma experiência positiva e de confiança para todos os utilizadores. A abordagem permitiu integrar eficazmente os objectivos da Universidade NOVA de Lisboa, mantendo um forte impacto social e uma comunicação visual coerente com a marca e os seus valores.

01

A confiança institucional é um activo de design

A credibilidade da NOVA não era apenas contexto — era o principal argumento de conversão para ambos os perfis. Tornar essa credibilidade visível e constante ao longo do microsite foi uma das decisões de design mais impactantes.

02

Dois perfis exigem dois pontos de entrada distintos

Tentar servir estudantes e anfitriões com a mesma navegação e linguagem criava confusão em ambos. A separação clara desde a homepage — com cor, copy e CTA distintos — foi a mudança com maior impacto na experiência.

03

Inclusão não é opcional em serviços de utilidade pública

Considerar anfitriões com menor fluência digital como utilizadores primários — e não secundários — transformou a qualidade do produto. Simplicidade que serve alguém de 60 anos serve, por definição, toda a gente.

Próximo caso de estudo
Plataforma de mapeamento de competências — Bizdirect
Ver todos os projetos →