Como transformar um website estático e pouco atrativo numa experiência dinâmica e intuitiva que gere oportunidades de trabalho e novos negócios?
O meu website pessoal tem como principal objetivo apresentar os meus serviços e projetos de UX/UI Design e Frontend Web Development. Este case study foca-se no redesign do website, visando melhorar a experiência do utilizador e, assim, aumentar as oportunidades de conversão, seja para propostas de trabalho ou captação de novos clientes.
Durante este projeto, fui responsável por diversas tarefas que cobriram desde a pesquisa até ao desenvolvimento completo do website:
Desk Research: Identificação de problemas no website atual.
User Research: Condução de entrevistas para compreender as necessidades dos utilizadores.
Personas: Criação de personas baseadas nos insights das entrevistas.
Benchmarking: Análise da concorrência e boas práticas.
Arquitetura de Informação: Estruturação da navegação para melhorar a experiência.
Wireframes: Criação de wireframes de baixa, média e alta fidelidade, explorando diferentes soluções e refinando-as com base em feedback.
UI Kit: Definição de um guia de estilo, incluindo tipografia, cores e ícones.
Protótipo: Desenvolvimento de um protótipo interativo para validação.
Testes de Usabilidade: Realização de testes com utilizadores para refinamento da experiência.
Desenvolvimento Frontend: Tradução dos designs para código, implementando interfaces e funcionalidades com HTML, CSS, JavaScript e PHP e garantindo uma experiência otimizada em diferentes dispositivos.
Testes de Compatibilidade: Realização de testes em múltiplos browsers e dispositivos para garantir uma experiência consistente para todos os utilizadores.
Otimização para SEO: Melhoria da indexação nos motores de pesquisa.
UX Writing: Produção de conteúdos claros e concisos. 
Figma
Notion
HTML5
CSS3
JavaScript
PHP
Visual Studio Code
O processo foi dividido em cinco fases: Descoberta, Estratégia, Design, Teste e Desenvolvimento.
O meu website pessoal funcionava como um cartão de visita pouco eficaz. Poucas visitas, baixa conversão e um design ultrapassado. Era hora de transformá-lo numa plataforma dinâmica e atrativa para captar oportunidades de trabalho. Mas como?
Para entender melhor os pontos fracos do website, realizei uma análise detalhada, identificando boas práticas e oportunidades de melhoria. O website antigo tinha pouco conteúdo, problemas de responsividade e um design pouco apelativo, prejudicando a experiência do utilizador e a conversão.
Tendo em conta esta análise, identifiquei dois perfis principais de público-alvo:
Recrutadores de IT que procuram profissionais qualificados nas áreas de UX/UI Design e/ou Frontend Web Development.
Potenciais clientes que necessitam de um freelancer para desenvolver os seus projetos. Com base no público-alvo, realizei quatro entrevistas com utilizadores que possuíam essas características: dois recrutadores e dois possíveis clientes. Obtive os seguintes insights:
No processo de recrutamento estou interessada no percurso escolar e profissional e nas competências técnicas e comportamentais. (...) Mas às vezes não consigo encontrar o candidato ideal. Profissional de Recursos Humanos
Estou com dificuldade em achar um freelancer com alguma experiência e um bom portfolio para desenvolver o website para a minha empresa. Empreendedor
Os recrutadores queriam encontrar rapidamente as competências e projetos, enquanto os empreendedores buscavam um portfolio claro e direto. O site antigo não atendia nenhum dos dois perfis. Isso orientou toda a minha estratégia.
Na fase de estratégia, criei duas personas representativas do público-alvo com base nas entrevistas: uma com um perfil de recrutador de IT e outro com um perfil de empreendedor.
Perfil: Recrutador de IT
Perfil: Empreendedor
De seguida, realizei um benchmarking para entender como eram os websites da concorrência. Nesta etapa, analisei websites de agências de marketing, profissionais autónomos e páginas de portfólio de UX/UI Designers e/ou Frontend Web Developers.
Depois, criei o site map, delineando a estrutura e as principais páginas.
Site map
Na fase de design comecei por criar os wireframes em baixa fidelidade para testar as ideias iniciais e a estrutura de navegação, seguidos pelos wireframes em média fidelidade.
Exemplos de ecrãs em média fidelidade
Através dos wireframes em média fidelidade realizei testes de usabilidade com quatro utilizadores para validar a navegação e as funcionalidades principais. Obtive o seguinte feedback:
3/4 dos utilizadores não perceberam a intenção do botão 'Saber Mais' no separador Sobre da Homepage.
2/4 preferiam ver todos os projetos do portfolio na Homepage em vez de numa página própria com acesso através de um botão no separador Portfolio da Homepage.
2/4 consideraram a página individual de cada projeto demasiado simples e pouco apelativa.
3/4 acharam que existiam demasiadas formas geométricas no website que não acrescentavam nada ao conteúdo. Os insights recolhidos foram fundamentais para refinar os wireframes e validar melhorias através de novos testes de usabilidade. Após os ajustes, criei um UI Kit e os wireframes em alta fidelidade.
No UI Kit tive algum cuidado na escolha da tipografia, tamanhos de fonte, contraste de cores e iconografia, de modo a garantir que o produto fosse acessível a todos os utilizadores mas, ao mesmo tempo, visualmente apelativo.
Após criar os wireframes em alta fidelidade, desenvolvi um protótipo interativo e realizei novos testes de usabilidade com quatro utilizadores. Não foram necessários mais ajustes.
Com o protótipo em alta fidelidade validado, passei para a implementação do website. O design foi traduzido para código utilizando HTML, CSS, JavaScript e PHP, sem recorrer a CMS. Esta abordagem permitiu-me ter um controlo total sobre o design e o desempenho, garantindo uma personalização completa do website e a otimização de recursos.
A ausência de CMS resultou em maior flexibilidade, permitindo ajustes rápidos e uma experiência mais fluida e eficiente para os utilizadores. O código limpo e personalizado também facilitou a manutenção e a realização de futuras atualizações no website.
De seguida, realizei testes em múltiplos dispositivos e browsers para garantir compatibilidade, escrevi o conteúdo, otimizei para SEO e fiz o lançamento do produto.
O redesign resultou num website mais apelativo, dinâmico e bem estruturado, ajudando recrutadores de IT e potenciais clientes a encontrarem facilmente os meus serviços e projetos. Além disso, foi implementado um sistema bilíngue (PT e EN), garantindo que todos os conteúdos estivessem disponíveis em ambos os idiomas para alcançar um público mais amplo.
As páginas principais são:
Homepage: Visão geral com separadores para Serviços, Tecnologias, Portfólio e Contacto.
Página Sobre: Apresentação do percurso profissional.
Página de Projetos: Case studies detalhados de cada projeto. 
Wireframes em alta fidelidade da Homepage nas versões desktop e mobile
O redesign do website trouxe melhorias significativas na experiência do utilizador e na visibilidade online. Entre os principais resultados alcançados destacam-se:
O website atraiu 30% mais visitantes após o redesign, comprovando a eficácia das melhorias implementadas.
O alcance internacional aumentou significativamente, trazendo novos visitantes dos Estados Unidos e da Europa, ampliando oportunidades de networking e negócios.
Aumento no número de leads, tanto de recrutadores de IT quanto de potenciais clientes interessados nos serviços.
Recebi mais contactos diretos de recrutadores e empreendedores à procura de um freelancer para os seus projetos.
O website passou a ter um melhor posicionamento no Google, aparecendo em pesquisas relevantes para UX/UI Design e Frontend Web Development.
O redesign do meu website não foi apenas uma mudança estética, mas uma transformação estratégica. Aumento de tráfego, melhor posicionamento no Google e mais contactos diretos demonstram o impacto real das melhorias implementadas. Mais do que um portfólio, o website tornou-se um ativo essencial para impulsionar a minha carreira e conquistar novas oportunidades.
