App Bilheteria de Cinema

Case para a certificação Google UX Design

Visão geral do projeto

image

O produto:

Um app para ajudar as pessoas a escolher um filme e comprar ingressos de cinema. Público-alvo são apreciadores de cinema entre 18 e 60 anos.

image

Duração do projeto:

Agosto de 2023 – Maio de 2024

image

O problema:

Através de pesquisas, descobri que muitos usuários enfrentam filas e problemas ao comprar ingressos fisicamente. O aplicativo facilita a compra de ingressos online.

image

A meta:

Tornar a experiência de compra de ingressos em algo simples e rápido, evitando frustações no usuário.

image

Minha função:

Designer líder de UX, designer visual, escritor de UX e pesquisador de UX.

image

Responsabilidades:

  • Criação de personas;
  • Desenho de storyboard;
  • Pesquisa com usuários;
  • Construção de wireframes de baixa e alta fidelidade;
  • Prototipagem de modelos de baixa e alta fidelidade;

Pesquisa com usuários: resumo

Realizei entrevistas e criei mapas de empatia para entender os usuários para quem estou
projetando e as necessidades deles.

Um grupo de usuários primário identificado por meio de pesquisa foram jovens adultos que não têm tempo para comprar ingressos fisicamente no cinema.

Pesquisa com usuários: aspectos problemáticos

  1. Filas:
    Os frequentadores de cinema enfrentam muitas filas quando vão comprar ingressos de cinema.
  1. Acessibilidade:
    Os aplicativos de compra de ingressos não estão equipados com tecnologias assistivas.

Persona: Mariana

Declaração de problema:

Mariana é coordenadora de recursos humanos com uma agenda cheia durante a semana que necessita comprar ingressos de cinema para assistir com sua filha sem precisar ir ao cinema e pegar filas, porque ela tem uma rotina muito agitada e não tem tempo para comprar presencialmente.

Mapa da jornada do usuário

Mapear a jornada da usuária Mariana revelou como seria útil para os usuários ter acesso a um app de compra de ingressos de cinema.

Wireframes de papel

Desenhar algumas telas do app no papel foi de suma importância para que os elementos usados nos wireframes digitais fossem adequados para abordar os pontos problemáticos do usuário.

Na tela inicial, priorizei um processo de compra rápido e fácil para que os usuários economizem tempo.

Wireframes digitais

Criei os wireframes digitais, utilizando como base os desenhos dos wireframes de papel.

Protótipo de baixa fidelidade

Clique aqui para visualizar o protótipo de baixa fidelidade

A partir dos designs dos wireframes digitais, criei um protótipo de baixa fidelidade. O fluxo de usuário principal que conectei foi escolher um filme e selecionar um horário, para que o protótipo pudesse ser usado em um estudo de usabilidade.

Estudo de usabilidade: resultados

Executei dois estudos de usabilidade. As descobertas do primeiro estudo ajudaram a guiar os designs de wireframes e mockups.

O segundo estudo usou um protótipo de alta fidelidade e revelou quais aspectos dos mockups precisavam ser refinados.

Resultados da 1ª rodada:

  1. Usuários gostariam de poder continuar e finalizar o pedido em outro momento.
  2. Usuários gostariam de poder revisar o pedido antes de confirmar o pagamento.
  3. Usuários gostariam de poder cancelar o pedido após ter concluído o processo de compra.

Resultados da 2ª rodada:

  1. O processo de escolha de assentos é confuso.
  2. Usuários gostariam de uma opção de favoritar os cinemas prediletos.

Modelos

Após o segundo estudo de usabilidade, identifiquei cada assento em colunas e linhas, onde as letras representam as colunas e os números representam as linhas.

Principais modelos

Protótipo de alta fidelidade

Clique aqui para visualizar o protótipo de alta fidelidade

O protótipo final de alta fidelidade foi aprimorado conforme os resultados dos estudos de usabilidade conduzidos durante o curso. A navegação pelo fluxo é simples e rápida, concluindo a jornada de compra em apenas 6 passos/telas.

Considerações de acessibilidade

  1. As cores utilizadas no design tem um bom contraste, facilitando a leitura da maioria dos usuários.
  2. Ícones usados para ajudar a tornar a navegação mais fácil.
  3. As imagens contém texto alternativo, permitindo que usuários com deficiência visual possam entender o contexto através de leitores de texto.

Pontos importantes

Impacto

Impacto:

O aplicativo proporciona uma maneira mais rápida para compra de ingressos de cinema, ajudando usuários que tem uma rotina agitada.

Uma citação de feedbacks de colegas:

"...Parabéns pelo design, é intuitivo, visualmente bonito e os textos foram bem inseridos.”

O que eu aprendi

O que eu aprendi:

Ao desenvolver o protótipo do app de compra de ingressos de cinema, pude perceber como é importante considerar o usuário durante todo processo de criação. O resultado final fica muito mais alinhado com o que o usuário final espera.

Próximos passos

  1. Conduzir mais um estudo de usabilidade do protótipo final, para verificar se todos os pontos abordados foram resolvidos.
  2. Planejar estudos e pesquisas com usuários após o lançamento do produto, para colher feedbacks do app final.

Descrição

  • Projeto acadêmico

  • 27 de maio de 2024