Edição

02

CASESCASESdesign de interação

Olá! Este é nosso segundo ebook de cases que tem o objetivo de mostrar como é possivel 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

Somos a Catarinas Design, uma

empresa de Florianopolis que está há 4 anos no mercado e atua na área

de design de interacao com consultoria de usabilidade, pesquisa com usuarios

e tambem diretamente com solucoes digitais como a construcão de interfaces

de software, websites e aplicativos mobile, passando pela arquitetura da informacao, projeto gráfico e

codificação front-end.

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.

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.

User Experience

Design de

Interação

Arquitetura

de Informação

DesignVisual

Interface

do Usuário

Funcionalidade

Usabilidade

Estratégia

de Conteúdo

Necessidades

do Usuário

Experiência do Usuário?

por que é tão

indispensável pensar na

Conhecendo os cases práticos

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.

Case 01

Portobello

pesquisa

com usuários

e plano de ação

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.

Objetivo do projeto

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.

Passo 1

Conversa com os stakeholders

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.

Passo 2

Netnografia

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.

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.

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.

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.

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.

PersonasPasso 6

Compilação das informações

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

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.

Jornada do Usuário

JORNADA CONSUMIDOR

SE TIVER ARQUITETO

1 2 3 4 5QUERO REFORMAR PESQUISA DE

REFERÊNCIASCONTRATACÃO DE

ARQUITETO E PROJETOPROCESSO COMPRA OBRA / PÒS VENDA

Vai até lojas home centers para ver algumas ideias

Procura informações na internet pois não sabe por onde começar

Conversa com amigos / parentes que já fizeram

Dific

ulda

des

Sent

imen

tos

feliz ansiosa

Fato

s

confusa Animada empolgada desamparada

pouco dinheiro e/ou tempo

não possui experiência

Que ver os revestimentos aplicados em ambientes reais

Pesquisa nas redes sociais: facebook e instagram

Utiliza a internet para buscar referências (google e blogs)

não sei se vai combinar com minha casa

muitas opções

Faz um “briefing” para o arquiteto entender o proje-to, estilo, ver referências e delimitar o orçamento

Aprova o projeto depois de alguns ajustes

Procura arquitetos por indicação

o arquiteto não entendermeu estilo

Ao chegar em casa, entra no site da Portobello para ver mais detalhes e fotos do revestimento que gostou

Pesquisa em várias lojas Home Centers e especializadas como PB Shop

Bate foto nas lojas e envia para o marrido

decidir com tantas opções

Quando acabou, meu porcelanato estava sujo de tinta e não sabia o que fazer

Na obra o pior problema foi a sujeira e o ”quebra quebra’

o projeto não contemplar tudo que eu quero

Decide comprar na Cassol pela questão do preço ser menor e o produto ser quase igual

comprar algo bonito, prático e atemporal

canal de dúvidas da Portobello

encontrar info sobre limpeza no site

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.

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

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

Simulador de ambientes

Favoritar, curtir, compartilhar produtos (redes sociais, email, copiar o link)

Por geolocalização identificar lojas próximas ao consumidor

Ter a "minha área" no site da Portobello (favoritar imagens, últimos produtos visitados, lojas favoritas…)

Dicas e instruções de manutenção dos revestimentos para consumidor final

Criar um código de acompanhamento da compra/pedido pelo site

FAQ e espaço para dúvidas

Ter uma categoria de conteúdos sobre limpeza/conservação

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).

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...)

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"In

sight

BLO

GS

ITE

lidar com fornecedores

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.

Mapeamento de insights

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.

Objetivo do projeto

Case 02

Sistema

Mettzer

Lean UX

para startup

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.

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çõescomo 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.

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.

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 navegacao da plataforma estava coerente, quais eram os problemas de usabilidade do prototipo, confirmar as nomenclaturas utilizadas e se os ícones estavam de fácil compreensão.

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,

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.

Após a etapa de arquitetura e testes, a equipe 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.

Passo 4

Conceito gráfico, styleguide e front-end

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.

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.

O Koper é um sistema de ERP para construção civil de Santa Catarina.

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.

Objetivo do projeto

Case 03ERP para

construção civil

Koper

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.

Passo 1

Entrando no universo do cliente

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 aplicacao de entrevista: mapear quem é e como trabalha o perfil de usuário que utiliza cada um dos módulos do software e descobrir quais sao as maiores dificuldades relacionadas à tarefa de gerenciamento de cada perfil.

Passo 2

Pesquisando o comportamento e necessidades dos usuários

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.

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.

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.

@catarinasdesign

catarinasdesign.com.br

fb.com/catarinasdesign

design de interação