CASE STUDY

Como um Redesign da Landing Page do Steam Deck poderia reduzir o bounce rate em até 50% e gerar mais leads

How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights

CASE STUDY

Como um Redesign da Landing Page do Steam Deck poderia reduzir o bounce rate em até 50% e gerar mais leads

CASE STUDY

Como um Redesign da Landing Page do Steam Deck poderia reduzir o bounce rate em até 50% e gerar
mais leads

How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights. How Delivery Hero streamlines marketing reporting across all their brands with Clarisights

Copy component

Copied

luxgoliveira@gmail.com

Objetivo

Desenvolver uma experiência web de página única (focada em desktop, não responsiva) para centralizar dados essenciais pré-compra do Steam Deck

Desafios Iniciais

O Steam Deck estava em pré-lançamento durante a fase de desenvolvimento do projeto, com acesso limitado a dados de usuários ou análises da página.

Challenges

The Steam Deck was in pre-launch during the project’s development phase, with limited access to user data or page analytics.
How could I analyze user behavior or the landing page’s effectiveness without reliable metrics?

Pesquisa

O que estava acontecendo na landing page do Steam Deck?

Com lacunas de dados do pré-lançamento, recorri às comunidades do Reddit e do Facebook para dissecar as frustrações dos usuários.

A netnografia revelou os seguintes pain points:

Com lacunas de dados do pré-lançamento, recorri às comunidades do Reddit e do Facebook para dissecar as frustrações dos usuários.

A netnografia revelou os seguintes pain points:

Inconsistência na disponibilidade regional

CTAs “Compre agora” apareceram em países onde o produto não está disponível (como o Brasil), confundindo possíveis clientes e diminuindo a confiança.

Incerteza sobre a compatibilidade de jogos e a biblioteca

Possíveis clientes têm dúvidas sobre a compatibilidade do Steam Deck com as bibliotecas Steam, com jogos que já possuem.

Página atual* do Steam Deck

Página atual* do Steam Deck

*Prints tirados em 2022, antes do lançamento do produto

*Prints tirados em 2022, antes do lançamento do produto

Analisando dados públicos e conhecendo os usuários

Para complementar os insights da comunidade, utilizei ferramentas públicas como o SimilarWeb (para tendências de tráfego) e realizei uma survey com os membros do maior grupo no Facebook.

Os dados combinados evidenciaram:

52%+ Bounce rate

Alto indíce de bounce rate, apesar dos CTAs visíveis, sugerindo que o conteúdo não estava alinhado com a intenção do usuário.

Fidelidade à marca

75% dos compradores potenciais já possuíam hardware anterior da Steam/Valve — evidenciando um público fiel que esperava uma integração perfeita, e não um marketing redundante.

Compatibilidade da biblioteca Steam

89% dos usuários priorizavam saber quais jogos de suas bibliotecas Steam existentes funcionavam no Deck — porém, os detalhes de compatibilidade estavam escondidos, alimentando dúvidas e aumentando as taxas de rejeição.

Comportamento antes de comprar

1 em cada 2 usuários priorizava avaliações e imagens do produto, enquanto 16% enfatizava o atendimento ao cliente — ressaltando a necessidade de transparência.

Desafios enfrentados ao longo do projeto

A imersão excessiva em tópicos do Reddit/Facebook atrasou o progresso e acabou atrasando a descoberta do problema central: as altas taxas de rejeição.

A documentação do projeto agiu como um salva-vidas, permitindo um reinício eficiente após essa pausa.

Challenges

The Steam Deck was in pre-launch during the project’s development phase, with limited access to user data or page analytics.
How could I analyze user behavior or the landing page’s effectiveness without reliable metrics?

Ideação

Wireframing possíveis soluções

Realizei um processo de wireframing, analizando e evoluindo a estrutura original da página ao repriorizar seções com base nas percepções da netnografia e nos dados da pesquisa, garantindo que os pontos de dor dos usuários orientassem as decisões de layout, e não apenas as minhas suposições.

A imagem apresenta uma série de três esboços em wireframe mostrando diferentes conceitos de redesign para a interface do Steam Deck, com foco em elementos de design do produto para um estudo de caso.
A imagem apresenta uma série de três esboços em wireframe mostrando diferentes conceitos de redesign para a interface do Steam Deck, com foco em elementos de design do produto para um estudo de caso.

Solução

CTAs & Clareza regional

A página de destino redesenhada substitui os botões enganosos “Comprar agora” por CTAs “Adicionar à lista de desejos” em países não suportados (por exemplo, Brasil), destacando avisos de disponibilidade regional para incentivar a adição à lista de desejos.

The redesigned landing page replaces misleading “Buy Now” buttons with “Add to Wishlist” CTAs in unsupported countries (like Brazil), highlighting regional availability notices to incentivize wishlist engagement.

A imagem exibe um conceito de redesign da página principal do Steam Deck, destacando um dispositivo portátil para jogos de PC em um fundo roxo vibrante, com o produto em destaque no centro, acompanhado de texto detalhando disponibilidade e preços a partir de 399 USD.
A imagem exibe um conceito de redesign da página principal do Steam Deck, destacando um dispositivo portátil para jogos de PC em um fundo roxo vibrante, com o produto em destaque no centro, acompanhado de texto detalhando disponibilidade e preços a partir de 399 USD.
A imagem exibe um conceito de redesign da página principal do Steam Deck, destacando um dispositivo portátil para jogos de PC em um fundo roxo vibrante, com o produto em destaque no centro, acompanhado de texto detalhando disponibilidade e preços a partir de 399 USD.

Oferecendo aos usuários o que eles querem saber

Alinhado com os padrões do mercado e as demandas dos usuários, o redesign enfatiza a transparência na compatibilidade de jogos por meio de um carrossel selecionado de jogos AAA e de um botão proeminente “Check Your Library Compatibility”. Esse recurso analisa a biblioteca Steam existente do usuário, destacando os títulos jogáveis e sinalizando os jogos não suportados.

A imagem apresenta uma interface de usuário para verificar a compatibilidade de jogos no Steam Deck, destacando um conceito de redesign elegante com títulos populares como "Elden Ring" e "Resident Evil 4".
A imagem apresenta uma interface de usuário para verificar a compatibilidade de jogos no Steam Deck, destacando um conceito de redesign elegante com títulos populares como "Elden Ring" e "Resident Evil 4".
A imagem apresenta uma interface de usuário para verificar a compatibilidade de jogos no Steam Deck, destacando um conceito de redesign elegante com títulos populares como "Elden Ring" e "Resident Evil 4".

Destacando acessórios essenciais

O dock foi elevado de um simples cartão para uma seção dedicada, destacando suas capacidades de modo desktop com visuais de alta resolução e especificações — atendendo diretamente 42% dos usuários interessados em jogabilidade híbrida.

Um dispositivo Steam Deck é exibido com sua estação de acoplamento sobre uma superfície, em um fundo com gradiente rosa e roxo, acompanhado de texto que promove seus recursos de conectividade e versatilidade para uso com displays externos, redes e periféricos.
Um dispositivo Steam Deck é exibido com sua estação de acoplamento sobre uma superfície, em um fundo com gradiente rosa e roxo, acompanhado de texto que promove seus recursos de conectividade e versatilidade para uso com displays externos, redes e periféricos.
Um dispositivo Steam Deck é exibido com sua estação de acoplamento sobre uma superfície, em um fundo com gradiente rosa e roxo, acompanhado de texto que promove seus recursos de conectividade e versatilidade para uso com displays externos, redes e periféricos.

Integração do FAQ

O FAQ — anteriormente oculto em uma página secundária da loja Steam — foi adicionado diretamente à página de destino principal, abordando dúvidas comuns sobre filas regionais e compatibilidade desde o início. Isso reduziu a confusão dos usuários ao exibir respostas que 68% buscavam antes da compra.

Uma página de FAQ digital apresenta informações relacionadas ao uso do Steam Deck, com seções como "Sobre a Reserva" e "Sobre o Steam Deck", utilizando cartões expansíveis para perguntas e respostas em um tema escuro, exibindo um conceito de design para melhorar a interação do usuário.
Uma página de FAQ digital apresenta informações relacionadas ao uso do Steam Deck, com seções como "Sobre a Reserva" e "Sobre o Steam Deck", utilizando cartões expansíveis para perguntas e respostas em um tema escuro, exibindo um conceito de design para melhorar a interação do usuário.
Uma página de FAQ digital apresenta informações relacionadas ao uso do Steam Deck, com seções como "Sobre a Reserva" e "Sobre o Steam Deck", utilizando cartões expansíveis para perguntas e respostas em um tema escuro, exibindo um conceito de design para melhorar a interação do usuário.

Construindo confiança com avaliações de usuários

Aproveitando a prática consolidada da Steam de avaliações de jogos feitas pelos usuários, o redesenho integra depoimentos de proprietários verificados — permitindo que compradores indecisos avaliem dados reais sobre o Steam Deck.

Esta imagem exibe uma interface de usuário com avaliações destacadas sobre o Steam Deck, apresentando experiências e opiniões de clientes, ampliando a compreensão sobre suas capacidades de jogo e impacto.
Esta imagem exibe uma interface de usuário com avaliações destacadas sobre o Steam Deck, apresentando experiências e opiniões de clientes, ampliando a compreensão sobre suas capacidades de jogo e impacto.
Esta imagem exibe uma interface de usuário com avaliações destacadas sobre o Steam Deck, apresentando experiências e opiniões de clientes, ampliando a compreensão sobre suas capacidades de jogo e impacto.

Final UI

Esta imagem exibe uma interface de usuário com avaliações destacadas sobre o Steam Deck, apresentando experiências e opiniões de clientes, ampliando a compreensão sobre suas capacidades de jogo e impacto.
Esta imagem exibe uma interface de usuário com avaliações destacadas sobre o Steam Deck, apresentando experiências e opiniões de clientes, ampliando a compreensão sobre suas capacidades de jogo e impacto.

Outcomes

Quando a pesquisa encontra a realidade

Embora as restrições acadêmicas tenham impedido o acompanhamento direto de métricas, as atualizações da Valve em 2024 validaram as soluções sugeridas nesse case study, como os prompts regionais de lista de desejos e os filtros de compatibilidade.

Ao substituir CTAs enganosos por prompts de lista de desejos específicos para cada região, o redesenho teve como objetivo aumentar as adições à lista de desejos em países não suportados — ajudando a Valve a identificar mercados com alta demanda para lançamentos futuros.

Compatível com o Steam Deck

Exibir a compatibilidade dos jogos de forma clara (algo como: “XX% da sua biblioteca funciona”) visa reduzir as taxas de rejeição e aumentar as conversões ao abordar a principal hesitação dos usuários.

Aprendizados

O que eu aprendi durante esse projeto

🤞 Assumir riscos

Endless research threatened progress, but halting netnography to prioritize actionable insights allowed the project to advance. Learning to trust partial data and pivot toward development, despite gaps, became a critical lesson in balancing rigor with decisiveness.

Pesquisas intermináveis ameaçavam o progresso, mas interromper a netnografia para priorizar insights acionáveis permitiu que o projeto avançasse. Aprender a confiar em dados parciais e a direcionar o desenvolvimento, apesar das lacunas, tornou-se uma lição crítica em equilibrar rigor com decisão.

📑 O valor da documentação

Documentação como um Salva-Vidas

Uma pausa no projeto poderia ter comprometido o progresso, mas registros detalhados de pesquisa possibilitaram uma continuidade sem interrupções — transformando anotações fragmentadas em um plano de redesign acionável.

🖥️ Criando uma Landing Page eficaz

Equilibrando Estética & Conversão

Projetar uma Landing Page me ensinou a priorizar a intenção do usuário em vez do visual chamativo — estruturando os elementos visuais em torno da clareza de compatibilidade e dos CTAs que atendem 68% das frustrações regionais.

📝 Realidades da Pesquisa Primária

A netnografia em grupos do Reddit/Facebook revelou frustrações reais (por exemplo, confusão com filas), provando que a imersão direta com os usuários supera as suposições — mesmo sem “big data.”

Create a free website with Framer, the website builder loved by startups, designers and agencies.