Estudo de Caso UX/UI: Spotfix. Uma nova experiência para encontrar oficinas mecânicas e agendar serviços de manutenção
Saiba como uma solução construída com base nos princípios do Design de Interação (UI) e Experiência do Usuário (UX) busca melhorar a experiência dos donos de carro que enfrentam dificuldades ao encontrar uma oficina mecânica de qualidade e realizar agendamento de serviços para o seu automóvel.
O Desafio
É muito comum as pessoas necessitarem de manutenção no seu automóvel, mas quando precisam levá-lo até à oficina , caso não tenham uma de sua preferência, se deparam com uma infinidade de recomendações descentralizadas no Google, pedem indicações de familiares ou daquele brother bom de contatos. A solução, na maioria das vezes, sempre vem por meio do infalível método do boca-a-boca. E quando chegam à oficina, encontram o local lotado e sabe se lá quando será atendido.
Como solucionar esse problema?
No decorrer do artigo vou te explicar todo o processo que percorri para propor uma solução para esse problema.
Entendendo o Usuário
Pesquisa
A ideia nasceu após vivenciar uma experiência negativa ao levar o meu veículo à uma oficina. Diante desse cenário, me perguntei:
Se eu tive uma experiência ruim, será que outras pessoas também tiveram?
Com isso, elaborei um questionário online e compartilhei nas redes sociais com o intuito de atestar as suposições que fiz ao longo do estudo e responder as dúvidas que surgiram. Pois, achismo é achismo, e para que eu pudesse propor uma solução para as pessoas, eu teria que ter opiniões diferentes das minhas. O questionário é uma ótima ferramenta para que a empatia esteja presente em nossas soluções.
De que adianta propor uma solução sendo que não sabemos qual a real necessidade do nosso público alvo?
Resultados da pesquisa
Através da coleta de resultados vindos do questionário compartilhado foi possível entender o que as pessoas pensavam a respeito das minhas suspeitas e o resultado foi bem estimulante para que eu pudesse seguir adiante com o desafio. A pesquisa realizada obteve 50 respostas no total.
Citações diretamente dos usuários:
“ Negativa, o mecânico não descobriu o problema, depois levei em outro que descobriu mas não arrumava, por fim vendi o carro.”
“A grande maioria das vezes é negativa! Porque o carro não sai da maneira como a gente espera!! E os valores são bem elevados!!!”
”Experiência ruim e negativa. Serviço mal feito e a oficina tentou me enganar para ganhar mais dinheiro.”
” Positiva. Levei o carro em uma oficina por indicação, foi uma manutenção preventiva e o serviço foi realizado sem problemas, porém tive que ligar para marcar, ligar para entender o orçamento, acho que esse processo poderia ser simplificado (principalmente realizado de forma digital)”
“Quando cheguei em Uberlândia, eu não conhecida a cidade e não tive referências. Minha única saída foi o Google e acatar experiências de outras pessoas através de avaliação. Não tive problemas, mas mesmo assim me deixou inseguro.”
“Levei o carro da minha namorada para arrumar o freio que estava vazando óleo, fiz o orçamento e por ser um Peugeot ficou R$1100,00 reais o concerto, não concordei com o preço por entender de mecânica, fomos a um mecânico de confiança que fez o serviço por R$140,00 reais as peças e R$80,00 de mão de obra. Indicação e confiança no estabelecimento é tudo.”
“Tenho um mecânico de confiança q alem de escolher meus carros sempre foi o responsável por ditar tudo q fosse feito no veículo…neste segmento confiança é de suma importância, e que um design de produto orientado a transparência e confiança para os clientes tende a surtir efeito. Eu teria e utilizaria algo q me permitisse entender bem a mecânica que meu carro estaria.”
Persona
Confesso que no momento da criação desse artigo tinha em mente uma persona que trabalhasse como “motorista de aplicativo”. Apesar da pesquisa ter sido compartilhada em grupos de motoristas no Facebook/Whatsapp, a taxa de resposta foi bem baixa (95,65% das respostas são de pessoas que não são motoristas de aplicativo), e por isso, a persona foi descartada nesse primeiro momento. Estou ciente que a amostra total (50 respostas) é baixa para descartar esse público, e por isso, ainda serão realizadas novas pesquisas com foco nesse público.
Defini então, que a persona, no caso, Roberto Santos, é um publicitário que utiliza o seu carro para trabalhar.
Storytelling
Utilizei a ferramenta Pixar Storytelling, criada pela Pixar Animation Studios para contar uma historinha pra vocês e deixar todo mundo na mesma página para que o restante da leitura faça sentido.
Era uma vez, Roberto, um publicitário que adorava o mundo dos carros e tinha um grande apego com o seu veículo. Todos os dias ele se locomovia para o trabalho utilizando o seu carro. Um certo dia, o veículo dele estragou e ele precisou encontrar uma oficina mecânica, mas queria uma oficina que tivesse boa qualidade, fosse transparente e que oferecesse a facilidade de agendamento. Por causa disso, ele começou a pesquisar por oficinas próximas a região em que ele se encontrava. Por causa disso ele conseguiu encontrar uma oficina bem avaliada e agendou um serviço de reparo em um horário personalizado de acordo com a sua rotina diária. Até que finalmente o veículo foi consertado e ele conseguiu continuar utilizando-o para trabalhar como sempre fez.
A Jornada do usuário
Após entender o problema e fazer uma conexão com a persona criada, é hora de definir a Jornada do Usuário. Essa técnica tem o objetivo de entender de fato as dores, percepções e desejos do usuário e como ele utilizaria a solução no seu dia a dia.
Proposta de Solução
A solução encontrada para melhorar a experiência do Roberto ao buscar oficinas mecânicas e agendar serviços é disponibilizar um aplicativo chamado SpotFix. Com base na localização do usuário, o app exibirá uma lista de oficinas, a reputação de cada uma e avaliações vindas diretamente dos usuários, além de possibilitar o agendamento de serviços de reparo com total transparência do mecânico na execução do serviço (sim, será possível visualizar pelo aplicativo o que o mecânico está fazendo com o seu amado veículo).
Sketches
Essa foi a primeira etapa do processo que me ajudou a tirar a ideia da cabeça e visualizar a solução em forma de aplicativo.
Wireframe de baixa fidelidade
A próxima etapa foi desenvolver os Wireframes de baixa fidelidade. Fazendo uma alusão a Construção Civil, essa etapa representa a planta baixa da nossa solução.
Nomeação e Logo
A escolha da logo e do nome SpotFix se deu pelo fato de ser um nome simples e fácil de ser pronunciado. Usei o termo Spot para remeter a idéia de local, ponto de encontro, referência e o termo Fix para fazer referência a atividade de reparo.
Para o logo, busquei fazer uma junção entre a letra O e o ícone de localização utilizado em vários sistemas de mapas (Waze, Google Maps) para indicar que a plataforma foi criada para ser um ponto de encontro das melhores oficinas próximas ao usuário.
Styleguide
Paleta de Cores
As cores predominantes no aplicativo SpotFix são azul e um tom de preto com a intenção de transmitir aos seus usuários tecnologia e confiança, aliados a formalidade e elegância do app.
Protótipo
Após realizar todas as etapas anteriores, chegou a hora de dar forma ao app através da construção das telas e navegação. No momento da prototipação alguns elementos foram adicionados com o intuito de melhorar a navegação no app.
Acessando a tela de Log In
Ao acessar o aplicativo, o usuário realiza o Log In ou cadastro na ferramenta inserindo os seus dados pessoais. O Log In é realizado através do email do usuário.
Acessando a tela inicial / Cadastrando o veículo / Selecionando um veículo já cadastrado
Ao realizar o Log In, o usuário se depara com a tela onde são visualizados os veículos já cadastrados. Caso o usuário não tenha nenhum veículo cadastrado, ele deve clicar na opção "Cadastrar Veículo" para cadastrar um novo veículo.
A tela exibe um formulário para o usuário inserir os dados do seu veículo, como: Apelido, Marca, Modelo e Combustíveis (Gasolina/Etanol/Diesel/GNV) e a adição do veículo é feita por meio do botão “Adicionar Veículo”
Escolhendo o serviço mecânico desejado
Em seguida, o usuário é direcionado para a tela de escolha do serviço mecânico desejado. A necessidade do serviço vem primeiro que a necessidade de buscas uma oficina.
Escolhendo a oficina que executará o serviço / Realizando agendamento
Após escolher o serviço desejado, é hora de escolher qual oficina será responsável por executar o serviço. O app exibirá a localização atual do usuário e listará as oficinas próximas, como dito anteriormente, deixando evidente a sua reputação, endereço, disponibilidade e um link para visualizar as avaliações de outros usuários sobre a oficina selecionada. Através do movimento de Swipe up (deslizar para cima) no card que exibe as oficinas, será possível visualizar as demais oficinas próximas a localização atual do usuário. A partir desta tela, o usuário poderá navegar pelo menu de opções para visualizar os Atendimentos realizados, buscar oficinas e alterar as suas informações pessoais.
Ao clicar no botão “Disponível” o usuário é direcionado para a tela de definição da data e horário do agendamento.
Confirmando agendamento
Após definir a data e horário do agendamento, é necessário confirmar a marcação.
Exibindo detalhes do agendamento
Ao confirmar o agendamento, o app exibe um resumo com todos os detalhes do agendamento contendo as informações de localização, serviço e o veículo selecionado para atendimento.
Acompanhando o atendimento
Para cumprir com um requisito de transparência da solução, será possível acompanhar o atendimento que foi agendado. Informações como: “Aguardando Orçamento”, “Aguardando chegada do veículo”, ”Aguardando peça” e “Em reparo” serão exibidas para que o usuário esteja ciente de tudo o que está acontecendo com o seu veículo.
Protótipo Navegável
Para visualizar o protótipo navegável, clique aqui.
O que eu aprendi?
Venho estudando sobre UX/UI há um bom tempo, mas nunca me desafiei a elaborar uma solução do zero seguindo os processos de Design e ainda por cima, escrever um artigo contando a minha jornada.
Alguns pontos que listo como destaque de aprendizado durante a atividade:
- #pencilsbeforepixels: esse pra mim, foi o ponto de destaque de todo o processo. É fato que sempre queremos ir direto para a ferramenta para fazer aquele layout bonitão e cheio de animações, mas, antes disso, rascunhar e "despejar" a ideia no papel, é fundamental, pois o papel te dá a liberdade que a sua mente precisa para criar a solução ideal.
- Pense como o seu usuário pensaria: imagine como o seu usuário utilizaria a sua solução, e não, como você a usaria. A sua solução deve resolver um problema do seu usuário, e nem sempre, você também enfrenta o mesmo problema.
- Se atente com a teoria: É preciso entender todo o processo do Design para que a sua solução não seja somente uma solução “bonita”, e sim, uma solução que de fato vai melhorar a experiência do usuário
Quais são os próximos passos?
Quem chegou até aqui deve estar se perguntando: mas, e a interface para a oficina? Essa é a prioridade para os próximos passos:
- Elaborar uma proposta de interface para a oficina mecânica acessar a plataforma (provavelmente será um sistema web, estilo dashboard).
- Realizar entrevistas pessoais tanto com usuários quanto donos de oficinas para entender melhor as dores de cada um.
- Elaborar a interface para que o usuário possa visualizar o histórico de atendimentos realizados. Essa informação ficará atrelada ao veículo cadastrado pelo usuário.
- Analisar como serão tratados os valores dos serviços dentro do app.
- Rodar o MVP com os potenciais usuários para validar a solução.
Considerações Finais
Me senti extremamente feliz em concluir (a primeira parte do artigo) o desafio que me comprometi ao me matricular no curso Design de Interfaces do Zero ao Avançado: UI com foco em UX ministrado pelo Leandro Rezende.
Agradeço por todo o suporte dado por ele dentro do prazo que tivemos para concluir o desafio proposto. Isso só gera estímulos positivos para que eu possa ir em busca de novos desafios.
Quer saber quando esse App será lançado? Então, me segue aqui e fique ligado nas novidades 😀
Obrigado!
