Caso AppProva na migração do aplicativo Android para Material Design

1. Case AppProva
MIGRANDO PARA UM MUNDO MATERIAL
https://thomas.vanhoutte.be/miniblog/material-design-gif-examples/

2. Ana Paula Batista
Google Expert - UX/UI
http://www.cutedrop.com.br/2015/07/os-stickers-animados-e-lindos-do-novo-aplicativo-google-messenger/

3. Guilherme Castro Lucas Ferraz Tássio MendesBárbara TomazAna Paula Batista
https://dribbble.com/shots/2167068-Man-s-best-friend

5. Desenvolvimento interno
Bug Fixes
Maior estabilidade

6. Aumentar o engajamento
Potencializar a retenção
Facilitar o uso

7. Janeiro, 2016
Maio, 2015
>800K
Apps feitos com Material
Google Play Store
200K
http://www.cutedrop.com.br/2015/07/os-stickers-animados-e-lindos-do-novo-aplicativo-google-messenger/

8. App: Trello
Aumentando o engajamento
dos usuários pelo Material
10%
mais sessões por usuário por
semana
42%
mais boards criados por sessão
63%
mais pessoas adicionadas a
boards, por sessão

9. App: Unni’s Pouch
Potencializar o engajamento
do usuário através do FAB
31%
aumento de posts do usuário após
utilizar FAB para novos posts
62 segundos
de aumento do time spent por sessão

10. App: B&H Photo Video
“Couldn’t be better, seriously this
app has to be one of the best apps I
have ever used.”
“Better than the website - I use the
app/retail store quite often and this
app is really helpful.
“Everything is very well organized
so it makes it actually fun just to
look through the items in the app!”
Surpreendendo usuários e
aumentando vendas pelo app
5x
aumento de
compras no app
700%
aumento de vendas
geral

11. App: Ebabcha
Aumentando a exploração de
conteúdos através de animações.
66%
aumento nas page views diárias
do app
53%
aumento nas sessões do app

12. Uma interface forte, bonita e
consistente em todas as plataformas.

13. Uma interface forte, bonita e
consistente por todos os devices.

14. Uma interface forte, bonita e
consistente para todos os usuários.

15. É só aplicar a guideline
do Material Design!

16. 1. Necessidades
dos usuários
2. Especificação
Funcional
3. Design de
interação
4. Arquitetura da
informação
5. Design de
interface

17. Especificação Funcional
Design Visual
Design da
Informação
Design da
interação
Necessidades
dos usuários
http://goo.gl/E4D94Z

18. Necessidades
dos usuários

19. Entrevistas não estruturadas
Customer Success Team
Testes de Usabilidade

20. [fulano] é um [caracteristicas do
usuário] que precisa (um meio
de) [necessidade do usuário] por
que ele valoriza [insight].
Converse com seus
usuários:
- por telefone
- site
- visitas presenciais
- email
- até um café!
O mais importante
é ouvir!
Como entender as
necessidades do
meu usuário?

21. Problemas
- Falta de identidade e identificação com o usuário;
- Editar perfil pouco intuitivo;
- Dificuldade de acompanhamento das questões já
respondidas durante a execução do simulado;
- Comunicação inadequada para utilização do app;
- Destaque para informações pouco relevantes para os
usuários;
- Dificuldade de acesso à principal funcionalidade
(simulados);
- Dificuldade de navegação entre os diferentes status de
simulados.

22. Design da interação

23. Fluxo e priorização
Usuário
entra Busca/Navega
Disciplina ou
simulado
Responde
questões
Acompanha
o
desenvolvim
ento
Aprovação
no ENEM
Edita Perfi/
QR Codel
Onboarding
Cadastro/ Login
Suporte
Verifica
questões
feitas

25. Design da informação

26. Mapeamento de Conteúdo/
Funcionalidades
Login
QR Code
Cadastro
Busca
Editar Perfil Suporte
Simulados
Visualizar questões
respondidas
Jogos Questões
Onboarding
Pontuação

27. Pontuação
QuestõesVisualizar
questões
respondidas
Cadastro
Editar Perfil
QR Code
Suporte
Onboarding
Agrupamento (categorização)
Simulados JogosBusca Login
Apoio
Identificação do
usuário
Simulados Jogo

28. - Papel é seu melhor amigo
- Utilize as categorias como base, mas tudo bem
se você quiser dar destaque para algo em um
nível abaixo
- Novas ideias de conteúdos vão surgir!
Estruturando o aplicativo

29. Visual design

30. Paleta de Cores
https://material.google.com/style/color.html#color-color-palette
Accent Color
Primary Color
#E91E63 #C93C4D #E0415A #FE4760 #FF4A69
#3F51B5 #85D1CE #98DEDB #AAEAE7
Cor no material é inspirada por tons ousados justapostos com
ambientes suaves, sombras profundas, e os destaques brilhantes.

31. Ícones
Utilizam formas geométricas para representar visualmente ideias
centrais, capacidades, ou tópicos.
https://material.google.com/style/icons.html

32. Tipografia
Roboto Noto
https://material.google.com/style/typography.html#typography-styles

34. Especificação funcional

36. E a identificação com
o usuário?

37. E a priorização
de simulados?

38. Agora vai!

40. Protótipo Navegável

41. Teste de Usabilidade

42. Precisamos melhorar a forma de login...
Menu tá muito escondido...
Navegação de simulados ainda estava confusa.
Botão de responder questão deveria estar acessível
Explorar mais nosso mascote
http://www.cutedrop.com.br/2015/07/os-stickers-animados-e-lindos-do-novo-aplicativo-google-messenger/

44. Craft details

49. Próximos passos
Testes de
Usabilidade
Firebase
Atualizar
interface do iOS
Lançamento:
01/09

51. Sim, você pode utilizar Material Design no iOS!!
- Elementos podem ser utilizados,
mas seja coerente com o
sistema operacional
- Foque mais no conceito do
Material, do que nos elementos
visuais
- Have fun!
Bônus 1

52. Adaptive Layouts: Pocket
Crafted Simplicity: Weather Timeline
Delightful Animation: Tumblr
Elegant Typography: NY Times - Latest News
Immersive Imagery: B&H Photo Video Pro Audio
Seamless Browsing: Pocket Casts
Material Design AwardsBônus 2

53. Learn material design in ~2 hours
Medium 30 min
For more advanced material designers
Read: Meaningful transitions from Animation
Read: Imagery from Style
Read: Adaptive UI from Layout
Medium 60 min
Watch [30 min]: Adaptive UI with Material Design
Watch [30 min]: What’s New in Android UI Engineering
Advanced 30 min
Review: Android design support library
Easy 7 min
Watch: 6 min video
Watch: 1 min video
Easy 20 min
From the home page of the material
design spec
Read: Environment
Read: Material properties
Read: Elevation and shadows
Bônus 3

54. Resources
- google.com/design
- Icons tool
- Devices tool
- Android Design Support Library
Spec Updates
- adaptive layouts
- elevation
- splash screens
- settings
- FAB expansion
- navigation
- empty states

55. Obrigada! :)
anapaulaazambuja@gmail.com
@anapaulazambuja
Visual Design: Bárbara Tomaz (barbara-tomaz@hotmail.com)
https://dribbble.com/shots/1192777-Purrrification