Saltar para o conteúdo
DiogoTerra Nova

UX/UI Designer & Front-End Developer

Portal Interno de Colaboradores - PWA

  • Front-End Development
  • Umbraco CMS
  • ASP.NET Core
  • Razor Pages
  • PWA (Progressive Web App)

Fui o developer front-end responsável por um portal interno de colaboradores de uma empresa onde trabalhei, construído como uma Progressive Web App instalável. Foi pedido a criação de um único ponto de acesso que substituísse a confusão de emails, folhas de cálculo e drives partilhadas que a maioria das empresas usa para gerir a informação do dia a dia. Desenvolvi praticamente todo o front-end sozinho, trabalhando sobre Umbraco CMS, ASP.NET Core e Razor Pages, com um número reduzido de integrações de backend a cargo de outras equipas. Toda a plataforma é white-label, o que permite que cada empresa cliente aplique a sua própria identidade visual mantendo exatamente a mesma base de código modular.

Ecrã de iPhone com a página inicial do portal, com atalhos para Calendário, Contactos, Repositório e PerfilEcrã de MacBook com o módulo Mapa de Férias, com um calendário de equipa e filtros de colegas

O Problema

Antes do portal existir, os colaboradores não tinham um sítio central para encontrar a informação do dia a dia. Os contactos dos colegas ficavam perdidos em folhas de cálculo ou assinaturas de email, as férias eram pedidas e aprovadas manualmente, e os documentos das equipas viviam espalhados por drives sem qualquer organização. Até os links mais básicos, como o portal da seguradora, os modelos de despesas ou os recursos de marca, estavam dispersos. Na prática, fazer o onboarding de alguém ou procurar um simples contacto implicava perguntar a colegas ou vasculhar caixas de correio antigas.

O objetivo foi desenhar e construir uma aplicação única e otimizada para mobile que reunisse tudo isto num só lugar. Com a intenção de transformar este investimento num produto comercializável, a plataforma tinha de ser fácil de personalizar com a marca de cada empresa cliente, sem exigir o desenvolvimento de uma solução do zero para cada uma delas.

O Processo

1. A escolha da stack

Como developer front-end, e não especialista em back-end, precisava de resolver dois grandes desafios antes de começar a construir a aplicação: a autenticação e uma interface de administração para gerir conteúdos e permissões. Desenvolver qualquer uma destas partes do zero significaria criar um projeto de backend paralelo, algo inviável para assumir sozinho.

A escolha do Umbraco CMS resolveu ambos os problemas de uma assentada. O sistema de autenticação integrado evitou ter de construir o processo de login de raiz, enquanto o backoffice pronto a usar garantiu a gestão de conteúdos e permissões sem esforço adicional de desenvolvimento. Foi esta decisão técnica que tornou possível a um único developer front-end levar todo o projeto até ao fim.

2. Theming orientado à marca

Como a mesma base de código serve várias empresas clientes, desenvolvi uma camada de temas que permite a cada implementação refletir a sua própria identidade visual, desde o logótipo e cores até ao tom geral. Tudo isto acontece sem ser preciso duplicar ou separar o código, garantindo um front-end verdadeiramente white-label.

3. Acesso baseado em perfil

A equipa e o cargo de cada colaborador definem exatamente o que ele pode ver, desde os módulos visíveis até ao conteúdo aplicável e às permissões de gestão. Em vez de criar um layout único e estático para todos, implementei uma renderização condicional totalmente orientada pelo perfil de cada utilizador.

4. Distribuição como PWA

A aplicação corre a partir do browser mas instala-se como uma app nativa em Windows, macOS, Android e iOS.

A Solução

O resultado é um portal único e instalável, com os módulos que os colaboradores realmente utilizam no dia a dia. Como o acesso é parametrizado pela equipa e pelo cargo, a mesma aplicação apresenta um conjunto de conteúdos diferente e relevante para cada pessoa, tudo isto sem ser necessário manter compilações separadas por cliente ou por departamento.

Calendário e Mapa de Férias

Marcar e consultar férias, e ver os dias de descanso agendados pelos colegas de equipa, por equipa ou por colaborador individual. Eventos corporativos agendados e planos de formação interna, em vista de lista e de calendário.

Versão Mobile e Desktop do Calendário e Mapa de Férias

Contactos

Um diretório pesquisável com os contactos corporativos de cada colaborador (telefone, email, Teams e outros canais), filtrável por departamento.

Versão Mobile e Desktop do Módulo Contactos com ligação directa ao email e telefone

Comunicação / Notícias

Atualizações internas direcionadas, alertas e comunicados de benefícios, segmentados por equipa, função ou para toda a empresa.

Versão Mobile e Desktop do Módulo Comunicação / Notícias

Recursos Gerais / Repositório

Modelos de documentos e relatórios, assinaturas de email e outros recursos partilhados, agregados por departamento. O utilizador pode criar uma lista pessoal de atalhos favoritos para ferramentas internas e externas relevantes para a sua função.

Versão Mobile e Desktop do Módulo Recursos Gerais / Repositório

Chatbot de FAQs

Um assistente conversacional que responde a dúvidas frequentes sobre políticas internas, como direito a férias, sem necessidade de abrir um pedido ou enviar email aos RH.

Versão Mobile do Módulo FAQ Chatbot
Tens dúvidas se sou a pessoa ideal? Pergunta ao meu AmigoGPT