Matriz CSD

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.

Survey

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.

Entrevistas

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.

Mapa de Empatia

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.

Persona

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."

Mapa da jornada do usuário

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).

Solução proposta

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.

Wireframes de papel

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.

Wireframes digitais

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.

Protótipo de baixa fidelidade

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.

Estudo de usabilidade 1

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:

1. 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.

2. 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.

Primeiras iterações

A partir das descobertas do primeiro teste, fiz as seguintes melhorias nas telas:

Designs refinados

Também refinei as demais delas do aplicativo, aumentando a fidelidade do design:

Protótipo de alta fidelidade

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.

Estudo de usabilidade 2

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:

1. Os usuários preferem usar a busca e a localização para encontrar o filme e cinema desejados.

2. Houve dificuldade em selecionar as cadeiras devido ao tamanho dos elementos na tela.

3. Os usuários sentiram dificuldade em lembrar quantas cadeiras haviam selecionado.

4. Os botões “novo cartão” e “excluir cartão” não tinham contraste suficiente entre si e confundiram os usuários.

5. A falta de detalhes sobre a sessão e os valores dos ingressos confundiu os usuários.

Novas iterações

A partir dessas descobertas, iterei o design para solucionar os problemas encontrados:

Mockups

Após as iterações nas telas, o produto chegou até sua versão final:

Protótipo de alta fidelidade

Com as telas concluídas em alta fidelidade, criei o protótipo final do aplicativo:

Considerações de acessibilidade