Embedded Files
Resumo
Neste projeto, foi realizado o redesign UI/UX da plataforma web Medical Office, que conecta profissionais de saúde sem espaço próprio a clínicas com capacidade ociosa.
O objetivo principal foi redesenhar a interface, torná-la responsiva e aprimorar a usabilidade, mantendo uma experiência familiar para os usuários já existentes.
Este processo incluiu um workshop de Lean Inception, a definição da visão do produto, a criação de personas e o mapeamento de jornadas do usuário, além de benchmarking com plataformas de reservas para otimizar a experiência.
Visão Geral
A Medical Office (nome fictício) é uma plataforma web que conecta profissionais de saúde iniciantes que não possuem espaço físico para atuação, com proprietários de consultórios que possuem espaços ociosos.
Dessa forma, busca suprir a demanda de múltiplos profissionais, viabilizando a geração de renda aos proprietários de espaços físicos através do aluguel, ao mesmo tempo que permite aos profissionais iniciantes atuarem em um espaço totalmente equipado, para pleno exercício de suas atividades.
Desafio
Redesenhar a ferramenta tornando-a mais moderna e responsiva, facilitando o uso e mantendo o feeling já adquirido pelos usuários.
Descoberta & Definição
Lean Inception
O processo de descoberta e definição foi iniciado com uma Lean Inception, que é definido como um workshop colaborativo, com o intuito de alinhar um grupo de pessoas sobre a proposta de solução a ser construída, ou seja, o Produto Mínimo Viável (MVP).
Esse workshop compreende uma sequência de diversas atividades para promover o alinhamento e definição de objetivos, estratégias e o escopo do produto. Junto a essas atividades, é feito o uso de técnicas de Design Thinking e Lean StartUp.
A Lean Inception deste produto envolveu uma sequência com as atividades ordenadas abaixo e com os seguintes participantes: 2 Designers, 2 Desenvolvedores, COO, Gerente de negócios - CTO e os 3 fundadores da Medic Office.
Matriz CSD
Utilizado para iniciar projetos, esta sigla significa Certezas, Suposições e Dúvidas. O objetivo é justamente reunir todas as certezas, suposições e dúvidas sobre o produto, para que todos os membros da equipe estejam cientes das informações disponíveis.
Visão atual da plataforma
Por se tratar de um redesign, documentamos a visão do produto atual, buscando entender os pontos de fricção e possíveis melhorias.
● Landing Page
● Busca de consultórios
● Página de Login
● Cadastro de usuários
Visão de produto
Nesta etapa são esclarecidas as características do produto a ser desenvolvido, identificando o que ele é, o que não é, o que faz e o que não faz. Isso evita ambiguidades e define os limites do escopo, trazendo clareza ao grupo.
● Visão geral do produto
● O que o produto É
● O que o produto NÃO É
● O que o produto FAZ
● O que o produto NÃO FAZ
Personas
Criamos personas que representam os diferentes perfis de usuários do produto, buscando compreender suas necessidades e características para ajudar a direcionar as decisões.
Nesta etapa, identificamos três perfis de usuário diferentes: Administrador, Locador e Locatário.
✦ Administrador
● Definição da persona
● Mapa de empatia
● Ganhos
● Dores
● Jornada do usuário
✦ Locador
● Definição da persona
● Mapa de empatia
● Ganhos
● Dores
● Jornada do usuário
✦ Locatário
● Definição da persona
● Mapa de empatia
● Ganhos
● Dores
● Jornada do usuário
Sequenciamento de funcionalidades
Após o brainstorming de funcionalidades e a filtragem destas ideias, priorizamos os cards considerando sua importância e valor para os usuários, para o negócio e a viabilidade técnica, criando uma sequência lógica para o desenvolvimento.
A partir desta etapa, atuei como designer único no projeto, tomando as decisões juntamente com a equipe de desenvolvimento e stakeholders.
Benchmarking
Esta etapa tem como objetivo melhorar os processos e a interface do produto, com base na avaliação e comparação de empresas de segmentos semelhantes. A ideia é identificar padrões de mercado que reduzam o atrito com o usuário, por exemplo.
Para este projeto, foram analisadas plataformas como Airbnb, Booking e QuintoAndar.
Fluxos de usuário
Nesta etapa, são criados os fluxogramas que guiarão as atividades na plataforma. Esses mapas indicam o caminho a ser seguido desde o ponto inicial até o objetivo final. Aqui detalhamos o número de passos necessários, a ordem em que devem ser apresentados e os elementos essenciais para a conclusão do processo.
● Exemplo de fluxo de cadastro a partir de um anúncio
● Exemplo de fluxo de cadastro a partir da tela inicial
Softwares & Ferramentas
Na criação do projeto, foram utilizadas as seguintes ferramentas:
▪️Figma para prototipagem em alta fidelidade;
▪️Adobe Photoshop para manipulação das imagens;
▪️Miro para a Lean Inception e criação dos fluxogramas;
▪️Jira para gerenciamento do projeto, handoff com desenvolvedores e documentação.
Style guide
Com base em todas as informações levantadas anteriormente e seguindo diretrizes definidas em conjunto com o time de marketing da empresa, foi construído um protótipo funcional de alta fidelidade, com o objetivo de validar os fluxos e o visual antes do início do desenvolvimento. Além disso, foi criado um style guide componentizado, pensado para facilitar tanto a criação quanto a manutenção futura da interface.
Protótipo final
O protótipo final do Medical Office foi desenvolvido considerando a responsividade, os anseios dos stakeholders, os insights obtidos a partir de um benchmarking detalhado e o atendimento às principais heurísticas de usabilidade. Com isso, chegamos a um produto sólido, com um padrão visual consistente e alinhado às necessidades do negócio.
Landing page
A landing page da plataforma foi reformulada com base nas diretrizes definidas pelos stakeholders. Durante esse processo, algumas concessões foram feitas para manter o estilo visual desejado pelos fundadores, sem comprometer os padrões estabelecidos no style guide nem os critérios essenciais de usabilidade.
● Web
● Mobile
Plataforma - Web
Algumas limitações de débito técnico presentes na plataforma impactaram diretamente no processo de redesign da interface. Por esse motivo, determinadas rotinas passaram apenas por ajustes visuais, a fim de alinhar com o novo padrão de design, enquanto outras puderam ser totalmente reconstruídas.
● Página de busca
● Página de busca e filtros
● Página de perfil
● Visualização do anúncio/consultório
● Checkout - Reserva
Cadastro de espaços / consultórios
Um dos principais problemas da versão anterior da plataforma estava no processo de cadastro de novos consultórios. O fluxo era moroso e complexo, concentrado em um único formulário extenso, repleto de campos. Além disso, a validação era feita manualmente pelos administradores da plataforma, o que gerava atrasos significativos tanto na finalização do cadastro quanto na aprovação dos anúncios.
Para resolver essa questão, implementamos um fluxo de cadastro passo a passo, mais intuitivo e visualmente agradável. Essa abordagem trouxe leveza a uma etapa naturalmente mais densa, tornando o processo mais claro e agradável para o usuário.
Abaixo, apresento alguns prints ilustrando as etapas do novo fluxo de cadastro:
Templates de Email
Foram desenvolvidos diversos templates de e-mail personalizados para os três tipos de usuários mapeados na plataforma. Com isso, todos os eventos que demandam interação com o cliente passaram a seguir um padrão de comunicação, promovendo mais confiança na mensagem e fortalecendo a identidade da marca.
Plataforma - Mobile
Grande parte da versão anterior da plataforma não era responsiva, o que comprometia significativamente a usabilidade em dispositivos móveis.
Com o redesign, essa limitação foi resolvida. Todo o layout foi projetado com foco na responsividade, garantindo uma experiência consistente e otimizada, independentemente do tamanho da tela ou do dispositivo utilizado.
● Página de busca
● Mapa de busca
● Checkout
● Perfil
Cadastro e visualização do espaço
● Cadastro de espaço
● Visualizar espaço
Handoff Design-Dev
Para garantir uma comunicação mais eficaz entre Design e Engenharia, atuamos de forma colaborativa desde as etapas iniciais de prototipação, definindo um escopo viável com base na stack tecnológica e no tempo disponível para o projeto.
Com isso, eventuais limitações técnicas eram identificadas e ajustadas ainda na fase de prototipação, garantindo que apenas as rotinas viáveis e já refinadas fossem encaminhadas para o desenvolvimento.
Esse processo colaborativo promove uma integração mais fluida entre designers e desenvolvedores desde a concepção da solução, permitindo uma comunicação mais flexível e eficiente.
Conclusão
Não tivemos acesso às métricas de uso do sistema após a implementação do novo layout e das novas funcionalidades, devido ao término do contrato de prestação de serviço. Por esse motivo, não foi possível apurar os resultados com precisão.
No entanto, a plataforma segue em funcionamento até hoje, mantendo o mesmo visual e as mecânicas aplicadas em 2021, com apenas pequenas adições ao longo do tempo. Isso reforça que o design implementado foi consistente, atendendo às necessidades da empresa sem demandar grandes alterações, mesmo com a inclusão de novas funcionalidades.
Considerar futuras modificações e expansões também faz parte do planejamento de um redesign ou de uma construção do zero, já que esse é um movimento natural para qualquer produto digital. Por isso, sempre buscamos cumprir o escopo contratado, mas com atenção especial para deixar espaço para evoluções, tratando o design como um organismo vivo e adaptável, o que o torna mais duradouro e completo.
Obrigado!
Transforme suas ideias em realidade conosco!
Entre em contato e invista em um design revolucionário para seu produto.
Projeto desenvolvido em 2021 - © Todos os direitos reservados.É proibida qualquer reprodução, total ou parcial, cópia ou divulgação deste conteúdo sem expressa autorização do autor.
Conheça outros projetos
Google Sites
Report abuse