Saltar para o conteúdo

Caso de estudo · UX/UI Design · Investigação

Finger tracking para seleção de vinhos em contexto de loja — PLM Plural

Aplicação gamificada com finger-tracking para promoção interactiva da marca Laverca em ambiente de retalho físico, em parceria com a PLM Plural.

Cliente
PLM Plural
Contexto
Out. 2022 · 10 meses
Papel
UX/UI Design · Multimedia · Investigação
Responsabilidades
  • UX Research
  • Análise de mercado
  • Prototipagem
  • Testes de usabilidade
  • Design visual · Storyboard
  • Modelação 3D · Animação
Interface da aplicação Laverca — finger tracking para seleção de vinhos em ecrã Mupi

Diferenciar marcas de vinho no ponto de venda físico

A PLM Plural — especialista em soluções de retalho inovadoras — pretendia diferenciar marcas de produto em ambientes físicos através de experiências de marca enriquecidas. A solução: um ecrã Mupi de 32 polegadas com tecnologia de finger-tracking sem contacto para uma experiência gamificada de selecção de vinhos.

10 meses
Duração total do projecto, da investigação à entrega
20
Participantes na fase final de testes de usabilidade
🍷
Mercado de vinho saturado

Os vinhos Laverca competem num mercado com elevada densidade de marcas. A diferenciação em ponto de venda é determinante para a decisão de compra.

🎮
Gamificação como estratégia

Uma estratégia gamificada — com pontos de experiência, desafios e recompensas — transforma uma escolha passiva num momento de envolvimento activo com a marca.

👆
Interacção sem contacto

A tecnologia de finger-tracking elimina a necessidade de tocar no ecrã, criando uma experiência inovadora e diferenciadora no contexto físico de loja.

📊
Dados de comportamento

A plataforma permite recolher dados sobre interacções dos utilizadores, medindo o impacto da estratégia nas decisões de compra.


Investigação, gamificação e design em contexto físico

O projecto seguiu uma metodologia estruturada combinando análise de mercado comparativa, desenvolvimento de estratégia de gamificação e três fases iterativas de testes de usabilidade.

01 · Análise de Mercado

Análise de Mercado

Análise comparativa de Vivino, Vinify e Delectable usando escala Likert de 5 pontos. Avaliação: experiência de utilizador (Honeycomb), usabilidade (10 heurísticas de Nielsen) e aspectos de design visual.

02 · Estratégia de Gamificação

Estratégia de Gamificação

Definição da mecânica (pontos de experiência por tarefas), dinâmica (desafios e competição saudável) e estética (experiência emocionalmente envolvente). Criação da marca fictícia Laverca wines.

03 · Prototipagem & Testes

Prototipagem & Testes

3 fases de testes: qualitativas (5+5 participantes, think-aloud) e quantitativa (20 participantes, grelha de observação + questionário). Iteração entre cada ronda.


O que as apps de vinho não fazem bem

A análise comparativa de Vivino, Vinify e Delectable usando a escala de Likert revelou lacunas críticas que a aplicação Laverca poderia explorar, especialmente em acessibilidade e envolvimento com a marca.

Critério Vivino
Vinify
Delectable
User Experience — Honeycomb
Útil
5
5
4
Utilizável
5
5
5
Localizável
4
3
5
Credível
4
4
3
Acessível
2
3
3
Valioso
5
5
4
Usabilidade — 10 Heurísticas de Nielsen
Visibilidade do status do sistema
3
3
5
Correspondência sistema/mundo real
3
3
3
Controlo e liberdade do utilizador
5
5
4
Consistência e padrões
5
4
4
Prevenção de erros
5
5
3
Reconhecimento em vez de lembrança
4
5
3
Flexibilidade e eficiência de uso
3
5
3
Reconhecimento e recuperação de erros
4
5
4
Ajuda e documentação
5
4
4
Design Visual
Apenas informação relevante
4
3
4
Atratividade da interface
5
5
3
Hierarquia gráfica
4
3
4
Legibilidade do texto
5
5
5
Total (máx. 100)
80
80%
80
80%
73
73%

Escala Likert 1–5 · 1 Fraco → 5 Excelente · Avaliação directa das aplicações

HMW 01Como podemos transformar a escolha de vinho de uma decisão passiva num momento de descoberta activa e envolvimento com a marca?
HMW 02Como podemos desenhar uma experiência de finger-tracking que seja intuitiva para utilizadores sem experiência prévia com esta tecnologia?
HMW 03Como podemos estruturar a progressão de desafios de forma a motivar os utilizadores a explorar todo o catálogo Laverca?
HMW 04Como podemos comunicar as recompensas disponíveis de forma a aumentar a motivação antes de iniciar a interacção?

"A acessibilidade obteve as pontuações mais baixas (2-3/5) nas apps analisadas, enquanto a legibilidade do texto atingiu 5/5 em todos os concorrentes. A oportunidade está na acessibilidade e no envolvimento."

— Análise comparativa Vivino · Vinify · Delectable · Escala Likert 5 pontos

Mecânicas, Dinâmicas e Estética

A estratégia de gamificação foca-se em envolver os utilizadores no seu percurso dentro da plataforma, definindo objectivos específicos que proporcionam uma experiência interactiva com a marca fictícia Laverca. Ao longo do percurso, os utilizadores são motivados a cumprir tarefas, recebendo feedback imediato relacionado com recompensas que os incentivam a continuar.

MDA — Mecânicas: Desafios e missões

Mecânicas

Desafios & Missões

Pontos de experiência obtidos ao completar tarefas. O utilizador progride através de missões que exploram o catálogo de vinhos Laverca.

MDA — Dinâmicas: Níveis de progressão

Dinâmicas

Níveis de Progressão

Seis níveis de progressão com desafios crescentes, promovendo a exploração e competição saudável entre utilizadores.

MDA — Estética: experiência visual e emocional

Estética

Experiência Visual

Design imersivo que visa criar uma experiência emocionalmente envolvente, considerando emoções e reacções dos utilizadores.

Diagrama de fluxo — percurso do utilizador na aplicação Laverca com finger tracking

Laverca — vinho como experiência

A marca fictícia Laverca wines serviu como veículo para explorar o potencial da gamificação no sector vinícola. A estratégia foi estruturada nos três pilares clássicos da gamificação: Mecânicas, Dinâmicas e Estética.

Pilar 01

Mecânicas

Pontos de experiência (XP) atribuídos por conclusão de tarefas e desafios. Sistema de níveis de progressão. Missões com objectivos claros e recompensas associadas.

Pilar 02

Dinâmicas

Interacção guiada por desafios que promovem a exploração do catálogo Laverca. Competição saudável através de rankings. Progressão de dificuldade para manter o engagement.

Pilar 03

Estética

Experiência emocionalmente envolvente com design premium alinhado com o posicionamento da marca Laverca. Paleta teal/roxo para diferenciação no ponto de venda.

Fluxo da aplicação

Etapa 01Apresentação do tema da aplicação e da marca Laverca
Etapa 02Demonstração do tipo de interacção e capacidade de filtragem de vinhos
Etapa 03Formato de apresentação da descrição dos vinhos
Etapa 04Apresentação dos objectivos e desafios
Etapa 05Destaque das possibilidades de recompensa
Etapa 06Associação da recompensa à marca Laverca

Identidade visual premium e imersiva

O design system foi desenvolvido especificamente para um ecrã Mupi de 32 polegadas com resolução fixa, priorizando legibilidade à distância, contraste elevado e uma paleta que comunica sofisticação.

Escala Tipográfica — Laverca

HEADING 1 · 72px SemiBold Selecciona o teu vinho
HEADING 2 · 40px SemiBold Colecção Laverca
HEADING 3 · 32px SemiBold Vinho do Alentejo
BODY · 24px Light Notas de prova e maridagem
SMALL · 22px Regular Informação de suporte

Paleta de Cores — Laverca

Teal primário #25AEA9
Roxo acção #4E30BF
Cinza #A7A7A7
Branco #FFFFFF
Background #121212

Sistema de Grelha

Soft Grid 8pt

Todos os espaçamentos seguem múltiplos de 8px, criando consistência visual e ritmo ao longo de toda a interface. A soft grid adapta-se ao ecrã Mupi 32" sem criar constrangimentos rígidos no posicionamento dos elementos.

Escala de Espaçamentos

8px — espaçamento mínimo · ícones e labels
16px — espaçamento base · componentes
24px — separação de grupos
32px — secções principais
48px — margens e padding de ecrã
64px — separação de blocos de conteúdo
Sistema de grelha do design system Laverca — soft grid baseada em 8pt

Cinema 4D, After Effects e narrativa visual

O conteúdo multimédia foi dividido em duas áreas principais: um vídeo introdutório para aquisição de novos utilizadores e conteúdo in-app com vídeos e elementos animados que enriquecem a experiência de interacção.

Ferramentas utilizadas

🎬
Cinema 4D

Modelação 3D de garrafas Laverca e elementos de marca para vídeos e animações in-app

🎨
Adobe After Effects

Animação dos elementos 3D, motion graphics e composição final dos vídeos

🎞️
Adobe Premiere

Edição e pós-produção dos vídeos promocionais e de onboarding

✏️
Storyboard (6 cenas)

Pré-visualização narrativa do fluxo completo antes da produção

Storyboard — 6 cenas

Storyboard cena 01 — Apresentação do tema da aplicação
Cena 01 · Tema
Storyboard cena 02 — Tipo de interacção e filtragem
Cena 02 · Interacção
Storyboard cena 03 — Descrição de vinhos
Cena 03 · Vinhos
Storyboard cena 04 — Apresentação dos objectivos
Cena 04 · Objectivos
Storyboard cena 05 — Possibilidades de recompensa
Cena 05 · Recompensa
Storyboard cena 06 — Associação à marca Laverca
Cena 06 · Marca

Protótipos de Alta Fidelidade — Demonstração

Aplicação com utilização de finger-tracking — protótipo interactivo Mupi
Aplicação na íntegra — fluxo completo da experiência Laverca

Vídeos Animados — Cinema 4D & After Effects

Animação principal — composição 3D com elementos Laverca
Rolha em movimento — animação 3D After Effects
Garrafas Laverca — modelação e animação Cinema 4D
Versão alternativa — motion graphics e transições
Animação de carregamento — loading screen in-app

Interface adaptada ao ecrã Mupi de 32"

O design foi concebido especificamente para um formato vertical de grande dimensão, com interacção sem contacto. Cada ecrã foi optimizado para leitura à distância e interacção por finger-tracking.

EC.01 Ecrã Mupi — ecrã inicial da aplicação Laverca, boas-vindas e introdução
Ecrã 01 Boas-vindas · Introdução à experiência Laverca no Mupi
EC.02 Ecrã Mupi — filtragem e selecção de vinhos por categoria
Ecrã 02 Selecção · Filtragem de vinhos por categoria e tipo
EC.03 Ecrã Mupi — detalhe e descrição de vinho
Ecrã 03 Detalhe de vinho · Notas de prova, região e harmonização
EC.04 Ecrã Mupi — sistema de pontos e recompensas
Ecrã 04 Gamificação · Sistema de níveis e recompensas Laverca
EC.05 Ecrã Mupi — perfil e progressão do utilizador
Ecrã 05 Perfil · Progressão, conquistas e estatísticas pessoais
EC.06 Ecrã Mupi — ecrã de conclusão e chamada para acção
Ecrã 06 Conclusão · CTA de registo e associação à marca Laverca
32"
Tamanho do ecrã Mupi em ambiente de loja
Vertical
Orientação do layout para maximizar presença visual
6 níveis
Sistema de progressão da experiência gamificada
3D + 2D
Mix de elementos 3D (Cinema 4D) e 2D (Illustrator)

75/100 — usabilidade boa, com margem de evolução

Foi elaborado um guião utilizado nos três testes iterativos, aplicando a técnica de thinking-aloud em todos. O processo iniciou com dois testes qualitativos (5+5 participantes) com notas de campo, seguido de um terceiro teste com 20 participantes, com gravação de vídeo e áudio, grelha de observação e questionário pós-teste.

75/100
Classificação global de usabilidade — 'Boa'
20
Participantes na fase quantitativa final
3
Fases de testes iterativos
18/20
Nota final do projecto
Grelha de observação dos testes de usabilidade — resultados e métricas por tarefa

Análise de Resultados

Os participantes avaliaram positivamente a experiência — utilidade, aspectos lúdicos e design atrativo foram os pontos mais destacados. A usabilidade foi classificada como "boa" (75/100). Foram identificadas limitações na tecnologia finger tracking e em certas funcionalidades de interface.

Conclusões & Próximos Passos

Conhecer antecipadamente as recompensas aumentaria a motivação dos utilizadores. Sugeridos ajustes no suporte físico do equipamento para melhorar a acessibilidade.

❌ Problema identificado

Dificuldade de interacção com finger-tracking — tecnologia identificada como barreira por vários participantes, que a descreveram como tecnologia a substituir em contexto de uso real.

✅ Solução documentada

Identificada como limitação da tecnologia actual. Recomendação documentada: avaliação de alternativas mais acessíveis (gesture tracking, eye-tracking) em versão futura da aplicação.

❌ Problema identificado

Utilizadores recomendaram conhecer as recompensas antecipadamente — a falta desta informação no início reduzia a motivação para completar os desafios.

✅ Solução implementada

Adição de ecrã de onboarding com prévia das recompensas disponíveis antes do início dos desafios. Aumento esperado da motivação inicial e do engagement com o sistema de progressão.

❌ Problema identificado

Acessibilidade de algumas funcionalidades abaixo do esperado — alvos de interacção de finger-tracking insuficientemente dimensionados para utilização confortável.

✅ Solução implementada

Revisão dos alvos de interacção de finger-tracking — tamanho e espaçamento aumentados. Contraste de elementos interactivos reforçado para leitura à distância em ambiente de loja.


Gamificação — tecnologia a evoluir

O projecto validou que estratégias de gamificação podem efectivamente aumentar o envolvimento com marcas em ambiente de retalho físico. A limitação crítica foi a tecnologia de finger-tracking — inovadora, mas com barreiras de interacção que versões futuras devem resolver.

A experiência Laverca demonstrou que a gamificação é uma estratégia viável para diferenciação no ponto de venda — os utilizadores valorizaram os aspectos lúdicos e o design atractivo. A classificação de 75/100 em usabilidade e a nota final de 18/20 validam a abordagem conceptual.

O contributo mais relevante deste projecto foi documentar empiricamente as limitações do finger-tracking em contexto de retalho — e recomendar alternativas mais acessíveis para iterações futuras. Investigação disponível em: ria.ua.pt/handle/10773/39802

01

A tecnologia deve servir a experiência, não o contrário

O finger-tracking era inovador e diferenciador — mas criou barreiras de interacção que comprometeram a fluidez da experiência. A selecção de tecnologia deve ser validada com utilizadores reais antes do investimento em design.

02

Comunicar as recompensas antes do início é crítico

Os utilizadores que não sabiam o que podiam ganhar tinham menos motivação para completar os desafios. A antecipação da recompensa — um princípio básico de gamificação — tinha impacto directo no engagement.

03

Conteúdo 3D eleva a percepção de qualidade

A modelação em Cinema 4D das garrafas Laverca criou um nível de detalhe visual que validou o posicionamento premium da marca. O investimento em produção 3D foi determinante para a credibilidade da experiência.

Portefólio de Pedro Lourenço
Ver todos os projectos
Ver todos os projetos →