A experiência do usuário envolve várias etapas, entre elas pesquisas, testes, protótipos... Cada uma dessas etapas possui uma estrutura a ser seguida e necessitam de um planejamento antes mesmo de serem executados. Como é feito todo esse preparo? E depois, como os resultados impactam as áreas de tecnologia (front-end, back-end e mobile)? Como os times envolvidos se comportam diante de todo o fluxo de trabalho? Existe mesmo a rivalidade entre designers e devs?

1. A influência dos usuários
no desenvolvimento do Talk7
André Barro
linkedin: br.linkedin.com/in/andrebarro
twitter: @abarro
Fernanda Bernardo
linkedin: br.linkedin.com/in/fernandabernardo
twitter: @Feh_Bernardo

2. #elo7tech

3. NOSSO
MANTRA:

4. NÃO FAZER

5. Como nascem
os produtos?

6. IDEIAS

9. VALE DA SOMBRA
E DA MORTE

10. ROADMAP

11. EXECUÇÃO

12. TESTES DE
USABILIDADE

14. BETA OU A/B

16. "Não sou um usuário leigo,
uso muitos sistemas
diferentes e até os mais
difíceis me dou muito bem,
mas fiquei >> Agoniado <<
com essa alteração."

18. "Quero parabenizar a
mudança do sistemas de
perguntas, agora sim,
deixo aqui minha
satisfação!!
Abraço a todos do elo7"

19. NÃO FAZER ?

20. PRODUÇÃO

23. Como entender
o usuário?

28. User
Experience

29. “A maioria das pessoas acredita que User Experience é somente encontrar a melhor
solução para os seus usuários – mas não é. UX se trata sobre definir o problema que
precisa ser resolvido (o porquê), definir para quem esse problema precisa ser resolvido (o
quem), e definir o caminho que deve ser percorrido para resolvê-lo (o como).”
– Whitney Hess

31. Como entender
o usuário?

33. Testes de Usabilidade

34. Testes de Usabilidade
O que é?

35. - Usuários
- Interface
- Tarefas

36. Nossos testes são feitos em 6 etapas
1. O que iremos
testar?
4. Fazer o
protótipo
5. Aplicar o
teste
6. Tabular e
avaliar os insights
2. Definir o perfil
e recrutar
3. Elaborar o fluxo
e o roteiro

37. STEP 1: O QUE VAMOS TESTAR? PORQUE VAMOS TESTAR?

38. STEP 2: DEFINIR QUAL O PERFIL QUE
QUEREMOS TESTAR E RECRUTÁ-LOS

39. STEP 3: ELABORAR O FLUXO QUE SERÁ
TESTADO E O ROTEIRO QUE GUIARÁ O TESTE

40. STEP 4: MÃO NA MASSA NO PROTÓTIPO
Um protótipo é uma
versão que se parece
com o produto final, e
pode ser modificado
facilmente!

44. STEP 5: APLICAR O TESTE
40 - 50 MINUTOS
Aplicamos utilizando o método de pensar em voz alta
Este método baseia-se em
convidar o usuário a
expressar verbalmente suas
ações e pensamentos
enquanto usam a interface

45. Observar o comportamento dos usuários enquanto eles
completam as tarefas nos permite identificar quais delas
foram realizadas corretamente e quais delas são pontos de
conflito

46. ESTÁGIOS DO TESTE
Moderador
Usuário
Assistente
1. Receber o participante e deixá-lo à
vontade
2. O moderador pede para o participante
realizar tarefas na interface e pensar em
voz alta
3. Para finalizar, o moderador faz
perguntas gerais para levar o usuário a
expressas a experiência

47. STEP 6: TABULAR E AVALIAR OS INSIGHTS
Analisamos a tabulação feita nos testes e
compilamos os vídeos para compartilhar os resultados

50. Iterações

51. Iterações

52. Entrega de Layouts
- Wireframes não são finais
- Alta fidelidade
- Fluxo de telas
- 4 versões de telas
- Assets otimizados
- Link dos assets para S3

53. Entrega de Layouts
- Wireframes não são finais
- Alta fidelidade
- Fluxo de telas
- 4 versões de telas
- Assets otimizados
- Link dos assets para S3

55. Entrega de Layouts
- Wireframes não são finais
- Alta fidelidade
- Fluxo de telas
- 4 versões de telas
- Assets otimizados
- Link dos assets para S3

57. Mobile Web

58. Android

59. IOS

62. Integração com DEVs

63. TyrellMartell Stark

64. Sprint
a Frente

65. Zeplin

66. - Comunicação design e dev
- Documenta
- CSS
- Fontes
- Cores

70. Teste
A/B

73. Teste
A/B

74. Bootstrap
http://www.elo7.com.br/bootstrap

79. Obrigado!
André Barro
linkedin: br.linkedin.com/in/andrebarro
twitter: @abarro
Fernanda Bernardo
linkedin: br.linkedin.com/in/fernandabernardo
twitter: @Feh_Bernardo