SuperApp Cidade Matarazzo: a vertical de Cultura e o seu videoguia
Arquitetura de informação para um complexo inteligente de luxo em São Paulo e o guia em áudio e vídeo da exposição de Anish Kapoor, do benchmarking ao handoff
A Cidade Matarazzo é um complexo inteligente em São Paulo cujo SuperApp reúne ingressos, compras, reservas de mesa e conteúdo de comunidade num só app, para um público de alto padrão. Pela CI&T, desenhei a vertical de Cultura: o lugar dela na arquitetura de informação do app, a jornada de ingressos e, para a exposição de Anish Kapoor, um guia digital com áudio e vídeo para cada obra. Fiz benchmarking de apps de viagem, música e museus, defini a jornada e a interface do guia, testei com pessoas da empresa e entreguei para os times de iOS e Android num arquivo do Figma organizado por funcionalidade, com estados, chaves de tradução e histórias do Jira.
- Papel
- Senior Product Designer da vertical de Cultura, pela CI&T
- Cliente
- Cidade Matarazzo
- Ano
- 2023
- Plataformas
- iOS e Android, no design system do SuperApp
- Time
- PM, tech lead, devs iOS e Android e QA, em dailies
- Minha parte
- Arquitetura de informação, jornada de ingressos, videoguia do benchmarking ao handoff
Navegue no protótipo
Clique pela vertical de Cultura você mesmo: a exposição, a compra de ingresso e o videoguia.
Visão geral
A vertical de Cultura precisava vender ingressos e também acompanhar as pessoas dentro da exposição, para um público internacional, na primeira versão de um SuperApp que ainda estava encontrando sua estrutura.
Contexto
Um app para um complexo inteiro: cultura, gastronomia, varejo e comunidade. A vertical de Cultura foi lançada como MVP junto com a exposição de Anish Kapoor, de dezembro de 2023 a janeiro de 2024.
Desafio
Encaixar uma nova vertical num app com várias outras e desenhar um guia que as pessoas usariam em pé, diante de uma obra, de fone de ouvido, em três idiomas.
Meu papel
Fui responsável pelos fluxos da vertical de Cultura, do sitemap ao handoff, junto com PM, tech lead, devs e QA, e com o time de cultura do cliente para o conteúdo.
Arquitetura de informação
Antes de desenhar telas, eu precisava saber onde Cultura ficava e como o visitante passaria por comprar, guardar e usar um ingresso.
Um sitemap entre verticais
Mapeei o SuperApp como um todo e depois aprofundei em Cultura: eventos, detalhe do evento, seleção de ingresso, revisão da compra e o ingresso na carteira, onde o guia viveria depois.
Padrões antes das telas
Ainda não havia um padrão compartilhado. Comparei como outras verticais resolviam os mesmos problemas e mapeei componentes análogos, o que virou o começo do design system do SuperApp.
Casos de borda como parte da estrutura
Ingressos esgotados, limite de compra, eventos indisponíveis e busca sem resultado ganharam cada um a sua página no handoff, não uma nota de rodapé.
O guia: o problema
Quem visitava a exposição de Anish Kapoor precisava de contexto sobre cada obra enquanto caminhava pelo espaço, no próprio idioma, sem folheto impresso nem um aparelho alugado para todo mundo.
O guia precisava funcionar com duas entradas: o ingresso digital no app e um QR code para quem retirasse um aparelho físico no local, o que exigiu desenhar um leitor de QR code dentro do SuperApp.
Também havia restrições. O conteúdo viria do time de cultura do cliente pelo CMS, o projeto era um MVP e eu não tinha acesso direto aos visitantes antes da abertura.
Benchmarking
Busquei padrões adequados a uma experiência cultural de alto padrão, fora das referências comuns de e-commerce.
GetYourGuide
Como apps de viagem associam conteúdo a um lugar e a uma atividade, e o mantêm perto do ingresso.
Spotify
A navegação entre itens de áudio numa playlist e a transcrição apresentada como a letra que acompanha a música.
Louvre
Audioguias de museu: paradas numeradas e como o visitante encontra o conteúdo da obra à sua frente.
Rijksmuseum e museus de Florença
Guias feitos para visitantes internacionais, o mesmo tipo de público que a exposição esperava.
Arquitetura da experiência
O benchmarking virou uma jornada com seis momentos, cada um uma página no handoff.
Comprar o ingresso
O guia vem com o ingresso e fica ao lado dele no app.
Abrir o guia
Pelo botão no ingresso ou escaneando o QR code do guia.
Se preparar
Um aviso para usar fones de ouvido e depois a escolha do idioma do guia: inglês, espanhol ou português.
Introdução
Um vídeo de abertura que apresenta a exposição.
As obras
Uma playlist numerada com título criativo e nome de cada obra, livre para navegar em qualquer ordem.
Encerramento
Uma tela final que continua a visita dentro da Cidade Matarazzo.
Decisões de interface
A decisão central era como a mídia e a sequência de obras dividiriam uma mesma tela. A resposta foi dar prioridade à mídia e colocar a playlist num bottom drawer.
Mídia em primeiro lugar
A imagem ou o vídeo da obra lidera; título, descrição e controles dão apoio.
Playlist num bottom drawer
O drawer começa parcialmente aberto sob o vídeo, ocupando mais ou menos o quarto de baixo da tela, com o título, o idioma, o botão de transcrição e o primeiro item. Aberto, cobre quase a tela inteira com a lista de obras: miniatura, título, duração e descrição. Uma iteração seguinte passou a reduzir o vídeo quando o drawer abre, em vez de cobri-lo.
Player
Pausar e tocar, item anterior e seguinte, e uma barra de progresso mostrando onde você está.
Transcrição
A narração em texto, como alternativa acessível ao áudio. A versão sincronizada acompanhava o áudio como a letra de uma música; também documentei uma versão sem sincronia caso o player não suportasse.
Idioma
Inglês, espanhol ou português. Se ninguém escolher, vale o primeiro da lista, e a ordem é definida no CMS. Uma limitação técnica fazia a reprodução recomeçar depois da troca, e o fluxo deixava isso claro.
Retomada
Sair do guia e voltar mantém o seu lugar na visita.
Regras de conteúdo
Descrições limitadas a duas ou três linhas (76 caracteres), para que cada item caiba no drawer em qualquer idioma.
Estados
Carregamento, mídia que não carrega, telas menores e o fim da playlist.
Testes
Como o guia era um MVP e a exposição ainda não tinha aberto, testei o protótipo com pessoas da empresa, com foco na relação entre o vídeo e a playlist.
O protótipo do player tinha cerca de 30 interações entre estados, com transições animadas, para que as pessoas passassem do vídeo para o drawer e para a transcrição como fariam no app.
O arquivo de handoff guarda as alternativas lado a lado: um drawer que cobre o vídeo ou um que o reduz, e uma transcrição sincronizada com o áudio ou sem sincronia. Também guarda a evolução da tela final, de “Exposição concluída!” para uma tela que sugere mais eventos.
Handoff
Organizei o arquivo de handoff por funcionalidade, para que cada história do Jira apontasse para uma página com tudo o que o dev precisava. O time acompanhava em dailies com PM, tech lead, devs e QA, junto com Jira e Confluence.
Estrutura
Uma capa com versão, seções para cada parte da vertical (videoguia, QR code, internacionalização, esgotado…) e uma página por funcionalidade.
O fluxo completo
Uma página “Fluxo Full” com todas as telas do guia ligadas por setas, do ingresso ao fim da visita.
Jira dentro do Figma
Cada página trazia os cards de iOS e Android do Jira, com user story, escopo e critérios de aceite, ao lado das telas que descreviam.
Chaves de tradução
Cada texto identificado com a sua chave no Traduora, a ferramenta de tradução, com as telas em inglês e português lado a lado.
Acessibilidade e estados
Anotações de texto alternativo, versões para telas menores e estados de carregamento e erro do player e do leitor de QR code.
Um protótipo clicável
Toques que abrem o drawer de baixo para cima, transições entre estados do player e spinners de carregamento com tempo.
Evoluções marcadas
Iterações posteriores em páginas [EVO] próprias, para o time ver o que mudou.
Impacto e aprendizados
- O MVP da vertical de Cultura foi lançado para a exposição de Anish Kapoor, com ingressos, check-in e o guia digital desenhados de ponta a ponta.
- O sitemap e o estudo de arquitetura de informação deram ao SuperApp uma base para as verticais seguintes.
- Levantar cedo as informações e decisões que faltavam, com o cliente e o time, manteve o projeto andando.
- Escrever o handoff por funcionalidade, com estados e chaves de tradução, deixou para o time um registro claro de cada tela e de cada mudança.
