CASES. design de interação. Edição

Transcrição

1 CASES design de interação Edição 02

2 Olá! Este é nosso segundo ebook de cases que tem o objetivo de mostrar como é possi vel incluir os métodos e práticas do UX design na sua empresa, startup ou projeto. Neste material apresentamos cases reais realizados na Catarinas Design para diferentes clientes, áreas de atuação e variados budgets. Veja também o nosso primeiro ebook de cases

3 Somos a Catarinas Design, uma empresa de Floriano polis que está há 4 anos no mercado e atua na área de design de interac a o com consultoria de usabilidade, pesquisa com usua rios e tambe m diretamente com soluc o es digitais como a construc ão de interfaces de software, websites e aplicativos mobile, passando pela arquitetura da informac a o, projeto gráfico e codificação front-end.

4 por que é tão indispensável pensar na Experiência do Usuário? Design Visual Design de Interação Necessidades do Usuário Arquitetura de Informação User Experience Estratégia de Conteúdo Funcionalidade Em um mercado com tantas soluções similares e com clientes cada vez mais exigentes, se tornou praticamente obrigatória a busca por alternativas que garantam o sucesso e a competitividade de um produto. Um ponto importante que pode diferenciar seu negócio é focar na satisfação e nas boas experiências de quem irá utilizar a solução. Os benefícios de investir em UX variam de acordo com o negócio. Por exemplo: se a empresa tem um site de ecommerce, as melhorias de UX podem trazer aumento nas vendas, ou se você tem um aplicativo com uma ideia inovadora, o seu indicador de sucesso pode ser a superação da barreira inicial e engajamento dos novos usuários. Usabilidade Interface do Usuário Neste ebook apresentamos 3 cases da Catarinas que possuem entrevistas e testes com usuários como insumos para resultados mais assertivos em relação às necessidades e expectativas dos usuários.

5 Conhecendo os cases práticos

6 Objetivo do projeto Portobello Case 01 pesquisa com usuários e plano de ação A Portobello é uma empresa de capital aberto integrante do Novo Mercado da Bovespa, considerada como uma das maiores empresas de revestimentos cerâmicos da América Latina. Mapear a jornada de compra offline dos clientes Portobello, a fim de integrar ferramentas e canais digitais da empresa ao longo destes pontos de contato, melhorando assim a experiência dos usuários com a marca. A Catarinas realizou neste projeto um amplo trabalho de pesquisa com clientes, arquitetos/especificadores e lojas para compreender quais pontos fazem parte de reformas ou construções além de entender quais eram etapas e pontos de contato do consumidor e especificador com a marca Portobello.

7 Passo 1 Conversa com os stakeholders O primeiro passo do projeto foi realizar entrevistas presenciais semi-estruturadas com os stakeholders de diferentes setores da empresa. O objetivo dessas conversas era compreender a visão da Portobello sobre sua comunicação digital e seu fluxo de trabalho, as hipóteses que eles já possuíam sobre o que poderia ser melhor explorado e também entender como era a relação da empresa com seus clientes. Os setores que participaram dessa etapa foram: marketing digital, marketing, telemarketing, engenharia e exportação.

8 Passo 2 Netnografia Para conhecer o perfil e comportamento dos usuários nos canais da Portobello foram feitas pesquisas netnográficas durante um determinado período, analisando redes sociais como Facebook, Instagram, além do blog e fórum oficiais da empresa. O monitoramento foi utilizado para identificar consumers insights nas redes sociais, além das tendências nos hábitos de uso nas redes sociais pelos consumidores e especificadores durante o processo de reforma, construção ou pós-venda. A linguagem utilizada pelos clientes também foi analisada de forma que servisse de referência para questões de taxonomia e expressões às quais eles estavam mais habituados.

9 Passo 3 Benchmark Nesta etapa foram pesquisadas as marcas similares e concorrentes da Portobello, com intuito de identificar os pontos positivos e negativos de cada uma e fazer um paralelo com o posicionamento da Portobello na comunicação online.

10 Passo 4 Observação nas lojas e cliente oculto A observação nas lojas serviu para mapear a jornada do consumidor durante o processo de compra e analisar questões como: se o cliente faz autoatendimento ou faz a compra com consultores/vendedores. Além das observações, realizou-se a técnica de cliente oculto, uma forma de se passar por um cliente regular para vivenciar o processo de compra. Com isso analisamos se os vendedores indicavam os canais online da Portobello (site, facebook...), como apresentam os revestimentos cerâmicos para os consumidores (fotos, catálogos...) e também quais são as principais diferenças entre o atendimento nas lojas especializadas e os Home Centers. costumar estar acompanhado de alguém quando faz as compras. quem o cliente consulta antes de efetuar uma compra. se quando vai até loja já está decidido pelo o que vai comprar.

11 Passo 5 Entrevistas em profundidade Nesta etapa foram feitas entrevistas em profundidade com consultores e vendedores da Portobello, especificadores, arquitetos e clientes além de pessoas que já conheciam a marca mas ainda não haviam comprado. Essas entrevistas serviram principalmente para conhecer melhor os perfis de usuários, aprofundar as nossas hipóteses iniciais e dos stakeholders e também para confirmar informações coletadas no campo durante as observações e demais pesquisas.

12 Passo 6 Compilação das informações Personas A compilação dos dados foi o momento mais complexo do projeto devido à grande quantidade e variedade de informações coletadas. Para esse momento foi realizada uma reunião de brainstorm com objetivo de verificar os fatos, definir os padrões, percepções e em cima disso levantar insights para o plano de ação que seria apresentado para a Portobello na entrega do projeto. Definiram-se 3 principais perfis de clientes: os consumidores, consumidores com especificador/arquiteto e o especificador em si. Para esses foram construídas 3 personas que concretizavam as características, dúvidas, expectativas e sentimentos observados durante

13

14

15

16 Jornada do Usuário Após a construção das personas, elaborou-se a jornada do usuário para cada perfil, mapeando qual era o percurso desde a decisão de fazer uma reforma, contratar ou não um arquiteto, passando pela pesquisas de ideias e referências, até a compra em si e o pós-venda dos produtos Portobello. Em cima dessas jornadas encaixamos os insights contextuais com sugestões de onde poderiam ser explorados de forma mais expressiva os recursos digitais, visando melhorar a experiência online e offline desses clientes ao longo do processo de compra e interação com a marca.

17 JORNADA CONSUMIDOR SE TIVER ARQUITETO QUERO REFORMAR PESQUISA DE REFERÊNCIAS CONTRATACÃO DE ARQUITETO E PROJETO PROCESSO COMPRA OBRA / PÒS VENDA Fatos Conversa com amigos / parentes que já fizeram Vai até lojas home centers para ver algumas ideias Procura informações na internet pois não sabe por onde começar Utiliza a internet para buscar referências (google e blogs) Que ver os revestimentos aplicados em ambientes reais Pesquisa nas redes sociais: facebook e instagram Procura arquitetos por indicação Faz um briefing para o arquiteto entender o projeto, estilo, ver referências e delimitar o orçamento Aprova o projeto depois de alguns ajustes Pesquisa em várias lojas Home Centers e especializadas como PB Shop Bate foto nas lojas e envia para o marrido Ao chegar em casa, entra no site da Portobello para ver mais detalhes e fotos do revestimento que gostou Decide comprar na Cassol pela questão do preço ser menor e o produto ser quase igual Na obra o pior problema foi a sujeira e o quebra quebra Quando acabou, meu porcelanato estava sujo de tinta e não sabia o que fazer Dificuldades não possui experiência pouco dinheiro e/ou tempo muitas opções não sei se vai combinar com minha casa o arquiteto não entender meu estilo o projeto não contemplar tudo que eu quero decidir com tantas opções comprar algo bonito, prático e atemporal canal de dúvidas da Portobello encontrar info sobre limpeza no site lidar com fornecedores Sentimentos feliz ansiosa confusa Animada empolgada desamparada Ter um espaço para o consumidor / especificador em que ele possa selecionar a etapa da jornada que ele está e o site apresentará uma seleção de conteúdos (produtos, serviços...) Ter busca de produtos e ambientes por: cômodo, cor, estilo, código do produto, topseller com sugestões de combinações de revestimentos. Ter opções de filtro por: topseller, lançamentos, promoções, range de preço... Explorar mais as fotos dos produtos ambientados no site. Também utilizar fotos de clientes e do especificador. Permitir que o especificador faça download do pattern do produto para software de criação de projetos "Briefing virtual" onde a PB assume o papel de arquiteto na vida pessoa (guia por onde começar: definição do objetivo e características da obra, tamanho do ambiente, estilo, budget). Informações técnicas dos produtos!diferenciadas para cada público No caso de consumidores, utilizar linguagem mais lúdica e auto explicativa como ícones. Diferenciar produtos exclusivos da PB Shop e produtos Home Center Ter na página de produtos um Combina com para dar sugestões de combinações de revestimentos independente da coleção Simulação de rejuntes Dicas e instruções de manutenção dos revesti mentos para consumidor final Criar um código de acompanhamento da compra/pedido pelo site FAQ e espaço para dúvidas Simulador de ambientes Favoritar, curtir, compartilhar produtos (redes sociais, , copiar o link) Por geolocalização identificar lojas próximas ao consumidor Insight BLOG SITE Espaço para dúvidas e perguntas Espaço com postagens do blog, instruções, processo e chamada para o briefing direcionado para cliente de "primeira viagem" Utilizar uma linguagem e termos de fácil compreensão direcionado para consumidores com poucos conhecimentos técnicos Criar sempre referência/link do produto que for citado com a página do produto no site Criar layout do blog semelhante a uma revista digital com categorias variadas, podendo ter colunistas Linkar no final do post conteúdos relacionados (board do pinterest, ebooks..) Padronizar a largura das imagens utilizadas Ter a "minha área" no site da Portobello (favoritar imagens, últimos produtos visitados, lojas favoritas ) Ter uma categoria de conteúdos sobre limpeza/conservação

18 Mapeamento de insights Além disso foi feita uma compilação de todos os insights obtidos ao longo do projeto de forma que pudesse ser filtrado/visualizado por perfil, etapa da jornada do usuário ou canal, de forma a facilitar a implementação.

19 Objetivo do projeto Sistema Mettzer Case 02 Lean UX para startup O Mettzer é uma startup de Santa Catarina que por meio de um editor de texto inteligente auxilia o aluno com a configuração automática de trabalhos dentro das normas da ABNT. O cliente procurou a Catarinas com o objetivo de melhorar a usabilidade do sistema atual e traduzir um novo posicionamento do produto no mercado com uma versão muito mais intuitiva, fácil e atrativa. O trabalho da Catarinas foi refazer o MVP da plataforma passando por etapas de pesquisa com usuários, arquitetura da informação e prototipação, validação com teste de usabilidade, criação do novo conceito gráfico, elaboração de um styleguide e codificação front-end.

20 Passo 1 Conversa com o cliente Fizemos uma reunião de kickoff com a equipe do Mettzer onde mapeamos dores, expectativas, informações e conhecimentos vindos da visão dos stakeholders sobre o contexto do projeto. Esse momento de imersão é muito importante pois conseguimos entender o projeto na visão do cliente e dos feedbacks que ele já recebeu na fase de validação. Aproveitar o know-how do cliente é de suma importância para conhecer as motivações e objetivos dele e assim elaborar as questões e hipóteses iniciais para as pesquisas. Vale lembrar que essa conversa com os stakeholders do projeto são geralmente ideias e suposições, e não necessariamente servem como validação do que irá funcionar ou não. Mesmo após essa conversa fazer validação com os usuários que irão realmente utilizar o produto é fundamental.

21 Passo 2 Entrevistas com usuários Feito o levantamento inicial de informações, iniciamos o plano de pesquisa, onde foram definidos os objetivos a serem validados nas entrevistas com dois perfis de usuários: alunos e professores. Após as entrevistas com alunos e professores, organizamos as informações como já explicamos aqui. Com as pesquisas levantamos informações sobre os diferentes fluxos ao elaborar um TCC, as principais dificuldades, e com isso destacamos quais os principais pontos da jornada do usuário que a plataforma poderia auxiliar. Também foram validadas a relevância de funcionalidades atuais e insights para novas funcionalidades. Com os dados compilados em mãos foi feita uma nova reunião com a equipe do Mettzer. O objetivo da reunião era apresentar o que coletamos em campo e escolher com o cliente quais novas funcionalidades iriam ser implementadas nessa primeira versão. Com a equipe e cliente trabalhando em conjunto, o processo ficou muito mais ágil.

22 Passo 3 Arquitetura da informação e testes de usabilidade Após o alinhamento, a equipe iniciou o trabalho de protótipos de alta fidelidade para realizar testes de usabilidade. Para o teste de usabilidade foram recrutados estudantes que estavam realizando o TCC. O objetivo do teste de usabilidade era verificar se o fluxo de navegac a o da plataforma estava coerente, quais eram os problemas de usabilidade do proto tipo, confirmar as nomenclaturas utilizadas e se os ícones estavam de fácil compreensão. mas para o Mettzer pensamos em uma barra de ferramenta inline (como a do Medium) como algo que pudesse facilitar a inserção de citações no texto e edições gerais. O resultado foi positivo e todos usuários que testamos acharam a barra inline muito fácil e intuitiva, além de considerarem como um ponto forte do editor. Além do mais, tínhamos como hipótese uma barra que poderia facilitar o processo de edição. Geralmente, editores de texto como Word e Google docs possuem a barra de ferramenta no topo,

23 Passo 4 Conceito gráfico, styleguide e front-end Após a etapa de arquitetura e testes, a equipe Para este projeto, e considerando ser apenas um MVP, optamos em conjunto, Mettzer e Catarinas, desenvolver um styleguide, que nada mais é que um guia de estilo de elementos e componentes gráficos (estáticos e interativos), para uma aplicação e expansão futura da plataforma. de projetos se reuniu para mais uma sessão de brainstorm, visando os ajustes que deveriam ser feitos com base em algumas dificuldades levantadas pelos usuários, como por exemplo, uma definição melhor de ícones, uma navegação mais eficaz em determinado ponto da plataforma, entre outras. Com todos os wireframes ajustados, finalizados e aprovados pelo cliente, partiu-se então para o conceito gráfico, ou seja, de 50 tons de cinza dos wireframes, chegou o tão aguardado momento de dar a cara para aquilo que o cliente idealizou.

24 Criamos o conceito gráfico da tela principal, que serviu para aprovação do cliente e também para que ele conseguisse visualizar o todo. Com todos os wireframes prontos, o conceito aprovado e o styleguide completo o próximo passo foi passar o trabalho para o front-end. Para a parte do front, foi muito importante os alinhamentos com a etapa anterior, principalmente por conta da criação do styleguide, para que o desenvolvimento se torne mais fácil e intuitivo, visto que o projeto em si é bastante complexo, e levar para a plataforma TODAS as normas da ABNT não seria nada fácil. Este case foi muito bacana pois conseguimos trabalhar bem próximo do cliente num processo colaborativo e muito ágil. Hoje, o projeto encontra-se em fase de implementação.

25 Koper Case 03 ERP para construção civil O Koper é um sistema de ERP para construção civil de Santa Catarina. Objetivo do projeto O trabalho da Catarinas foi refazer o sistema desde a pesquisa com usuários para validação das funcionalidades, exploração e ideação em conjunto com os clientes até a arquitetura de informação e criação do conceito gráfico.

26 Passo 1 Entrando no universo do cliente Sempre falamos que um dos primeiros passos em nossos projetos é a chamada imersão. Por aqui ninguém sai de casa para trabalhar com design de interação sem passar por isso. O corpo de stakeholders do Koper era composto por dois desenvolvedores e um engenheiro, dono de uma construtora e principal entendedor da segmentação do produto. Nesses primeiros contatos nosso papel era de fato imergir na visão desse cliente sobre a proposta de produto que estavam para lançar no mercado, verificar quais eram os objetivos, motivações e de onde havia surgido a ideia.

27 Passo 2 Pesquisando o comportamento e necessidades dos usuários Após o start e levantamento inicial de informações, partimos para o plano de pesquisa, onde foram definidos os objetivos a serem validados com aplicac a o de entrevista: mapear quem é e como trabalha o perfil de usuário que utiliza cada um dos módulos do software e descobrir quais sa o as maiores dificuldades relacionadas à tarefa de gerenciamento de cada perfil.

28 Passo 3 Entender em quais cenários estes usuários utilizam o software Foram entrevistados engenheiros civis, administradores de empresa e arquitetos, todos profissionais que atuavam diretamente em partes do fluxo de trabalho relacionado à construção civil. Era um ponto essencial para nós entendermos o fluxo de trabalho da área de construção civil (principalmente por ser um universo que não tínhamos a menor noção de como funciona) e quais os pontos da jornada e respectivas tarefas do usuário o sistema iria auxiliar, para tentar aproximar ao máximo a experiência da vida real através de interações que fizessem referência a essa convenção e expectativa já estabelecida. A partir dos levantamentos de informações com esses usuários, criamos as personas do projeto e as jornadas dessas personas, e dessas informações vieram os insights e prioridades sobre como as funcionalidades no sistema deveriam se comportar.

29 Passo 4 Construindo os wireframes e protótipos Após compartilharmos os resultados das pesquisas com os stakeholders e alinharmos as necessidades e prioridades identificadas nas pesquisas, partimos para a etapa de ideação e construção das telas. Os desenvolvedores tiveram contribuição significativa na construção dos wireframes e esboços, em que trabalhamos em um processo de muita cocriação multidisciplinar. Com algumas reuniões presenciais fizemos um grande processo de brainstorm coletivo, alinhando as limitações técnicas do sistema e as características de integrações relacionadas à logística e aos anseios dos usuários obtidos em campo.

30 Passo 5 Projeto gráfico e interações Na etapa de conceito gráfico, exploramos uma linguagem visual para refletir a credibilidade e sobriedade que mais se adequava às referências que os usuários do ramo estão acostumados em suas ferramentas de trabalho. Foram explorados diversos recursos visuais de rápida compreensão como gráficos, avisos e destaque de cores para informar rapidamente mensagens importantes facilitando a leitura dinâmica. No que diz respeito ao projeto da interatividade do sistema, buscou-se trabalhar em cima de tendências de interação do material design, propondo sempre usos simplificados e procurando uma boa diversidade de recursos do HTML 5. Neste case, a pesquisa com usuários fez toda diferença ainda mais pelo mercado da construção civil ser novo para a equipe. Com a ida a campo e entrevista, foi possível fazer uma interface muito mais coerente com o contexto dos usuários do que se o projeto tivesse sido baseado nas hipóteses do cliente, dos desenvolvedores ou dos designers.

31 design de interação catarinasdesign.com.br