ROI no front-end

vamos pensar em lucro?

Guilherme Serrano

Bacharel em Desenho Industrial (ULBRA)

Pós graduado em Gestão Empreendedora (SENAC)

Empreendedor

Programador

EXPERIÊNCIAS

ROI no front-end

LUCRO E ROI

também é responsabilidade

do time de desenvolvimento?

ROI

UXa experiência do usuário

Nós não temos um time de UX. Se o

problema com o seu serviço é que os

servidores estão lentos e o time de UX

não consegue atuar nisso, então eles

não estão no controle da experiência do

usuário e não deveriam ser chamados de

time de UX.

"

What’s the design process at Government Digital Service?

E o front-end?

1. PERFORMANCE

Cada 100ms de latência custa

para a Amazon 1% em vendas.

"

Greg Linden - Make Data Useful

Para o Google, 500ms a mais

para exibir o resultado de busca

significa uma queda de 20% de

tráfego.

"

Greg Linden - Make Data Useful

100 bilhões de buscas / mês (2014)

20% menos de trafego

20% menos de ads exibidas

- tempo de resposta

=

+ ROI

Users really respond to speed."

Marissa Mayer - Google VP

Latência importa!

Onde otimizar?

Entre 80% e 90% do tempo de

resposta é gasto no front-end

"

The performance gold rule, Steve Souders

The performance gold rule, Steve Souders

Mas "front-end"

não é apenas código

Google

Renderizar 10 resultados: 0,4s

Renderizar 30 resultados: 0,9s

Marissa Mayer - Google VP

Google

Renderizar 10 resultados: 0,4s

Renderizar 30 resultados: 0,9s

Alterar o número de respostas não é uma

otimização "de código"

Qual o time entende

de repaint / reflow?

Quem sabe mensurar

o tempo de renderização?

EFEITO

COLATERALredução do consumo de tráfego

UOL

42,4 milhões usuários/mês

991,4 bilhão pageviews/mês

Mídia KIT UOL

OTIMIZAÇÃO DE ~20Kb848Gb de transferência economizados

REFLOW / REPAINT

FERRAMENTASpara performance

- PageSpeed

- Browser Diet

- JS Perf

- GruntJS

- Minimizar redraw e reflow

- Otimização de imagens*

- Smush it

- ImageOptim

- Cache do navegador*

- Proponha e teste melhorias*

*Nem sempre no controle do front-end

A raiz de todo o mal!A raiz de todo o mal!

2. PRODUTIVIDADE

+ produtividade

=

+ tempo para estudar, café, ócio

criativo…

=

+ produtividade

50% do tempo de um programador

é gasto com refação

"

The ROI of User Experience, Susan Weinschenk

O custo de arrumar um erro antes do

desenvolvimento é 100 vezes menor

do que arrumar depois de

desenvolvido

"

The ROI of User Experience, Susan Weinschenk

ESPECIFICAÇÕESde forma clara

COMUNICAÇÃOcom todo o time

REUSOqualidade do código

modularização

FERRAMENTAS

E

FRAMEWORKS

Faça da melhor

maneira possível

METODOLOGIASGTD, inbox zero, scrum,

mandinga, meditação, pomodoro...

Teste o que funciona com você e seu time

Pense no framework como os foguetes de

lançamento de um ônibus espacial, quando o

objetivo for alcançado, não passarão de

sucata, um belo peso extra.

"

Scrum: seu time já deveria estar em outra, @jcemer

3. TESTE A/B

Porque as coisas são

como as coisas são?

Data-drivendesign / development

O USUÁRIO DECIDE

HiPPOHigh paid person opinion

ACHISMO e as vezes o ego

Tomam a decisão

1 - A HIPÓTESEo que será testado?

Foto por @torresfelipe

2 - FLIP COINoriginal vs variante

3 - ANÁLISE DE DADOSqual foi o resultado?

A opção que performa melhor se

torna a original

PIECE OF CAKE!

Foto por @torresfelipe

VOLTE PARA O PASSO 1Crie uma nova variante

Tudo deve ser testadonunca há regressão de performance

correlação

e

causalidade

KPIs

O que não é mensurado

não pode ser otimizado

AUMENTO DE PAGEVIEWS

CAPTURA DE DADOS

INTERAÇÃO SOCIAL

CADASTRO DE USUÁRIO

VENDAS

AFUNILAMENTO DE FUNIL

REDUÇÃO DE CHAMADOS

NO SUPORTE

REDUÇÃO DE TEMPO

PARA EXECUTAR TAREFAS

RETENÇÃO DE USUÁRIO

CASES

CAREER POINT COLLEGE

Hipótese

Remover o primeiro nível de navegação e colocar o formulário "acima da

dobra" vai aumentar as submissões

O que foi testado

Submissões do formulário

Resultado

336% do aumento da conversão

Career Point College

Informações

Site com versão mobile e versão desktop

A versão mobile não era otimizada para tablets - todos os usuários de

tablet eram direcionados para versão mobile

O que foi testado

Conversão e faturamento do site desktop no tablet

Conversão e faturamento do site mobile no tablet

Resultado

32% a mais de vendas na versão desktop

71,81% a mais de faturamento na versão desktop

Shirtnator

Informações

Na landing page tinha um formulário para captação de dados de

leadings, com 4 campos: nome, e-mail, site e faturamento.

O que foi testado

Troca do campo "faturamento" por um campo aberto "como podemos

ajudar?"

Resultado

Inconclusivo

NeilPatel #1

Informações

Na landing page tinha um formulário para captação de dados de

leadings, com 4 campos: nome, e-mail, site e faturamento.

O que foi testado

Remoção do campo faturamento, deixando o form com apenas 3

campos.

Resultado

Aumento de 26% no cadastro

NeilPatel #2

Informações

Landingpage com captação de e-mail para acesso a conteúdo.

O que foi testado

Captura de e-mails na original e na variante.

Na variante foi adicionado uma imagem de uma seta vermelha.

Viver de Blog

Informações

Landingpage com captação de e-mail para acesso a conteúdo.

O que foi testado

Captura de e-mails na original e na variante.

Na variante foi adicionado uma imagem de uma seta vermelha.

Resultado

10% a mais de conversão na variante

Viver de Blog

NETFLIX

Optimizely Blog

+ retenção

+ engajamento

Teste de hover

+ 15% de cliques

=

+ entradas no funil de conversão

$(".list-products").addClass("hover-red");

window['optimizely'].

push(["bucketVisitor", experimentId,

variationIndex]);

OBRIGADO!

eucompraria.com.br

Guilherme Serrano

@gserrano