Tá no Rolê: — Projeto Final de UX/UI Design
Tá no Rolê: o aplicativo que conecta pessoas com os barzinhos da cidade
Esse é o projeto final do Bootcamp de UX/UI Design na Ironhack São Paulo.
Sobre o projeto
O briefing do projeto foi aberto, dessa forma, as possibilidades eram infinitas e cabia a cada um de nós escolher como desenvolveríamos essa jornada. Buscando um problema para resolver, lembrei das diversas vezes que conversei com minhas amigas para organizarmos nossas saídas após término do trabalho e tínhamos que ficar decidindo onde ir. Acho uma perda de tempo ter que ficar indo de página em página buscando os bares da cidade, assim decidi que queria entender os desafios de quem busca um lugar para sair e o que os bares tem a oferecer aos clientes.
Processo de Pesquisa
Iniciei minhas pesquisas na internet e consegui dados relevantes que auxiliaram o direcionamento das minhas ideias:
Mas antes de qualquer coisa, fui entender da onde surgiu o termo Bar… bar vem da palavra francesa “barre”, que significa barra, as tabernas onde eram vendidas as cervejas, possuíam uma barra que era do tamanho do balcão, servia para evitar que o cliente bêbado encostasse. No decorrer a palavra barre foi se divulgando, até chegar ao simples “Bar” que conhecemos.
Seguindo as pesquisas, a ABRASEL (Associação Brasileira de Bares e Restaurantes) divulgou os seguintes dados atualizados esse ano (agosto/ 2022):
- Temos atualmente um pouco mais de 736 mil bares abertos e regulamentados no Brasil;
- 45% dos bares e restaurantes já trabalham com lucro, desde a retomada do setor, pós crise da pandemia.
- A cidade de Belo Horizonte é a capital dos bares e botecos no país, com aproximadamente 14 mil barzinhos.
“Segundo levantamento da ABRASEL, o desempenho dos bares ainda teve reflexos do pico de infecções causado pela variante ômicron no começo do ano. “Hoje já funcionamos sem restrições na maior parte do país, mas nos preocupa o longo tempo em que uma parcela significativa dos bares e restaurantes trabalha com prejuízo. E não foi só pela queda no movimento, que agora está sendo retomado. Outros fatores, como as parcelas dos financiamentos em atraso e a inflação dos insumos, que praticamente não foi repassada para os cardápios, influenciam no resultado dos estabelecimentos”,
Após escolher o tema do projeto, defini um objetivo de pesquisa para realizar a pesquisa quantitativa (Survey) e qualitativa (Entrevistas):
Objetivo de pesquisa
Descobrir o que as pessoas gostam de fazer em seu momento de lazer com os amigos, se gostam de saber a programação musical dos bares e receber promoções.
A partir disso, decidi fazer uma survey no ‘Google Forms’, enviado através do WhatsApp. Recebi 20 respostas, dentre as quais as mais relevantes foram:
- 84,6% gostam de saber o que está rolando no barzinho, tipo programação musical com antecedência;
- 38,5% gostam de ir em barzinhos ao menos 1x na semana;
- 53,8% utilizaria app que indicasse bares com programação e desconto.
Após reunir os dados, foquei em entender, nas entrevistas, se a programação musical disponível deve ser semanal ou apenas do dia, se a opção de conseguir ver o cardápio antes facilita; Assim, os resultados foram:
“Além de descontos eu sempre procuro cardápio do local, gosto de ler antes;
“Gosto de saber a programação musical antes para ver se é algo que encaixe no meu estilo;
Finalizado as entrevistas realizadas com 7 pessoas, os resultados validaram as hipóteses de que saber a programação semanal, receber promoções e ter cardápio disponível é algo que a maioria busca. Ainda, ficou claro a dificuldade em encontrar apps que tenham tudo isso disponível.
Benchmarking e Matriz Competitiva
Após fazer um Benchmarking para analisar os principais apps concorrentes do mercado, realizei uma Matriz Competitiva onde posicionei os concorrentes nos quadrantes de acordo com a proposta de cada um e assim, consegui identificar os pontos onde eu poderia trabalhar meu produto.
Definição do problema
How might we?
Na sequência criei o How Might We, que é um exercício de questionamento que ajuda na analise do problema e na criação de ideias. Afinal de contas, a definição de qual o problema a se resolver vem a partir de como você formula a pergunta.
- Deixar a plataforma mais acessível?
- Fazer um app mais interativo?
- Dar um destaque na programação musical
- Cardápio disponível?
- Criar Promoções?
Hipóteses
Com a ajuda do HMW, consegui levantar alguma hipóteses antes de chegar no problema em si.
Se gerar cupom de desconto, mais pessoas vão querer usar o app;
Se eu colocar agenda com programação semanal, as pessoas conseguem se organizar melhor com seus dias e também caso precisem reservar mesa;
Acredito que mostrar feedback de usuários faz com que novas pessoas possam conhecer os barzinhos;
Mostrar o cardápio, faz com que a pessoa saiba antes o que consumir.
Depois decidi criar alguns “Job Stories”, que seriam tarefas que o nosso usuário em questão quer ou pretende realizar:
A partir dessas informações, defini a declaração do problema:
Declaração do problema
Pessoas em seu momento de lazer entre amigos gastam muito tempo procurando dicas de barzinhos na cidade, tendo que consultar em vários lugares, buscam os que oferecem por programação musical ao vivo e tenham promoções disponíveis, assim precisam otimizar seu tempo na forma de consumir conteúdo, de uma maneira mais simples e organizada e que não fiquem em frente a tantas telas em redes sociais.
Mapeando as descobertas
Depois de toda a pesquisa com usuários(as), comecei a organizar todos esses dados e procurar por similaridades, foi aí que fiz um diagrama de afinidades que me ajudou a dar luz a pontos de dor em comum.
E assim nasceram as Personas: Camila e Rafaela;
Criei duas Personas para conseguir representar meu cliente ideal, uma que busque otimizar seu tempo encontrando tudo o que precisa num único lugar e a outra que busca por descontos e cupons e preços mais baixos em cardápios;
Persona 1
Persona 2
Ideação
Mindmap e Método Moscow
Ambas são técnicas usadas na etapa de ideação, elas permitem destravar o raciocínio para encontrar novas ideias sobre problemas, sejam eles conhecidos ou não, e organizar seus pensamentos.
O Mindmap é um mapa mental utilizado para organizar, memorizar ou analisar um conteúdo em específico é um método visual que dispõe o conteúdo da mesma maneira que ele é entendido pelo nosso cérebro, fortalecendo as sinapses neurais. Ou seja, é muito mais fácil memorizar e compreender dessa forma.
Já o Método MOSCOW é uma técnica de priorização usada com o intuito de encontrar um entendimento em comum entre as partes interessadas sobre a importância que elas atribuem a cada requisito. O termo MoSCoW é um acrônimo em inglês derivado da primeira letra de cada uma das quatro categorias com os “Os” no meio para fazer a palavra ser pronunciável. Fica assim:
Must Have (Tenho que fazer)
Should Have (Devo fazer)
Could Have (Poderia fazer)
Won’t Have (Não vou fazer)
Visão de Produto
Criei também a visão de produto (utilizando o modelo Canvas), para entender quem é o usuário, como resolver o problema e a métrica de sucesso.
E antes de partir para a criação das telas de fato, fiz o User flow e o Sitemap.
User Flow
Realizei o fluxograma para entender o processo que o usuário deverá passar para realizar a tarefa principal, o user flow principal mudou muito durante o projeto, principalmente depois que eu fiz os testes de usabilidade, mas o processo de design nem sempre é linear. Esse é o resultado final do flow principal.
Sitemap
Depois de priorizar as funcionalidades, desenhei o sitemap para visualizar a arquitetura de informação da minha solução.
Solução
Desenvolvimento de um app que reúna os barzinhos com música ao vivo na cidade e ofereça cupom de desconto para o usuário cadastrado conseguir boas promoções no bar escolhido.
Lo-fi
Parti para os rabiscos e criei alguns protótipos de baixa fidelidade, nesse momento precisava deixar claro o conceito da solução.
Teste de conceito
05 pessoas testaram o conceito, a partir de um roteiro semiestruturado.
Perguntei se o objetivo do protótipo estava claro e se a pessoa tinha alguma sugestão de alteração.
“Legal que as telas de início dão uma explicação do que vai ter no app.”
“Seria legal se as promoções pudessem ser favoritadas ou os barzinhos que mais gosto de ir.”
“Consigo entender bem os ícones.”
Mid-fi
Comecei a desenhar o protótipo de média fidelidade com o objetivo de verificar se a arquitetura desenvolvida estava intuitiva e se as informações mostradas faziam sentido ao usuário.
Teste de usabilidade
05 pessoas testaram a usabilidade, onde os usuários deveriam realizar algumas tarefas em voz alta, sendo algumas das questões:
1- Cadastre uma nova conta
2- Visualizar agenda Programação semanal
3- Verifique os cupons de desconto disponíveis
“Achei os fluxos bem fáceis, não tive dificuldades pra entender pra que essa ideia serve, certeza que ajudaria muito.”
“Achei bem fácil e prático para o dia a dia, ver a programação semanal ajuda muito para decidir onde ir.”
“Eu gosto muito de ter cupom de desconto no app .”
Guia de estilo
Fiz um moodboard e comecei a definir os menus, ícones, cores e fontes. Escolhi tons de vermelho e verde e azul para maior conforto visual e acessibilidade.
Ao finalizar o guia de estilo, comecei a desenvolver as telas Hi-fi, colocando todos os elementos visuais padronizados no aplicativo chamado Tá no Rolê.
Protótipo
Próximos passos
- Realizar mais testes de usabilidade;
- Desenvolver mais interação entre as telas
- Trabalhar melhor as telas de agenda semanal e cupons
- Ferramentas de Acessibilidade
Aprendizados
Esse projeto foi muito importante porque fez com que eu trabalhasse tudo o que aprendi nesse bootcamp, e isso trouxe a oportunidade de me desafiar. Acredito que tenho muito a melhorar e aprender, mas já é um bom começo para quem quer melhugar na área de UX/UI design.
Obrigada pela sua leitura, fique a vontade para me mandar feedbacks e sugestões.
Anna,
