Saltar para o conteúdo

Caso de estudo · UX/UI Design

Criação e gestão de eventos desportivos — Município de Penacova

Redesign completo da plataforma BTT Manager para o Município de Penacova — nova linguagem visual, experiência melhorada no back-office, front-office e aplicação mobile Android.

Cliente
Município de Penacova
Contexto
Académico — Universidade de Aveiro
Set. 2020 · 6 meses
Papel
UX Research · UX Design · Visual Design
Responsabilidades
  • Investigação com utilizadores
  • Análise de mercado
  • Prototipagem
  • Testes de usabilidade
  • Design visual
Plataforma BTT Manager — Município de Penacova. Front-office, back-office e aplicação mobile Android.

A plataforma BTT Manager precisava de uma nova vida

O Município de Penacova operava com uma plataforma de gestão de eventos desportivos com linguagem visual desactualizada e uma experiência de utilizador negativa, tanto no backoffice como no frontoffice. O desafio: redesenhar toda a plataforma mantendo a identidade municipal.

3
plataformas — Back-office, front-office e aplicação mobile Android
6
meses de duração total do projecto, do research à entrega
10
participantes na fase final de testes de usabilidade
🏔️
Linguagem visual desactualizada

A plataforma existente não reflectia a identidade activa e moderna esperada por desportistas e organizadores de eventos.

📋
Experiência fragmentada

Back-office e front-office tinham inconsistências visuais e de interacção que dificultavam a gestão de eventos.

📱
Ausência de solução mobile

Não existia aplicação mobile, limitando o acesso em mobilidade durante os próprios eventos.

🔗
Identidade municipal por afirmar

A plataforma não comunicava a identidade visual do Município de Penacova de forma coerente.


Design Thinking aplicado ao desporto municipal

Seguiu-se uma metodologia de Design Thinking com três fases iterativas — Empatia, Definição e Prototipagem — complementada por três rondas de testes de usabilidade com participantes reais.

01 · Empatizar

Focus Groups

Focus Groups com 6 participantes experientes em organização e participação em eventos desportivos. Idades: 18+. Técnica: registo qualitativo por observação e notas de campo.

02 · Definir & Idealizar

Análise de Mercado

Análise de mercado comparativa (BTT Manager, Ativo, We Run, Meo Blueticket). Identificação de pontos de falha e oportunidades de diferenciação por heurísticas de Nielsen.

03 · Prototipar & Testar

Iteração Contínua

3 rondas iterativas de testes (5, 7, 10 participantes). Protótipos lo-fi → hi-fi com iteração contínua entre cada ronda.


Ouvir antes de desenhar

A fase de investigação combinou focus groups qualitativos com uma análise comparativa de mercado — dois métodos complementares que permitiram triangular dados e fundamentar cada decisão de design com evidências concretas, evitando assunções sobre o comportamento dos utilizadores.

Método qualitativo

Focus Group
com utilizadores reais

6 Participantes seleccionados por experiência em eventos desportivos
18+ Faixa etária — organizadores e participantes
2h Sessão presencial com registo por observação e notas de campo

Principais problemas identificados

Processo de inscrição fragmentado

Formulários longos e confusos levavam ao abandono antes de completar o registo no evento.

Gestão de eventos opaca para organizadores

Sem dashboard centralizado — os organizadores não conseguiam acompanhar inscrições, rotas e pagamentos num único ponto.

Identidade visual desligada do município

A plataforma BTT Manager existente não comunicava a identidade do Município de Penacova, gerando desconfiança nos utilizadores externos.

Análise Comparativa de Mercado — Funcionalidades

Funcionalidade BTT Manager
Ativo
We Run
Login de utilizador
Inscrição em eventos
Filtros de pesquisa
Criação de equipas
Classificações dos atletas
Lista de inscritos exportável
Localização do evento (mapa)
Newsletter / notificações

Análise directa das plataformas · BTT Manager · Ativo · We Run · Meo Blueticket

"As plataformas concorrentes partilham um problema comum — sobrecarregam o utilizador com informação e carecem de consistência visual. A oportunidade estava em criar uma experiência simples, coesa e com identidade própria ligada ao território de Penacova."

— Síntese da análise comparativa · Focus Group + Heurísticas de Nielsen

Participantes · Requisitos identificados

Organizadores · Requisitos identificados

01

Campos de inserção dinâmicos

Formulário que se adapta ao tipo de evento e modalidade

01

Métodos de pagamento múltiplos

PayPal, Referência Multibanco e MB Way integrados no fluxo

02

Histórico de eventos

Consultar eventos passados, resultados e inscrições anteriores

02

Dashboard de gestão de eventos

Visibilidade em tempo real de inscrições, pagamentos e estados

03

Múltiplas rotas por evento

Escolha de percurso (curto, médio, longo) no momento de inscrição

03

Exportação de lista de inscritos

Geração de PDF com dados completos dos participantes inscritos

04

Notificações e confirmações

Email automático de confirmação com detalhes do evento

04

Identidade visual municipal

Alinhamento com a marca do Município de Penacova em todos os pontos

05

Criação e gestão de equipas

Inscrição individual ou em grupo com partilha de link

05

FAQ e suporte integrado

Secção de perguntas frequentes para reduzir contactos de suporte

HMW 01Como podemos tornar o registo em eventos desportivos tão simples que qualquer pessoa o conclua em menos de 3 minutos?
HMW 02Como podemos dar aos organizadores visibilidade total sobre os seus eventos sem sobrecarregar a interface?
HMW 03Como podemos unificar a experiência visual entre web e mobile mantendo a identidade do Município de Penacova?
HMW 04Como podemos integrar múltiplos métodos de pagamento sem fragmentar o fluxo de registo?

Dois perfis — uma plataforma

A investigação qualitativa com participantes reais resultou em quatro personas. Apresentam-se as duas mais determinantes para as decisões de design.

AS
André Silva
Participante entusiasta · 28 anos · Viseu

Profissão

  • Analista de Marketing

Motivações

  • Encontrar eventos desportivos variados
  • Ligar-se a outros entusiastas
  • Estimular espírito competitivo

Desafios

  • Descobrir eventos menos conhecidos
  • Equilibrar participação com vida profissional

Valor da plataforma

  • Variedade de eventos
  • Pesquisa e inscrição simples
  • Participação em equipa
BTT Competição Mobilidade
JS
Joana Santos
Participante e organizadora · 35 anos · Coimbra

Profissão

  • Professora de Educação Física

Motivações

  • Participar em BTT, futsal e caminhadas
  • Ligar-se à comunidade local
  • Promover estilo de vida activo

Desafios

  • Processos de registo complexos
  • Descobrir eventos na região

Valor da plataforma

  • Inclusividade
  • Registo simples
  • Comunicação eficaz
Comunidade Inclusão Organização

Três plataformas — uma lógica de navegação

Foram desenhadas arquitecturas de informação distintas para cada plataforma, garantindo consistência de experiência e alinhamento com os perfis de utilizador identificados.

Front-office (Web)

Percurso do Participante

Homepage com pesquisa de eventos → Página de evento → Registo/Inscrição → Confirmação e pagamento → Área do utilizador (histórico, equipas, perfil)

Back-office (Web)

Percurso do Organizador

Dashboard geral → Criação de eventos (campos dinâmicos, rotas múltiplas) → Gestão de inscrições → Exportação PDF → Relatórios e estatísticas

Mobile (Android)

Percurso em Mobilidade

Ecrã principal com eventos em destaque → Pesquisa e filtros → Detalhe de evento → Inscrição rápida → Classificações e equipas

Diagramas · Arquitectura de Informação

IA.01 Arquitectura de informação — back-office
Back-office Web Estrutura de navegação do painel de gestão de eventos
IA.02 Arquitectura de informação — front-office
Front-office Web Estrutura de navegação da plataforma pública
IA.03 Arquitectura de informação — mobile Android
Mobile Android Estrutura de navegação da aplicação móvel

Fluxo de Utilizador · Front-office (Web)

Percurso principal do participante — da descoberta à confirmação de inscrição

Clica em Inscrever Não Sim Não Sim Não Sim Tentar novamente INÍCIO Aceder à plataforma Pesquisar eventos Selecionar evento Tem conta? Criar conta Iniciar sessão Preencher formulário de inscrição Inscrição em equipa? Adicionar membros de equipa Escolher método de pagamento Pagamento aprovado? Erro de pagamento Inscrição confirmada Área do utilizador FIM
Etapa de processo
Ponto de decisão
Início / Fim
Caminho de erro

Sistema visual coerente e acessível

O design system foi construído sobre uma grelha de 8pt, tipografia escalável e uma paleta de cores com rácios de contraste WCAG AA em todos os elementos interactivos.

Escala Tipográfica

HEADING 1 · 52px Criação e gestão de eventos
HEADING 2 · 36px Regista o teu evento
HEADING 3 · 28px Eventos em destaque
BODY · 18px Encontra e inscreve-te em eventos
SMALL · 15px Informação de apoio

Paleta de Cores

Primário #065C3C
Acção #00A97E
Background #1A1A24
Texto #F0EFF8
Secundário #9897AB

Do esboço ao protótipo funcional

O processo de prototipagem seguiu três fases progressivas, com feedback real de utilizadores a informar cada iteração. Os protótipos low-fidelity permitiram validar a arquitectura antes do investimento visual.

Lo-Fi · Fase 1

Wireframes em papel e digital para validar estrutura de navegação e hierarquia de informação. Dashboard do back-office, campos de registo de eventos e ecrã inicial mobile.

✅ Resultado

Estrutura aprovada, nomenclatura de campos a clarificar. Identificadas oportunidades de simplificação no fluxo de criação de eventos.

Hi-Fi · Fase 2

Protótipos de alta fidelidade com design system aplicado. Front-office e back-office com paleta completa, tipografia e componentes interactivos. 7 participantes em testes de validação.

✅ Resultado

Fluxos de registo validados, elementos visuais aprovados. Ajustes menores na hierarquia de informação da página de evento.

Iteração Final · Fase 3

Refinamento baseado em testes com 10 participantes. Ajustes na localização da opção de registo (menos visível nos testes anteriores) e adição de mais detalhe nas páginas de evento.

✅ Resultado

Usabilidade média de 4.4/5 para registo de eventos. Plataforma entregue com três interfaces coesas e validadas por utilizadores reais.

Wireframes Lo-Fi

WF.01 Wireframe — front-office, página inicial
Wireframe 01 Front-office · Página inicial e listagem de eventos BTT
WF.02 Wireframe — front-office, detalhe de evento e registo
Wireframe 02 Front-office · Detalhe de evento e fluxo de registo
WF.03 Wireframe — back-office, dashboard de gestão
Wireframe 03 Back-office · Dashboard de gestão e criação de eventos
WF.04 Wireframe — aplicação mobile Android
Wireframe 04 Mobile Android · Ecrã inicial e listagem de resultados

Wireframes Hi-Fi · Back-office Web

WF.05 Wireframe hi-fi — back-office, listagem de eventos
Wireframe Hi-Fi 05 Back-office · Listagem e filtros de eventos
WF.06 Wireframe hi-fi — back-office, criação de evento
Wireframe Hi-Fi 06 Back-office · Formulário de criação de evento
WF.07 Wireframe hi-fi — back-office, gestão de inscrições
Wireframe Hi-Fi 07 Back-office · Gestão de inscrições por evento
WF.08 Wireframe hi-fi — back-office, dashboard de gestão
Wireframe Hi-Fi 08 Back-office · Dashboard e monitorização
WF.09 Wireframe hi-fi — back-office, classificações
Wireframe Hi-Fi 09 Back-office · Classificações e resultados
WF.10 Wireframe hi-fi — back-office, perfil e definições
Wireframe Hi-Fi 10 Back-office · Perfil e definições de conta

O resultado entregue

A plataforma final compreende três interfaces coesas — front-office web, back-office web e aplicação mobile Android — com linguagem visual consistente e alinhada com a identidade do Município de Penacova.

Front-office Web

● Modo Escuro ○ Modo Claro
FO.01 Front-office modo escuro — página inicial
Homepage · Escuro Página inicial · Listagem e filtros de eventos BTT
FO.02 Front-office modo claro — página inicial
Homepage · Claro Página inicial · Variação light com mesma estrutura
FO.03 Front-office modo escuro — listagem de eventos
Eventos · Escuro Listagem de eventos · Filtros e pesquisa avançada
FO.04 Front-office modo claro — listagem de eventos
Eventos · Claro Listagem de eventos · Variação light
FO.05 Front-office modo escuro — detalhe de evento
Detalhe Evento · Escuro Detalhe de evento · Percurso, dificuldade e inscrição
FO.06 Front-office modo claro — detalhe de evento
Detalhe Evento · Claro Detalhe de evento · Variação light
FO.07 Front-office modo escuro — formulário de inscrição
Inscrição · Escuro Formulário de inscrição · Pagamento e confirmação
FO.08 Front-office modo claro — formulário de inscrição
Inscrição · Claro Formulário de inscrição · Variação light

Back-office Web

● Modo Escuro ○ Modo Claro
BO.01 Back-office modo escuro — listagem de eventos
Eventos · Escuro Listagem e gestão de eventos activos
BO.02 Back-office modo claro — listagem de eventos
Eventos · Claro Listagem e gestão de eventos · Variação light
BO.03 Back-office modo escuro — criação de evento
Criar Evento · Escuro Formulário de criação e publicação de eventos
BO.04 Back-office modo claro — criação de evento
Criar Evento · Claro Formulário de criação de eventos · Variação light
BO.05 Back-office modo escuro — gestão de inscrições
Inscrições · Escuro Gestão de inscrições e participantes por evento
BO.06 Back-office modo claro — gestão de inscrições
Inscrições · Claro Gestão de inscrições · Variação light
BO.07 Back-office modo escuro — classificações
Classificações · Escuro Resultados e rankings por prova
BO.08 Back-office modo claro — classificações
Classificações · Claro Resultados e rankings · Variação light

Aplicação Mobile Android

● Modo Escuro ○ Modo Claro
MOB.01 Mobile modo escuro — página inicial
Início · Escuro Ecrã inicial com eventos próximos
MOB.02 Mobile modo claro — página inicial
Início · Claro Ecrã inicial · Variação light
MOB.03 Mobile modo escuro — explorar eventos
Explorar · Escuro Explorar eventos próximos e pesquisa
MOB.04 Mobile modo claro — explorar eventos
Explorar · Claro Explorar eventos · Variação light
MOB.05 Mobile modo escuro — detalhe de evento
Evento · Escuro Detalhe do evento e botão de inscrição
MOB.06 Mobile modo claro — detalhe de evento
Evento · Claro Detalhe do evento · Variação light
MOB.07 Mobile modo escuro — métodos de pagamento
Pagamento · Escuro Seleção de método de pagamento na inscrição
MOB.08 Mobile modo claro — métodos de pagamento
Pagamento · Claro Métodos de pagamento · Variação light
Front-office Web
4.4/5
Facilidade de registo em eventos
Back-office Web
4.0/5
Facilidade de adicionar eventos
Aplicação Mobile
4.3/5
Facilidade de ver classificações

Testar cedo, iterar rápido

Três rondas de testes com 5, 7 e 10 participantes (18+) — 6 mulheres, 4 homens na fase final. Metodologia de amostragem por conveniência com think-aloud protocol.

❌ Problema identificado

Opção de registo difícil de localizar na página de evento. Utilizadores perdiam tempo a procurar o botão de inscrição, reduzindo a taxa de conversão.

✅ Solução implementada

Reposicionamento do CTA de registo para uma localização mais proeminente na página de evento, com contraste visual reforçado e etiqueta textual mais directa.

❌ Problema identificado

Páginas de evento com pouca informação de detalhe. Participantes sentiam falta de dados sobre percurso, dificuldade e material necessário antes de se inscreverem.

✅ Solução implementada

Adição de secção de detalhes expandida: percurso, altitude, dificuldade, material recomendado e perfil de participantes. Informação organizada por prioridade de leitura.

❌ Problema identificado

Inconsistência entre back-office e front-office criava confusão nos organizadores ao alternar entre plataformas durante a gestão de um evento.

✅ Solução implementada

Aplicação do design system unificado em ambas as plataformas, garantindo consistência terminológica e visual. Componentes partilhados e linguagem de interacção coerente.


Design que serve comunidades activas

O redesign da plataforma de eventos do Município de Penacova demonstrou como o design centrado no utilizador pode transformar ferramentas municipais em experiências digitais modernas e inclusivas.

A plataforma final unifica três interfaces — front-office, back-office e mobile — numa experiência coesa e alinhada com a identidade visual municipal. A abordagem iterativa, com três rondas de testes e refinamento contínuo, permitiu resolver bloqueios críticos antes da entrega final.

O projecto confirmou que mesmo plataformas de nicho — como gestão de eventos desportivos municipais — beneficiam enormemente de um processo de design rigoroso, com investigação qualitativa real e validação contínua com utilizadores representativos.

01

A identidade local é um activo de design

Incorporar a identidade do Município — verde, dinamismo, natureza — não foi apenas estética. Reforçou a credibilidade da plataforma junto dos utilizadores locais e dos organizadores municipais.

02

Três plataformas exigem um design system robusto

Tentar manter coerência entre front-office, back-office e mobile sem um sistema de design unificado seria impossível. O investimento inicial no sistema devolveu ganhos em consistência e velocidade de prototipagem.

03

Os utilizadores revelam o que os dados não mostram

Os focus groups iniciais identificaram requisitos que nenhuma análise de benchmarking teria encontrado — como a necessidade de exportação de inscrições em PDF, um detalhe operacional crítico para os organizadores.

Próximo caso de estudo
Plataforma de registo de quartos e estudantes — Rede 1/4
Ver todos os projetos →