Care Plus | UX Case parte II
Desenhando uma experiência moderna e intuitiva para diferentes perfis de usuário
Essa é a segunda parte do estudo de caso que a nossa equipe preparou sobre o Projeto Care Plus. Se você perdeu a primeira, clica no link abaixo e confira, antes de seguir.
Bom, agora que você já leu, viu que explicamos o início e o meio do nosso UX Process no Projeto Care Plus, que envolve pesquisas, definição de personas, de jornada, até chegar à arquitetura da informação - que é a forma como organizamos cada parte (ou grupo) do projeto.
E agora vamos para a parte final. Com a arquitetura pronta, a gente começou a dar cara ao produto, criando os protótipos.
Care Plus | UX Case parte II
1. Wireframes
O wireframe é o "esqueleto" de um projeto digital. Ele tem o objetivo de planejar a UX, mostrando a disposição dos principais elementos, sem considerar as cores, tipografia ou sombras, por exemplo.
Nossa equipe desenhou o funcionamento ideal para o produto, com todas as informações e interações que ele deveria ter. Traçamos o caminho que cada uma das nossas quatro personas devia percorrer para alcançar seu objetivo no site.
Inicialmente ficou como na imagem abaixo, um rascunho do que ainda estava por vir, sem cores, textos ou imagens definidas.
Quer ver mais de perto? Tudo bem, a gente aproximou pra você. Obviamente com a resolução da imagem diminuída para preservar as informações do cliente.
Você pode ler mais sobre wireframes nesse artigo que fala sobre os tipos de protótipo.
2. Mood Boards
O Mood Board é um documento que usamos para reunir as referências visuais do que se espera encontrar no site.
Um designer experiente se inspira não apenas em trabalhos de outros designers, mas também explora áreas relacionadas como gráficos, fotografias e revistas de moda.
Aqui na Neotix, todos os projetos são criados a partir de pesquisas que definem um estilo exclusivo, não desenvolvemos projetos a partir de templates prontos ou copiando a linha gráfica de uma referência. Foi o que fizemos no projeto Care Plus.
O resultado ficou mais ou menos assim:
3. Protótipos de alta fidelidade
Nesta fase, a gente começou a desenhar a interface do usuário, definindo a tipografia, cores, sombras e conteúdo, para criar um protótipo o mais próximo possível do produto final.
O protótipo de alta fidelidade é muito parecido com o que o site será no final, podendo inclusive, ser navegável. A gente usa essa ferramenta por duas razões principais: a primeira é para que a equipe consiga validar as hipóteses, para saber se o que tinham em mente vai funcionar na prática. A segunda é para conseguir apresentar pro cliente com clareza, já que é muito mais fácil pra ele, avaliar um projeto similar ao real.
Além disso, com esse protótipo, a gente pode fazer as alterações antes do produto ser desenvolvido, isso reduz tempo de produção e custos.
Veja a seguir o protótipo do Projeto Care Plus:
A gente adorou compartilhar essa experiência toda com você. O resultado final, você confere aqui:
E para ter um projeto tão completo quanto esse desenvolvido para sua marca, entre em contato com a gente.
