Launchpad Build-BH - Migrando para um mundo material

Case AppProvaMIGRANDO PARA UM MUNDO MATERIAL

https://thomas.vanhoutte.be/miniblog/material-design-gif-examples/

Ana Paula BatistaGoogle Expert - UX/UI

http://www.cutedrop.com.br/2015/07/os-stickers-animados-e-lindos-do-novo-aplicativo-google-messenger/

Guilherme Castro Lucas Ferraz Tássio MendesBárbara TomazAna Paula Batista

https://dribbble.com/shots/2167068-Man-s-best-friend

Desenvolvimento interno

Bug Fixes

Maior estabilidade

Aumentar o engajamento

Potencializar a retenção

Facilitar o uso

Janeiro, 2016

Maio, 2015

>800K

Apps feitos com MaterialGoogle Play Store

200K

http://www.cutedrop.com.br/2015/07/os-stickers-animados-e-lindos-do-novo-aplicativo-google-messenger/

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

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

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

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

Uma interface forte, bonita econsistente em todas as plataformas.

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

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

É só aplicar a guideline do Material Design!

1. Necessidades dos usuários

2. Especificação Funcional

3. Design de interação

4. Arquitetura da informação

5. Design de interface

Especificação Funcional

Design Visual

Design da Informação

Design da interação

Necessidades dos usuários

http://goo.gl/E4D94Z

Necessidades dos usuários

Entrevistas não estruturadas

Customer Success Team

Testes de Usabilidade

[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?

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.

Design da interação

Fluxo e priorização

Usuário entra Busca/Navega

Disciplina ou simulado

Responde questões

Acompanha o desenvolvimento

Aprovação no ENEM

Edita Perfi/ QR Codel

Onboarding

Cadastro/ LoginSuporte

Verifica questões feitas

Design da informação

Mapeamento de Conteúdo/ Funcionalidades

Login

QR Code

Cadastro

Busca

Editar Perfil Suporte

Simulados

Visualizar questões respondidas

Jogos Questões

Onboarding

Pontuação

Pontuação

QuestõesVisualizar questões

respondidas

Cadastro

Editar Perfil

QR Code

Suporte

Onboarding

Agrupamento (categorização)

Simulados JogosBusca Login

ApoioIdentificação do

usuárioSimulados Jogo

- 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

Visual design

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.

ÍconesUtilizam formas geométricas para representar visualmente ideias centrais, capacidades, ou tópicos.

https://material.google.com/style/icons.html

Tipografia

Roboto Noto

https://material.google.com/style/typography.html#typography-styles

Especificação funcional

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

E a priorização de simulados?

Agora vai!

Protótipo Navegável

Teste de Usabilidade

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/

Craft details

Próximos passos

Testes de Usabilidade

Firebase

Atualizar interface do iOS

Lançamento: 01/09

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

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

Learn material design in ~2 hours

Medium 30 minFor more advanced material designersRead: Meaningful transitions from AnimationRead: Imagery from StyleRead: Adaptive UI from Layout

Medium 60 minWatch [30 min]: Adaptive UI with Material Design

Watch [30 min]: What’s New in Android UI Engineering

Advanced 30 minReview: Android design support library

Easy 7 min

Watch: 6 min videoWatch: 1 min video

Easy 20 min

From the home page of the material design specRead: EnvironmentRead: Material properties Read: Elevation and shadows

Bônus 3

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

Obrigada! :)[email protected]@anapaulazambuja

Visual Design: Bárbara Tomaz ([email protected])

https://dribbble.com/shots/1192777-Purrrification