Trata-se de um case de aplicativo fictício, focado em facilitar o agendamento de clientes e gerenciamento de pedidos para donos de barbearias, tudo direto do celular!
Projeto
aplicativo
data
Jul / out. 2020
Objetivos
• Localizar as barbearias mais próximas de sua região e consultar feedbacks de outros clientes
• Garantir um agendamento com mais facilidade, idem para eventuais cancelamentos
• Efetuar o pagamento diretamente pelo celular, via cartão de credito
• Divulgar a barbearia e receber clientes, e destes, receber feedbacks após serviço prestado
• Gerenciar os agendamentos pelo celular, matendo o controle de vagas disponíveis
• Receber pagamentos via cartão de crédito diretamente do celular
Wireframes
Lápis e papel
Inicialmente era preciso soltar a ideia da cabeça e esboça-la no papel.
Começo a esboçar o que seria a jornada do usuário como cliente, partindo desde a tela de início, efetuando o cadastro no aplicativo, e posteriormente, a busca por barbearias próximas.
Repassando para o computador
Durante o desenvolvimento dos esboços, notei que precisaria fazer diversas anotações, pois, conforme a ideia tomava corpo, mais densa ela ia se tornando, surgindo variáveis e eventos paralelos que refletiam na jornada de usuário como barbeiro, necessitando assim, uma melhor organização dos esboços, afim de obter melhor compreensão dos eventos para os dois tipos de usuários.
Sendo assim, optei por repassar e continuar os esboços no computador, de preferência utilizando o Adobe Illustrator, onde eu poderia remanejar os esboços de uma forma que fizesse mais sentido e com maior liberdade para movimentar esboços, além de fazer anotações mais longas e legíveis de preferência.
Jornada do usuário (Cliente)
Algumas telas foram abolidas, e outras foram adicionadas durante o desenvolvimento do protótipo.
Jornada do usuário (Barbeiro)
Algumas telas foram abolidas, e outras foram adicionadas durante o desenvolvimento do protótipo.
Fluxo de navegação
Se cadastrando
Antes de iniciar o cadastro, o usuário pode definir se terá o perfil de cliente ou dono de barbearia.
cadastro como cliente
O usuário que se cadastrar como cliente deve fornecer os seguintes dados:
• Foto de perfil, nome, nascimento, CPF e e-mail (para identificação);
• Endereço (para que o aplicativo possa localizar barbearias próximas de sua residência).
Cadastrando cartão de crédito
O usuário poderá cadastrar um cartão de crédito para agilizar a questão do pagamento.
Caso o mesmo tenha a necessidade de cancelar o pedido, o valor pago é estornado ao cartão.
buscando barbearias
Ao efetuar uma busca, é dado ao usuário uma relação de barbearias próximas ao seu endereço. É mostrado uma classificação decrescente com base na barbearia melhor avaliada na região.
É possível filtrar os resultados da buscar por:
• Maior/Menor: Classificação, Distância, Preço ou Nenhum.
selecionando a barbearia
Ao selecionar uma barbearia, o usuário poderá:
• Mais informações (cadastradas pelo dono da barbearia);
• Visualizar a avaliação geral da barbearia (derivada com base nas avaliações de outros clientes);
• Fazer um agendamento;
• Ver preços (cadastrados pelo dono da barbearia);
• Ver comentários de outros clientes.
realizando agendamento
Definindo o dia:
O usuário tem a opção de escolher qual o dia irá agendar sua ida a barbearia.
Definindo a hora
Após definição do dia, o usuário tem a opção de escolher em qual hora irá agendar sua ida a barbearia.
Caso a barbearia possua cadeiras disponíveis no momento do agendamento, o usuário deve selecionar a hora de sua preferência e dar prosseguimento.
Caso não possuam cadeiras disponíveis no momento do agendamento, o usuário pode ativar a notificação de vagas disponíveis para a barbearia em questão e posteriormente ser alertado.
Reservar cadeira e suas variáveis
Após definição do dia e hora, o usuário tem a opção de escolher para quem será reservada uma ou mais cadeiras. Ficam disponíveis três opções de reserva:
• Para mim (próprio cliente cadastrado);
• Para outra pessoa (sendo necessário a identificação desta);
• Para várias pessoas (sendo necessário a identificação destas, e dentre elas, pode estar incluso o próprio cliente cadastrado, o número máximo de cadastros se dá com base no número máximo de cadeiras cadastrados pela barbearia, conforme será abordado mais adiante na apresentaçao);
Após escolher o método de reserva, o usuário pode optar por revisar seu agendamento até então, ou dar continuidade.
definindo os serviços
Sobre escolhas de serviços e suas variáveis:
O usuário tem a opção de escolher os seguintes serviços:
• Corte de cabelo;
• Fazer a barba;
• Risco no cabelo;
• Fazer a sobrancelha;
• Luzes / Tingimento.
O valor de cada serviço é apresentado ao lado direito da tela, e logo abaixo, a totalização do valor final.Caso o usuário tenha reservado cadeiras para várias pessoas, será necessário definir os serviços para cada pessoa.
formas de pagamento
Cartão de crédito:
O usuário escolhe quantas vezes quer parcelar o valor do serviço e efetua o pagamento antecipadamente, lembrando que caso necessite cancelar o pedido, o valor é estornado ao cartão.
Dinheiro:
O usuário efetua seu pagamento normalmente na barbearia. O dono da barbearia tem ciência da forma de pagamento com base nos detalhes do pedido, conforme será mostrado mais a frente nessa apresentação.
Todos os pagamentos são nominais ao cliente cadastrado, com exceção para o pagamento em dinheiro de uma reserva feita para outra pessoa, na qual esta fica encarregada de efetuar o pagamento na barbearia.
pedido confirmado
Ao concluir o pedido, é gerado um número para este. Essa numeração serve como auxílio para identificação e organização de demandas na barbearia.
Caso o usuário tenha feito um pedido para várias pessoas, será contabilizado como apenas um pedido, porém conjunto.
Além da informação acima, o usuário tem as seguintes opções:
• Ver seu perfil, no qual estará com uma informação de pedido em andamento (se tratando do mesmo pedido);
• Novo agendamento;
• Ver detalhes do pedido (para cada variável possui uma apresentação diferente, conforme exemplificado ao lado.
cadastro como barbeiro
O usuário que se cadastrar como barbeiro deve fornecer os seguintes dados:
• Foto de perfil, nome, nascimento e CPF (servirá de complemento de informações para cadastro de uma conta de pagamento);
• Nome da barbearia, CNPJ e e-mail (para identificação);
• Endereço (para que a barbearia possa ser localizada pelos clientes no aplicativo).
Cadastrando os dias de trabalho
O usuário define os dias de início e término de sua barbearia.
Cadastrando os horários de trabalho
O usuário define horário de funcionamento de sua barbearia.
Cadastrando número de cadeiras disponíveis e informações complementares
O usuário define o número máximo de cadeiras disponíveis em sua barbearia.
Além disso, o usuário informa quantos profissionais trabalham em sua barbearia, sendo o número ideal, equivalente ao mesmo número de cadeiras disponíveis, assim sao evitadas as sobrecargas e atrasos.
O usuário pode por opção, informar a média de clientes que atende por dia. Essa informação permite ao aplicativo averiguar se não há desequilíbrio entre o número de clientes que atende por dia em relação ao número de cadeiras e profisisonais disponíveis.
Cadastrando os preços
O usuário define os preços de seus serviços. Para este aplicativo foi mantido o foco somente nos seguintes itens:
• Corte de cabelo;
• Fazer a barba;
• Risco no cabelo;
• Fazer a sobrancelha;
• Luzes / tingimento.
Informações complementares finais
O usuário opcionalmente pode definir as seguintes informações:
• Telefone;
• Celular (com ou sem WhatsApp);
• Site;
• Redes sociais (Instagram, Facebook, etc).
Essas informações servem de insumos para o cliente que deseja consultar mais informações acerca de sua barbearia.
Cadastrando conta de pagamento
O usuário define os dados da conta de pagamento, desde titular, CPF (podendo ser o mesmo do proprietário da barbearia ou diferente), banco ou instituição, agência e número da conta.
Os pagamentos feitos via cartão de credito são repassados para a conta de pagamento cadastrada.
ver perfil
Em seu perfil, o usuário pode:
• Efetuar alterações em suas informações, além de mudar a foto do perfil, trocar a conta de pagamento cadastrado e mudar sua senha;
• Ver seu saldo (valores pagos por cartão de crédito) podendo transferir a quantia desejada para a conta de pagamento cadastrada;
• Ver pagamentos, podendo consultar os valores pagos via cartão de crédito e dinheiro (a título de curiosidade). Além de possuir uma relação de pagamentos pendentes feitos por cartão de crédito;
• Ver feedbacks;
• Sair da conta.
recebendo um pedido
Ao ter um pedido feito em sua barbearia, o usuário recebe a notificação.
Ao clicar na notificação, o usuário pode ver detalhes do pedido, que mudam conforme escolha do cliente, como exemplificado ao lado.
O usuário pode também visualizar o seu perfil,
no qual estará contido a relação de pedidos em andamento, podendo consultar mais detalhes (como descrito no parágrafo anterior) ou concluir o pedido, conforme será mostrado mais adiante.
concluindo um pedido
Caso o profissional termine um serviço com rapidez, o usuário que estiver gerenciando o aplicativo tem a opção de concluir o pedido, liberando assim, uma cadeira no sistema.
Caso tenha sido um pedido feito para várias pessoas, o usuário deve selecionar entre um ou outro membro do pedido, ou todos os membros do pedido em questão, e determinar a conclusão.
feedback recebido
O usuário é notificado assim que o cliente deixar o seu feedback sobre a barbearia.
Ao clicar na notificação, o usuário poderá visualizar o feedback dado pelo cliente.
Tipografias
H1 - abcDEfg
(36px)
H2 - abcDEfg
(24px)
H3 - abcDEfg
(16px)
Text 1 - abcdefg
(16px)
Text 2 - abcdefg
(14px)
Fontes usadas:
• H1 / H2 / H3 (Bungee)
• Text 1 / Text 2 (Noto Sans)
Cores
#1C1A18
#393636
#5E5A5A
#8A8687
#C0BDBE
#F9F2EC
#E3BC50
#E9CA75
#EFD799
#F4E4BC
#FAF2DE
#269647
#51AB6C
#7DC091
#A8D5B5
#D4EADA
#962826
#AB5351
#C07E7D
#D5A9A8
#EAD4D4
Botões
Primário
Secundário
Outline
Desativado
Formulários
Padrão
Focado
Preenchido
Desativado
Sombras
Padrão
Pressionado
Marca
Ilustração
ícones
Considerações finais
Este projeto foi usado como forma de praticar os métodos e técnicas de User Interface abordados no curso UI Boost, ministrado pelo professor Gilberto Prado (papaidesigner).
obrigado! :)
