MovieGo
Otimizando a experiência mobile na compra de ingressos de cinema
Otimizando a experiência mobile na compra de ingressos de cinema
MovieGo é um aplicativo de compra de ingressos de cinema otimizado para a experiência mobile, criado como projeto acadêmico da Certificação em UX Design do Google.
Este estudo de caso foi desenvolvido durante meu período de estudos para obtenção da Certificado Profissional de UX Design do Google, e surgiu da necessidade de melhorar a experiência mobile na compra de ingressos de cinema.
Os sites e aplicativos de compra de ingressos de cinema não possuem uma experiência otimizada para o mobile, apresentando fluxos demorados e com problemas de usabilidade.
Assim, o objetivo desse projeto foi criar um aplicativo de bilheteria de cinema que permitisse a compra rápida de ingressos, otimizado para a experiência mobile.
Durante o projeto, atuei como UX Researcher, UX Designer e UI Designer, realizando pesquisa com usuários, criando wireframes, mockups e protótipos de baixa e alta fidelidade e conduzindo testes de usabilidade com os usuários.
Antes de iniciar a pesquisa com usuários para compreender suas necessidades e dores, realizei um Desk Research sobre cinema e compra de ingressos no Brasil, e em seguida, utilizei a Matriz CSD para visualizar as minhas principais suposições e dúvidas sobre a experiência no cinema e na compra de ingressos.
As questões levantadas nessa matriz me ajudaram a delinear a estratégia de pesquisa e as perguntas que precisavam ser respondidas nessa etapa de empatia com os usuários.
A pesquisa com usuários foi iniciada com um formulário compartilhado nas redes sociais e aplicado presencialmente nos cinemas da cidade de Maceió-AL. Foram obtidas 115 respostas.
Inicialmente, minha principal suposição era de que a maior dificuldade na compra de ingressos de cinema eram as filas enfrentadas presencialmente nos caixas e totens de autoatendimento, o que tornaria a experiência de compra em aplicativos e sites mais prática.
Porém, descobri que, além desse problema, a falta de acessibilidade, os problemas de usabilidade e os atritos no fluxo do usuário nas plataformas já existentes são pontos que dificultam a experiência de compra de ingressos de cinema, mesmo digitalmente.
Após a aplicação do formulário, foram realizadas entrevistas estruturadas com 5 pessoas, nas quais foi descoberto que os maiores problemas durante a compra de ingressos de cinema são:
1 | Filas grandes: as filas são uma dor ao comprar ingressos presencialmente, mesmo com os totens de autoatendimento.
2 | Poucas opções de pagamento: os participantes relataram que gostariam de opções de pagamento mais diversas, como o Pix e o uso de carteiras digitais.
3 | Comprovar a meia entrada: ter que comprovar a meia entrada durante a compra do ingresso é um problema para os participantes, pois não há informações claras sobre quais dados precisam ser validados.
4 | Problemas de usabilidade: os elementos na tela, sobretudo durante a escolha das cadeiras na sessão, são confusos, pequenos demais e não funcionam corretamente.
A partir das transcrições das entrevistas, criei mapas de empatia individuais para cada participante e um mapa de empatia agregado que reuniu as principais falas, sentimentos e ações dos usuários na experiência de compra de ingressos.
Em seguida, com os dados obtidos nas pesquisas quantitativa e qualitativa e a partir da síntese feita no Mapa de Empatia, criei a persona do app:
Também criei a história de usuário e a declaração de problema da persona, como forma de aumentar a empatia pelas suas necessidades:
História de usuário:
"Como uma estudante ocupada, eu quero comprar ingressos de cinema com praticidade, para que eu aproveite o filme sem me estressar com as filas e o comprovante de meia-entrada."
Declaração de problema:
"Sabrina é uma estudante ocupada que precisa comprar seus ingressos sem enfrentar filas e comprovar a meia-entrada no app, porque ela quer aproveitar ao máximo a experiência do cinema sem estresse e demora."
Ao mapear a jornada da persona, os pontos mais estressantes identificados foram:
A compra dos ingressos online (com dificuldades no pagamento e na escolha das cadeiras);
A apresentação do ingresso no cinema (pela necessidade de baixar os ingressos no celular e comprovar a meia entrada antes de chegar a sessão, no próprio site/app).
A partir das descobertas da pesquisa, concluí que, para solucionar os problemas dos usuários, o aplicativo deveria proporcionar:
Um fluxo de compra rápido e intuitivo, sem complicações como comprovar a meia entrada durante o processo;
Boa usabilidade, principalmente na seleção dos assentos;
Opções de pagamento flexíveis e diversas.
Para o design da solução, foquei na principal funcionalidade do aplicativo: a compra de ingressos de cinema. No decorrer desse processo, iterei diversas vezes as interfaces criadas, coletando o feedback dos usuários em diferentes estágios de fidelidade das telas.
Na ideação inicial, criei vários wireframes de papel até chegar às versões refinadas das telas, usando o método Crazy Eights para testar diversas ideias rapidamente.
A partir dos wireframes de papel, criei os wireframes digitais, pensando em funcionalidades que atendessem as necessidades descritas pelos usuários.
A página inicial do app, por exemplo, foi pensada para otimizar o fluxo de compra e reduzir a carga cognitiva, mostrando as principais funções do app de forma simples.
Já na página de filmes em cartaz, os usuários teriam acesso à informações relevantes sobre o filme, como duração, trailer e opinião do público. Porém, o usuário tinha que entrar no fluxo de compra para visualizar as sessões e horários disponíveis, o que depois foi identificado como um problema de usabilidade.
Com os wireframes digitais, criei o protótipo de baixa fidelidade simulando o fluxo de compra de um ingresso de cinema pelo usuário, indo da escolha do filme até o pagamento dos ingressos.
O primeiro estudo de usabilidade testou o protótipo de baixa fidelidade, e foi moderado presencialmente no Centro de Inovação do Jaraguá, em Maceió-AL. O recrutamento dos 5 participantes do estudo foi feito com o modelo “teste de corredor”.
Nesse estudo foi possível observar que:
A maioria dos participantes sentiram dificuldade em saber onde comprar os ingressos, pois o design da página inicial era simples demais e pouco atrativo.
Os usuários esqueceram de selecionar a data e o horário da sessão, o que impossibilitaria o seguimento do fluxo de compra no produto final. Isso indicou que o design da tela de sessões não era intuitivo o suficiente.
A partir das descobertas do primeiro teste, fiz as seguintes melhorias nas telas:
Também refinei as demais delas do aplicativo, aumentando a fidelidade do design:
Com os designs refinados a partir dos wireframes, criei o protótipo de alta fidelidade do app, simulando o mesmo fluxo de compra de ingressos.
O segundo estudo de usabilidade testou o protótipo de alta fidelidade e foi moderado remotamente com 5 participantes recrutados pessoalmente e através das redes sociais.
As principais descobertas do estudo foram:
Os usuários preferem usar a busca e a localização para encontrar o filme e cinema desejados.
Houve dificuldade em selecionar as cadeiras devido ao tamanho dos elementos na tela.
Os usuários sentiram dificuldade em lembrar quantas cadeiras haviam selecionado.
Os botões “novo cartão” e “excluir cartão” não tinham contraste suficiente entre si e confundiram os usuários.
A falta de detalhes sobre a sessão e os valores dos ingressos confundiu os usuários.
A partir dessas descobertas, iterei o design para solucionar os problemas encontrados:
Após as iterações nas telas, o produto chegou até sua versão final:
Com as telas concluídas em alta fidelidade, criei o protótipo final do aplicativo:
Além das necessidades dos usuários, as iterações do design levaram em conta a acessibilidade em diferentes contextos. Os principais pontos de melhoria durante o processo foram:
1 | Contraste de cores: a falta de contraste entre os botões de “novo cartão” e “excluir cartão” foi resolvida com a reformulação do fluxo de pagamento, que se tornou mais simples com a redução das informações e ações desnecessárias.
2 | Tamanho dos elementos na tela: os elementos da tela de seleção de cadeiras foram aumentados com a adição de um recurso mais otimizado de zoom e com o uso do modal em tela cheia para realizar a seleção das cadeiras.
3 | Legibilidade dos ícones: o design dos diferentes tipos de cadeiras da sala de cinema foi modificado para aumentar a diferença entre elas através da forma e da cor, facilitando a identificação dos assentos e a escolha do usuário.
Ao longo da construção desse estudo de caso, percebi a importância da mentalidade mobile first no design, e também da criação de experiências otimizadas que de fato considerem o meio usado pelas pessoas.
Os próximos passos para continuar evoluindo o produto serão:
1 | Seleção dos assentos: testar o novo fluxo de seleção das cadeiras com os usuários para validar a solução projetada e identificar oportunidades de melhoria.
2 | Pagamento com Pix: criar e testar o fluxo de pagamento com Pix, pois esse recurso foi muito mencionado nas pesquisas e nos testes de usabilidade com os usuários.
3 | Pesquisa e localização: refinar e testar os recursos de pesquisa e localização para busca de filmes e cinemas.
Além disso, foi gratificante ver como os usuários reagiram positivamente às melhorias propostas, destacando a clareza e simplicidade da navegação como grandes diferenciais do produto. Esses feedbacks reforçaram ainda mais a importância de se colocar as necessidades reais das pessoas no centro do processo de design.