52
Neste ciclo os rituais de colaboração como o brainstorm utilizando o quadro de vidro representado pela figura 21 ganharam intensidade, o que melhorou muito o entendimento mútuo do time em relação à solução proposta. A aposta estratégica do Pudim foi: apresentar a interface de criação de publicações o quanto antes, a redução da fricção nas tarefas de criar conteúdo e agendar publicações, a confiança proporcionada pela pré-visualização de como ficariam as publicações nas redes sociais de destino, a correção dos problemas de usabilidade e a promoção eficaz destas novas funcionalidades aumentariam o engajamento dos clientes com a funcionalidade Postagens em Mídias Sociais. Com isto os usuários criariam mais conteúdo e assim alcançariam mais sucesso em suas estratégias de geração de tráfego nos canais sociais do marketing digital.
Fonte: Acervo pessoal.
Ao propor uma maneira de estimular a tomada de decisão consciente do usuário Wendel (2013) sugere identificar na interface a existência de uma pista clara para que o usuário faça a opção pela ação. Além desta pista Wendel sugere que se identifique se existe uma resposta satisfatória imediata ao final de cada passo relacionado à ação. Esta abordagem busca a identificação de potenciais ciclos de hábito, que potencializem o consumo do produto desenvolvido.
A Entusiasta em Marketing Digital geralmente possui algumas funções paralelas e por isto tem pouco tempo. Ele é criativo, tem Figura 21 - Esboço de uma proposta de interface em quadro de vidro,
iniciativa e quer alcançar os primeiros resultados de marketing digital com seus esforços. Uma série de tarefas competem pela atenção deste usuário e uma vez que na sua jornada ela optou por acessar a funcionalidade Postagens em Mídias Sociais seria importante apresentar uma forte pista para a realização desta ação. A aposta do time foi que a pista mais evidente seria o próprio o componente de criação de conteúdo, conforme fluxo apresentado na figura 22. O esquema apresenta o caminho mais curto para chegar a esta pista: (1) a navegação primária do RD Station e (2) a tela inicial da funcionalidade Postagens em Mídias Sociais com o campo de criação de conteúdo posicionado à esquerda e lista de publicações agendadas posicionada à direita.
Fonte: Acervo pessoal.
Em contraponto, a interface original apresentava a lista de publicações e um botão primário chamando para a ação de criar nova publicação, esta abordagem exige a tomada de decisão consciente do usuário. Esta interação é demonstrada pelo esquema apresentado na figura 23.
Figura 22 - No primeiro passo o usuário opta por acessar a funcionalidade, no segundo passo é apresentado ao campo de criação de conteúdo à esquerda e à lista de publicações à direita.
54
Fonte: Acervo Pessoal.
Para aumentar a confiança do usuário a hipótese de solução trabalhada foi apresentar uma pré visualização de como ficaria o conteúdo publicado na rede social de destino. Este feedback visual daria ao usuário a segurança de que o conteúdo seria postado da maneira que ele espera. Para o desenvolvimento desta solução conduziu-se uma ampla investigação dos principais cenários de publicação de conteúdo Figura 23 - Esquema representando o caminho para a interface anterior de criação de conteúdo. As etapas apresentadas no esquema são (1) Optar por acessar a funcionalidade Postagens em Mídias Sociais na navegação primária do RD Station (2) ver a lista de publicações agendadas e clicar em um botão para criar uma nova publicação, (3) produzir o conteúdo e agendar a publicação (4) visualizar a nova publicação agendada na lista de publicações.
nas redes sociais integradas ao RD Station. Apresento a seguir um destes cenários para exemplificar a complexidade do problema abordado.
Quando a URL de uma página web fosse compartilhada em uma publicação no Facebook, a rede social analisaria o cabeçalho desta página em busca de meta tags escritas no padrão Open Graph. Utilizando deste padrão, criado pelo Facebook, seria possível compartilhar um web site como um objeto rico (em detalhes) quando compartilhado no Facebook e em outras redes que utilizassem o padrão. Uma das propriedades passíveis de configuração seria a imagem que ilustra o conteúdo do web site compartilhado. Esta propriedade impacta profundamente na taxa de cliques dos usuários do Facebook, uma vez que objetos com imagens grandes são muito mais clicadas que imagens com conteúdo pequeno.
Para que um link fosse renderizado com a imagem pequena, a imagem especificada deveria possuir entre 200 x 200 pixels e 600 x 315 pixels. Neste caso o objeto Open Graph renderizaria o objeto como apresentado na figura 24. Se a imagem possuísse mais que 600 x 315 pixels o objeto seria renderizado com a imagem grande.
Fonte: Acervo pessoal.
Figura 24 - Compartilhamento de publicação com imagem pequena no Facebook.
56
Fonte: Acervo pessoal.
O esforço de engenharia necessário para a solução foi replicar a lógica e o estilo visual dos cenários mais comuns de compartilhamento de conteúdo nas redes sociais na funcionalidade Postagens em Mídias Sociais. O padrão de interação definido para este comportamento é o apresentado no esquema da figura 26.
Fonte: Acervo pessoal.
Ao selecionar uma rede social de destino, a interface de pré- visualização seria apresentada ao usuário e atualizada em tempo real conforme o usuário produzisse o conteúdo que desejasse publicar. Para voltar à lista de publicações agendadas bastaria que o usuário desmarcasse todas as redes sociais de destino.
Os botões para seleção da rede social na qual o conteúdo seria publicado apresentavam os problemas de affordance identificados na análise de usabilidade. A solução proposta foi alterar o componente de ativação da rede social de destino para um componente liga-desliga cujo comportamento é explicado no esquema apresentado na figura 27. Figura 26 - Esquema representando a interação
de pré-visualização das publicações.
Figura 27 - (1) Movimento para a direita ativa a rede social e (2) movimento para esquerda desativar.
58
Fonte: Acervo pessoal.
Para reforçar o entendimento do estado do componente, quando uma rede social estivesse desativada o componente seria exibido na cor cinza e quando a rede social estivesse ativada o componente seria exibido na cor primária da marca da rede social em questão.
Fonte: Arquivos da Resultados Digitais.
O comportamento da funcionalidade de encurtamento de URL foi simplificado. A solução proposta seria que, por padrão, todos os links adicionados ao conteúdo seriam encurtados. Caso o usuário assim desejasse poderia desativar o encurtamento de URL. No entanto descobriram-se restrições tecnológicas e de negócio para esta solução.
Na ocasião do projeto a funcionalidade de encurtamento dependia de uma integração com um produto terceiro. Percebeu-se pela análise do uso da funcionalidade que encurtar por padrão todas as URLs adicionadas mais que duplicaria a requisição deste serviço o que implicaria custos adicionais para a organização. Outras alternativas demandariam esforços de engenharia, o que aumentaria o escopo do projeto. Optou-se por simplesmente trazer por padrão o encurtamento desabilitado, mantendo a melhoria de usabilidade sem extrapolar o escopo e os custos e postergando a resolução deste problema quando fosse necessário. Reagir just-in-time é um dos preceitos da gestão Lean. O esquema apresentado na figura 29 demonstra a proposta de interação: com o campo do tipo checkbox desativado (1) as URLs presentes no Figura 28 - Além do movimento horizontal, no estado inativo (1) o
componente aparece em tons de cinza e no estado ativo (2) com as cores da rede social em questão.
conteúdo não serão encurtadas e com o campo ativado (2) as URLs presentes serão encurtadas.
Fonte: Arquivo pessoal.
O contador de caracteres do conteúdo apresentava problemas de usabilidade por não fornecer feedback quando se extrapolava o limite de caracteres para o Facebook e o LinkedIn. A proposta de solução foi prevenir o erro ao limitar a quantidade de caracteres do campo conteúdo pelo menor limite das redes selecionadas, ou seja: quando o Twitter estivesse selecionado o limite seria de 140 caracteres, quando o LinkedIn estivesse selecionado mas o Twitter não o limite seria de 600 caracteres, se apenas o Facebook estivesse selecionado o limite seria de 63206 caracteres. Além desta correção se adicionou ao contador um ícone representando qual rede social limitaria a quantidade de caracteres do conteúdo. Se o usuário criasse o conteúdo e depois selecionasse uma rede social com limite de caracteres inferior à quantidade de caracteres presente no conteúdo o agendamento seria bloqueado e o contador de caracteres apresentaria o número de caracteres extrapolado em vermelho com o sinal de negativo. O comportamento do último caso exposto é exemplificado na figura 30.
60
Fonte: Arquivos da Resultados Digitais.
Visando melhorar a experiência do usuário o agendamento de publicações recebeu duas novas pré configurações. São elas: Enviar amanhã de manhã e Enviar amanhã de tarde. Ao selecionar “Enviar amanhã de manhã” o conteúdo seria agendado para o dia seguinte em um horário entre as 09h02 e 09h17 da manhã. Ao selecionar “Enviar amanhã de tarde” a publicação seria agendada para o dia seguinte entre as 15h02 e 15h17 da tarde. Estes horários são baseados em boas práticas levantadas pelo Product Manager. O ideal seria implementar uma solução de engenharia que identificasse o histórico de publicações e a atividade das pessoas que se relacionam com as páginas do usuário, mas o importante com esta solução seria testar se os usuários se sentiriam mais confiantes em agendar publicações uma vez que o desconhecimento dos melhores horários apareceu como um empecilho para o planejamento nas entrevistas com clientes.
Figura 30 - Recorte da interface prototipada em HTML e CSS. No canto inferior direito apresenta-se o contador de caracteres com a rede social responsável pela limitação ativa e o número de caracteres extrapolado em 950 caracteres.
Fonte: Arquivos da Resultados Digitais.
Finalizam-se então as as propostas de melhorias para a funcionalidade de Postagens em Mídias Sociais nos dois ciclos de desenvolvimento relatados neste projeto de conclusão de curso. As figuras 32 e 33. apresentam a interface antes do redesign da funcionalidade.
Fonte: Arquivos da Resultados Digitais.
Figura 31 - Composição de referência (criada utilizando ferramentas gráficas) demonstrando uma possível interação para o agendamento de uma
publicação.
62
Fonte: Arquivos da Resultados Digitais.
O redesign se encontra em desenvolvimento. A figura 34 apresenta a nova interface proposta para a funcionalidade, após revisão do Chapter de Design em relação ao estilo visual.
Fonte: Arquivos da Resultados Digitais;
Figura 33 - Página de criação de nova publicação da funcionalidade antes do redesign.
Fonte: Arquivos da Resultados Digitais.
Com as hipóteses de solução desenvolvidas e disponíveis para os usuários o que se espera é que os problemas identificados no diagnóstico não aconteçam mais. O Lean UX propõe que os resultados sejam avaliados pelas consequências alcançadas no mundo real. As soluções propostas deixarão de ser hipóteses de solução quando identificarmos através de análises qualitativas e quantitativas que os problemas observados no diagnóstico não ocorrem mais.
5 CONCLUSÃO
Para os próximos ciclos de desenvolvimento a prioridade é prosseguir com o processo de design da organização realizando as validações necessárias: testes de usabilidade, ajustes e lançamento das melhorias para um grupo controlado de clientes. Assim as hipóteses de design serão testadas, quando será descoberto se as hipóteses de solução e os esforços de desenvolvimento causarão os impactos esperados.
Facilitar o processo de design de uma equipe multidisciplinar trabalhando com o Lean UX requer experiência e liderança ativa. Em retrospecto, diversos desperdícios foram identificados no processo de design desta solução. O processo de melhoria contínua existe para fazer com que estes desperdícios não se repitam. “Hoje melhor que ontem, amanhã melhor que hoje”.
Diversas camadas de decisão permeiam a resolução de problemas de design de produtos digitais. Sintetizar uma solução satisfazendo os requisitos de negócio, de tecnologia, e dos usuários requer um olhar metódico e ciclos rápidos de aprendizado e replanejamento.
A maior lição deste processo é que o problema de design deve ser quebrado até o ponto em que o processo de análise, geração de hipóteses, desenvolvimento e testes consiga acontecer de maneira previsível. Assim é possível reduzir desperdício e entregar o máximo de valor para o usuário com o mínimo de investimento.
66
REFERÊNCIAS
ALT, Luiz; PINHEIRO, Tennyson. Design Thinking Brasil: Empatia, colaboração e experimentação para pessoas, negócios e sociedade. Brasil: Campus, 2012.
ALVIN J. SILK (Massachusetts). Harvard Business School (Org.). O que é marketing? Cambridge: Bookman, 2006.
BOYD, D. M.; ELLISON, N. B. Social network sites: Definition, history, and scholarship. Journal of Computer-Mediated
Communication, v. 13 n.1, 2007. Disponível em: http://www.english.illinois.edu/-
people-/faculty/debaron/582/582%20readings/boyd%20sns.pdf. Acesso em: 11/07/2016.
COOPER, Alan et al. About Face: The Essentials of Interaction Design. 4. ed. San Francisco: John Wiley & Sons, 2014.
COSTA, Gabriel. Como usar a Jornada de Compra para fazer um bom planejamento de Automação de Marketing. Florianópolis, 29 mai. 2014. Disponível em http://resultadosdigitais.com.br/blog/como-usar-a- jornada-de-compra-para-fazer-um-bom-planejamento-de-automacao-de- marketing/. Acesso em: 11 mai. 2016.
DRUCKER, Peter. The Practice of Management. 2006.
GOTHELF, Jeff. Lean UX: Applying Lean Principles to Improve User Experience. Cambridge: O’reilly Media, 2013.
HALLIGAN, Brian; SHAH, Dharmesh. Inbound Marketing, Revised and Updated: Attract, Engage, and Delight Customers Online. 2. ed. Cambridge: John Wiley & Sons, 2014.
NIELSEN, Jakob. 10 Usability Heuristic for User Interface Design. Disponível em https://www.nngroup.com/articles/ten-usability- heuristics/. Acesso em: 12 jul. 2016.
IBGE. Acesso à internet e à televisão e posse de telefone móvel celular para uso pessoal: 2014 / IBGE, Coordenação de Trabalho e Rendimento. – Rio de Janeiro : IBGE, 2016.
ROYO, J. Design Digital. 1a ed. São Paulo: Edições Rosari, 2008. WENDEL, Stephen. Designing for Behavior Change: Applying Psychology and Behavioral Economics. San Francisco: O’reilly Media, 2013.