Diaristando App – Conectando Diaristas e clientes
- Maria Alice Rangel
- 10 de fev.
- 8 min de leitura
⚠️ Se prefere uma abordagem mais visual, preparei uma apresentação no Behance que destaca as principais telas e processos do projeto. Depois, volte aqui para explorar o processo detalhado por trás das decisões de design! Veja no Behance: clique aqui⚠️
Sobre
Diaristando é um projeto voluntário criado para conectar diaristas e clientes de forma rápida, eficiente e segura, com o objetivo de proporcionar uma experiência simples e intuitiva para ambos. A solução foi desenhada para facilitar o acesso a profissionais de confiança para serviços de limpeza doméstica, priorizando a confiança e a agilidade.
Fazendo parte de uma equipe multidisciplinar, atuei como UX/UI Designer durante todas as fases do projeto, do Discovery à entrega do protótipo final, utilizando a metodologia Double Diamond. Para facilitar a colaboração e o acompanhamento do progresso, foram utilizadas as seguintes ferramentas:
ClickUp para gerenciamento de tarefas no ambiente Scrum.
Google Meet para cerimônias Scrum (dailys, retros, reviews, entre outros).
FigJam para ideação e mapeamento das necessidades dos usuários durante a fase de Discovery.
Google Forms para realizar pesquisas e entrevistas com usuários.
Figma para criar wireframes, protótipos interativos e validar soluções com stakeholders.
Processo de Design
No desenvolvimento deste projeto, segui um processo estruturado baseado na metodologia Double Diamond, que inclui as fases de Descoberta, Definição, Desenvolvimento e Entrega. Durante essas etapas, trabalhei de forma colaborativa com os times de Produto, Scrum Master e a Stakeholder para garantir que as necessidades dos usuários fossem atendidas e que o design fosse ajustado para proporcionar uma experiência intuitiva e eficiente.
Abaixo, você pode conferir as principais atividades realizadas em cada fase do processo de design, bem como o uso de ferramentas como FigJam, Figma e ClickUp, que foram essenciais para organizar, prototipar e validar as soluções propostas.
Etapas
Descoberta
Utilizamos o FigJam em colaboração com o time de produto e Scrum Master para brainstorm e organização das descobertas;
Desenvolvemos a Matriz CSD, Análise Competitiva e Análise SWOT para mapear o mercado, identificar oportunidades e desafios;
Criamos um formulário de entrevistas e pesquisamos soluções existentes para coletar feedback sobre as dores e necessidades de clientes e diaristas;
Realizamos uma análise de mercado e concorrentes para identificar melhores práticas e definir diferenciais do produto;
Identificamos as principais dores dos usuários e, em conjunto, desenvolvemos cinco personas detalhadas que guiaram as decisões de design;
Desenvolvemos o mapa de empatia para aprofundar a compreensão das necessidades e expectativas dos usuários.
Definição
A partir das pesquisas, definimos os principais problemas a serem resolvidos: a falta de confiabilidade e a dificuldade em conectar clientes com diaristas de forma segura.
Mapeamos a jornada do usuário em colaboração com o time de produto e o Scrum Master para identificar pontos críticos.
Realizamos um brainstorming e utilizamos a Matriz de Impacto x Esforço para priorizar as funcionalidades do aplicativo.
Durante um impasse sobre as User Stories e a comunicação com os usuários, desenvolvi um Manual de Tom e Voz que após apresentá-lo ao time de produto, ele foi incorporado ao projeto.
Desenvolvimento
Junto ao time de produto, criamos a arquitetura da informação e o fluxograma do aplicativo.
Criei wireframes e protótipos interativos no Figma para testar a usabilidade e a navegação da plataforma.
Realizei testes de usabilidade utilizando ferramentas de mapas de calor, ajustando o design com base no feedback para otimizar a experiência do usuário.
Colaborei com a equipe no ClickUp para gerenciar tarefas e User Stories, além de participar de cerimônias Scrum via Google Meet, garantindo progresso contínuo e melhorias ágeis.
Desenvolvi um Design System e uma Identidade Visual, alinhando a comunicação visual e textual à proposta de valor do produto.
Entrega
Após a validação dos Stakeholders, finalizei o design visual e entreguei o protótipo de alta fidelidade em uma documentação de handoff no Figma para os desenvolvedores, incluindo telas, variações de erro, fluxos e animações.
Apoiei os times de desenvolvimento, ajudando a resolver impedimentos e refinando telas para reduzir a complexidade das tarefas das sprints atuais e futuras.
Telas desenvolvidas
Tela de início
A primeira tela do aplicativo para usuários não logados é a tela de início. Originalmente, ela apresentava diversas informações, mas, após uma repriorização do projeto, juntamente com o time de produto decidimos simplificá-la para tornar a experiência mais intuitiva. Optamos por apresentar apenas os elementos essenciais, comunicando como o aplicativo funciona em quatro passos visuais claros, organizados de forma que o usuário possa compreender rapidamente o fluxo de uso.
Além disso, a tela inclui dois botões interativos acompanhados de um GIF animado de limpeza, trazendo um toque visual atrativo e funcional. Cada botão foi projetado para exibir um overlay informativo ao ser clicado:
O primeiro mostra o que geralmente está incluso em uma limpeza padrão.
O segundo exibe os serviços relacionados a uma limpeza pesada.
Essa abordagem foi pensada para fornecer clareza sobre os serviços oferecidos, ajudando o usuário a tomar decisões de forma prática e imediata.
Usuários não logados possuem acesso limitado ao menu de busca, permitindo uma navegação inicial no aplicativo. No entanto, ao tentarem acessar o menu de perfil ou o menu de serviços, um overlay de login é exibido, incentivando o cadastro ou login para liberar funcionalidades completas. Essa decisão foi tomada para equilibrar a experiência de exploração do aplicativo com a necessidade de converter visitantes em usuários registrados.
Menu Busca
Uma das funcionalidades do Diaristando permite que usuários não cadastrados realizem uma busca limitada para verificar se há serviços disponíveis na região desejada. Isso possibilita que eles conheçam o aplicativo antes de se registrarem, ajudando a decidir se a plataforma atende às suas necessidades.
Fluxo da busca:
Seleção de Estado e Cidade – Inicialmente, o botão de busca está inativo. Após a seleção da localização, ele recebe um fill azul, indicando que a ação está disponível.
Mini Onboarding – Ao avançar, o usuário é apresentado a uma tela explicativa, onde pode escolher entre visualizar clientes ou diaristas.
Resultados da busca:
Clientes: São exibidos três perfis contendo nome, avaliação, tipo de residência, tipo de limpeza esperada e recorrência do serviço. Essa abordagem foi pensada para um modelo inicial onde toda a comunicação entre diaristas e clientes ocorreria dentro do app. No entanto, após uma reunião com a Stakeholder e o time de produto, houve uma repriorização do escopo. A experiência foi simplificada para focar na conexão entre diaristas e clientes, reduzindo a complexidade do desenvolvimento inicial.
Diaristas: São exibidos três perfis, apresentando apenas nome e avaliação, garantindo uma experiência objetiva e direta para quem busca serviços.
Quando o usuário seleciona um dos perfis, um overlay de login/criação de conta é exibido, incentivando o cadastro/login para prosseguir. Essa abordagem equilibra a experiência do usuário com a viabilidade técnica, permitindo que novos usuários explorem a plataforma antes de se comprometerem com o cadastro.
Fluxo de Cadastro e Login Social
Uma das exigências da Stakeholder foi a implementação do login social via Google, garantindo praticidade e acessibilidade para os usuários.
Após o login, o usuário é redirecionado para uma tela de seleção, onde pode escolher entre oferecer serviços como diarista ou contratar serviços. Inicialmente, o botão de confirmação aparece desativado, mas, ao selecionar uma das opções, ele recebe um fill azul, permitindo a continuidade do fluxo.
Cadastro e Decisões de Design
Na tela de informações pessoais, o aplicativo já preenche automaticamente o nome e e-mail do usuário com os dados extraídos do Google. No entanto, ele precisa inserir manualmente:
✅ Número de telefone
✅ Data de nascimento
✅ Gênero
✅ CEP
A obrigatoriedade da opção de gênero foi uma decisão debatida pela equipe. Compreendemos que algumas pessoas se sentem mais confortáveis ao receber um profissional de um gênero específico em suas casas. Para garantir maior segurança aos usuários, optamos por tornar essa informação obrigatória.
Redirecionamento e Primeira Experiência
Após concluir o cadastro, o usuário é direcionado ao menu inicial, onde pode visualizar serviços já agendados ou, caso ainda não tenha nenhum, um banner incentivando a busca e o agendamento de novos serviços.
Busca Avançada para Usuários Logados
Quando o usuário já está logado, ele pode realizar uma busca completa, exibindo todos os serviços disponíveis na região.
Ao clicar em um dos nomes listados, ele é direcionado para o perfil do cliente, onde pode visualizar informações iniciais sobre o serviço. Para facilitar a comunicação, optamos por integrar um botão de contato via WhatsApp, uma decisão tomada em conjunto pela equipe de produto e a Stakeholder para simplificar a interação entre diaristas e clientes.
Adaptação para Nomes Longos
Dentro dessa user story, a equipe de produto definiu um limite de 56 caracteres para os nomes dos usuários. Para garantir uma experiência consistente, desenvolvemos um layout que contempla quebras de linha e ajustes de tamanho, permitindo que tanto nomes curtos quanto longos sejam exibidos corretamente sem comprometer a usabilidade. Essa abordagem ajudou a evitar problemas de legibilidade e manteve a consistência do design em diferentes cenários.
Confirmação de Agendamento e Registro de Serviço
Duas horas após o usuário clicar em "Conversar pelo WhatsApp", o sistema envia uma notificação perguntando se o agendamento foi realizado. Caso a resposta seja positiva, o usuário pode preencher os detalhes do serviço, incluindo:
Data e hora do serviço (obrigatório)
Tipo de serviço (obrigatório)
Observações adicionais (opcional)
Valor a receber (opcional)
A opção de inserir o valor do serviço foi considerada estratégica pela equipe de produto, pois, em versões futuras do aplicativo, essa informação poderá ser utilizada para oferecer serviços diretamente na plataforma, garantindo uma média de preço justa para ambas as partes.
Mudanças na Estrutura do Cadastro
Antes da repriorização do escopo, essa tela importaria automaticamente os dados do cliente, como nome e endereço. No entanto, com a decisão de simplificar o desenvolvimento, essa funcionalidade foi removida da implementação pelos times de front e back-end.
Gerenciamento de Serviços
Após registrar as informações do serviço, o usuário é redirecionado para o menu de serviços, onde pode:
Visualizar serviços agendados
Editar informações registradas
Cancelar o serviço
Essa solução mantém a experiência do usuário fluida, enquanto permite que o aplicativo evolua gradativamente, alinhando a usabilidade com a estratégia de produto.
Fluxo de Cancelamento
Ao cancelar um serviço, o usuário deve inserir o motivo do cancelamento. Essa informação pode ser utilizada para, no futuro, notificar a outra parte interessada, garantindo transparência e comunicação eficiente entre clientes e diaristas.
Após a confirmação do cancelamento:
O card do serviço é movido para a seção "Cancelados", permitindo um histórico organizado das ações. Mantendo o controle dos serviços registrados e possibilitando futuras melhorias na experiência do usuário.
Fluxo de Avaliação de Serviço
12 horas após o horário agendado, o sistema envia uma notificação solicitando a avaliação do serviço, garantindo um feedback contínuo sobre a experiência dos usuários.
Na tela de avaliação, o usuário pode:
Avaliar de 0 a 5 estrelas
Adicionar um comentário opcional
Gestão do Status do Serviço
Após o envio da avaliação:
O card do serviço é movido de "Agendados" para "Realizados".
Caso o serviço não tenha sido concluído, há um botão "Serviço não realizado" logo abaixo do botão de envio. Ao selecioná-lo:
O card do serviço é transferido para a seção "Não Realizados".
Essa funcionalidade foi projetada para abranger todas as possibilidades, já que, no modelo atual, a comunicação entre diaristas e clientes ocorre fora do aplicativo.
Vídeo do aplicativo
O que aprendi nesse projeto
Esse projeto foi uma grande oportunidade de crescimento, especialmente no aprimoramento das minhas habilidades em UI Design. Ao comparar as primeiras versões das telas com os designs finais, é possível notar uma grande evolução na composição visual, na hierarquia da informação e na usabilidade. Cada iteração foi baseada em testes e feedbacks, tornando o produto mais intuitivo e eficiente.
Além disso, trabalhar em uma equipe multidisciplinar dentro da metodologia Scrum me ensinou muito sobre colaboração, flexibilidade e comunicação. Participar das dailys, refinamentos e retrospectivas me ajudou a entender melhor como alinhar design, produto e desenvolvimento para garantir entregas mais assertivas.
Esse projeto reforçou a importância do design centrado no usuário e como pequenas decisões impactam diretamente a experiência final. Foi um desafio incrível que me permitiu evoluir tanto tecnicamente quanto profissionalmente!