ESCAPE MATE
REDESIGN DE SITE / PROPOSTA DE DESIGNTrês mundos.
Um caminho mais claro.
Uma proposta de design para as salas de escape mais antigas de Wellington: um site que vende as três missões tão bem quanto elas funcionam na vida real.
01 / O PONTO DE PARTIDA
Salas incríveis.
Um site difícil de escolher.
A Escape Mate constrói à mão, desde 2015, salas de escape em tamanho real e de alta tecnologia em Wellington. Cada uma das três salas tem um mundo próprio e marcante. Esta proposta pergunta como o site poderia carregar esse mundo e ajudar um grupo a escolher uma sala e reservar mais rápido.
O que eu percebi
As três páginas de sala têm de 2.100 a 2.900 palavras cada, e o texto dos termos se repete em todas. As informações que um grupo procura primeiro, como número de jogadores, preço e dificuldade, ficam no meio de textos longos. Alguns detalhes também mudam de uma página para outra: a dificuldade aparece em escala de 10 nas salas e de 5 na página de eventos.
O que eu quis fazer
Manter o que já funciona, as salas, as fotos e o checkout de reservas que já existe, e dar a tudo isso uma estrutura mais clara. Deixar cada sala comparável de relance, manter a reserva a um toque de distância e usar as histórias que já estão no site para guiar o design.
Números coletados no site público em 4 de novembro de 2026. A comparação de tamanho considera só o documento HTML, sem imagens nem scripts. Eles descrevem o ponto de partida, não resultados medidos.
02 / ANTES E DEPOIS
As mesmas salas.
Um primeiro olhar mais claro.
Arraste o controle para comparar o site original com a proposta, no mesmo tamanho de tela.
ORIGINAL
PROPOSTA
O original abre com uma faixa de fotos e um banner promocional. A proposta coloca a promessa, as três salas e um botão de reserva na primeira tela.
Capturas reais de navegador · 1440 × 1000 px · 4 de novembro de 2026. O banner promocional, o selo de avaliações e o chat do original aparecem como estavam naquele dia. As capturas estão no mesmo tamanho de tela.
03 / O CONCEITO
O site é
o terminal da agência.
As próprias histórias das salas já citam a Escape Mate Intelligence Agency. Eu a transformei na ideia central: uma sala de operações escura, no rosa e no violeta do logo, com rótulos de dossiê em fonte monoespaçada e uma contagem regressiva de 60:00. Depois, cada missão ganha uma pele própria.
Fonte Cinzel, degradê dourado, brilho de tocha tremulando e divisores com glifos de estilo maia.
Fonte Chakra Petch, linhas de varredura verde-alienígena, um radar em movimento e uma onda de sinal de socorro.
Fonte Cormorant, um degradê que escurece conforme você rola a página, um medidor de profundidade e bolhas bioluminescentes.
Briefings censurados
Cada história esconde as linhas principais atrás de tarjas, que a pessoa revela ao passar o mouse ou tocar, e ler a história vira o primeiro enigma.
Um sistema, três climas
Cor, fonte e movimento mudam em cada sala, enquanto layout, espaçamento e controles continuam iguais. As salas parecem diferentes e o site continua fácil de aprender.
A camada compartilhada
Unbounded nos títulos, Inter na leitura e JetBrains Mono nos rótulos de dossiê. Superfícies bem escuras carregam o rosa, o violeta e o amarelo do logo.
04 / DECISÕES DE UX
Vender sem
quebrar o encanto.
Cada decisão tentou facilitar a escolha e a reserva sem achatar a ficção.
Mission Matcher
Tamanho do grupo, crianças, clima, experiência e acessibilidade geram uma sala recomendada e um preço na hora. As regras vêm do FAQ.
Dossiês comparáveis
Toda sala mostra jogadores, dificuldade de 0 a 10, preço e endereço na mesma escala, para um grupo comparar de relance.
Reserva a um toque
Um botão de reserva sempre visível no cabeçalho e, no celular, uma barra na parte de baixo com um botão de ligar. Todos os botões levam ao checkout que a Escape Mate já usa.
Uma única fonte da verdade
Os termos ficam em uma página, com um resumo de relance. O FAQ é pesquisável, e os eventos corporativos e de festas dividem uma página com abas.
Leve e acessível
HTML semântico, foco visível, áreas de toque de 44 px e suporte a movimento reduzido, em arquivos estáticos e sem framework.
05 / EM TODAS AS TELAS
A mesma história.
No tamanho do polegar.
No celular, o cabeçalho vira um menu, uma barra de reserva fica fixa na parte de baixo da tela com um botão de ligar ao lado, e as três salas viram uma faixa abaixo do título.
06 / STATUS E REFLEXÃO
Uma proposta,
feita para ser testada.
O que existe hoje é o design e uma prévia funcional, feita com arquivos estáticos.
- 8Páginas na prévia funcional
- 3Peles de sala em um sistema compartilhado
- 1Caminho de reserva: o checkout que a Escape Mate já usa
A Escape Mate não aprovou, adotou nem testou este design. Reservas, conversão, velocidade no mundo real e satisfação dos visitantes não foram medidas, e qualquer melhoria é uma hipótese a validar.
O que eu validaria a seguir
- Alguém que nunca visitou o site consegue escolher uma sala rápido, sem ajuda?
- O Mission Matcher recomenda a sala de que as pessoas mais gostam no fim?
- Os visitantes encontram os termos e os detalhes de acessibilidade de que precisam?
- A barra de reserva fixa leva a mais reservas concluídas no celular?
Notas do projeto e créditos das imagens
Conceito por iniciativa própria de Victor Moraes. O nome, o logo, as fotos das salas e os textos originais da Escape Mate pertencem à Escape Mate, e as capturas do site atual aparecem aqui apenas para comparação.
Fontes: Unbounded, Inter, JetBrains Mono, Cinzel, Chakra Petch e Cormorant (SIL Open Font License). Ícones: Lucide (ISC).
“As salas já contavam ótimas histórias. O site só precisava deixar que elas aparecessem.”
A decisão mais útil foi tratar a ficção que já existia como um sistema de design, e não como enfeite. Ela dá uma voz ao site e dá a cada sala o seu lugar dentro dele.
PRÓXIMO PROJETO
Dough Bakery ↗
Outro conceito de site independente, para uma padaria de Wellington.