PrincipleManter
Eu manteria a pesquisa na rua: conversar com clientes e vendedores moldou as telas mais do que qualquer briefing.
Como visto no Jornal NacionalO app da Pernambucanas: a loja no bolso, da pesquisa na rua a 1,2 milhão de usuários.
Em 2017, como Senior Designer na Kanamobi, desenhei o app de compras da Pernambucanas num squad de cinco pessoas: da pesquisa de guerrilha nas lojas e na rua aos protótipos no InVision, no Marvel e no Principle. Ele chegou a 1,2 milhão de usuários, e o sucesso me levou ao Jornal Nacional, da TV Globo.
Em resumo Bruno Delorence desenhou o app mobile da Pernambucanas em 2017, como Senior Designer na Kanamobi, num squad de cinco pessoas liderado por Raul Souza. O trabalho foi da pesquisa de guerrilha com clientes e vendedores à estrutura no Photoshop, ao layout no Sketch e aos protótipos no InVision, no Marvel e no Principle. O app chegou a 1,2 milhão de usuários. Em 22 de dezembro de 2017, o Jornal Nacional, da TV Globo, mostrou o Bruno como designer de aplicativos na reportagem “Mudanças na sociedade fazem surgir novas profissões”, explicando esse mesmo processo: estrutura, layout, protótipo.
1,2 mi
Usuários do app da Pernambucanas
App mobile da Pernambucanas2017
Desenhado e lançado dentro do ano
Kanamobi, um squad de cinco22.12.17
No Jornal Nacional, da TV Globo
A reportagem no g1
00 / Contexto
Uma loja que todo mundo conhece, indo para o celular.
O objetivo, como escrevi na prancha de design: criar um relacionamento com os clientes e facilitar a venda. Levar a loja física para o online era facilitar a vida das pessoas.
Quem compra na Pernambucanas são homens e mulheres, crianças e avós. Um único app precisava receber todos eles, manter o relacionamento e vender, sem virar um catálogo.
Os ícones que desenhei para quem compra lá
01 / Pesquisa na rua
Levamos a pesquisa para a rua.
Antes de desenhar telas, fomos aonde a compra acontece. Fizemos pesquisa de guerrilha nas lojas e na rua: conversas rápidas com clientes e com os vendedores, que ouvem as dúvidas deles todo dia.
Na rua
Clientes e vendedores.
Entrevistas rápidas e informais dentro e em volta das lojas: como as pessoas escolhem, o que faz elas voltarem, o que perguntam aos vendedores e onde o celular entra nisso tudo.
Dentro da empresa
Como a Pernambucanas via a pesquisa.
Também trabalhamos com o time da própria Pernambucanas para entender como eles pensavam a pesquisa, e levamos o que ouvimos na rua para o briefing e para cada revisão das telas.
As perguntas que guiaram as telas
- O que deve abrir o app, antes de qualquer busca?Atalhos da home
- Quais ofertas importam para esta pessoa?Ofertas
- O que as pessoas perguntam antes de comprar?Produto: cores, tamanhos, avaliações
- Como fazer elas voltarem entre uma compra e outra?O Mural
02 / Processo
Estrutura, layout, protótipo, nas ferramentas de 2017.
O ano em cinco fases. É a mesma ordem que expliquei no Jornal Nacional: primeiro o esqueleto, depois o layout, depois a navegação num protótipo.
Wireframe isométrico da tela inicial da Pernambucanas, na ordem do processo: a estrutura desenhada no Photoshop, o layout no Sketch e uma aba da barra inferior tocada como num protótipo.
- Início de 2017
Pesquisa
Pesquisa de guerrilha nas lojas e na rua, com clientes e vendedores.
- Depois
Estrutura no Photoshop
Cada fluxo como um esqueleto: o que vai em cada tela, e onde, antes de qualquer cor.
- Photoshop
2 
Especial pra você
Descrição do anúncio ou oferta, descrição padrão
2Paola IndicaTop ofertasNovidadesPor tempo limitadoOfertasPreços baixosPeça seu cartão!
Primeira compra com 10% e frete grátis
Como os meus fluxos de wireframe apareciam na tela na reportagem: o fluxo de outro projeto, o mesmo jeito de trabalhar. Imagens: TV Globo / Jornal Nacional, 22/12/2017 - Depois
Layout no Sketch
Cores, tipografia e imagens sobre o esqueleto, no azul e no amarelo da marca.
- Sketch
2 Especial pra você
Descrição do anúncio ou oferta, descrição padrão
2Paola IndicaTop ofertasNovidadesPor tempo limitadoOfertasPreços baixosPeça seu cartão!
Primeira compra com 10% e frete grátis
- Depois
Protótipos no InVision, no Marvel e no Principle
As telas ligadas para as pessoas navegarem pelo app, e o movimento de cada transição.
- InVision
- Marvel
- Principle
Seu produto está aqui!
Lorem ipsum lectus neque iaculis,
Login com GoogleCadastre-seEntrar
lectus Suspendisse laoreet, vitae. - 2017
Lançamento
O app chega aos clientes das lojas.
03 / O app
As telas, e um fluxo para você tocar.
As telas principais, refeitas a partir do meu design de 2017, e a decisão por trás de cada uma. Depois, o fluxo como protótipo: entre, abra um produto, compre, finalize.
03.1
Um app, muitas utilidades
Como estava na prancha: um aplicativo que busca o relacionamento e facilita a venda dos produtos. Um login, com o Google ou com uma conta, abre a loja inteira.
Sofia DelorenceVeja e edite seu perfil
Seu produto está aqui!
Lorem ipsum lectus neque iaculis,
lectus Suspendisse laoreet, vitae.
03.2
Facilidade e interatividade
A página principal é composta por categorias e pelas principais funções do aplicativo, cada uma a um toque: Paola Indica, Novidades, Ofertas.
Moda FemininaEncontre tudo que você
precisa aquiVeja os produtos
precisa aquiVeja os produtos
Moda MasculinaEncontre tudo que você
precisa aquiVeja os produtos
precisa aquiVeja os produtos
Moda InfantilEncontre tudo que você
precisa aquiVeja os produtos
precisa aquiVeja os produtos
Especial pra você
Descrição do anúncio ou oferta, descrição padrão
2Paola IndicaTop ofertasNovidadesPor tempo limitadoOfertasPreços baixos
Peça seu cartão!
Primeira compra com 10% e frete grátis
03.3
Compre produtos feitos pra você
Além de se relacionar, o aplicativo tem como objetivo vender e trazer ofertas com um filtro inteligente para cada tipo de usuário.
BUSCARO que podemos fazer por você ?
Suas buscas principaisCompre OnlineLocalizar lojasMeus PedidosFavoritos
COLLECTIONTênis Nike LennoxR$ 299,90R$ 199,905X 19,90
TOPTênis Adidas PretoR$ 299,90R$ 99,905X 9,90
SPORTTênis Adidas NopR$ 299,90R$ 399,9010X 39,90
COLLECTIONTênis Adidas PretoR$ 299,90R$ 99,905X 9,9003.4
Mais informação na hora de comprar
De uma forma clara e objetiva, o usuário pode ver os reviews e os detalhes de cada produto listado: cores, tamanhos e o que outros compradores disseram.
Experimente as cores e os tamanhos
Cores disponíveis
Tamanhos
Tênis Nike Impact
Descrição do anúncio ou oferta, descrição padrão
Cores disponíveis
R$ 250,00ou em 10x dde R$ 32,80Cartão Pernambucanas
Avaliações sobre Tênis Nike Impact
Baseado em 645 avaliações
4,6
PrósContrasNeutros
Avaliação positiva mais úteis
26/09/2017
POR ÉDER FRANKLIN
Compraria denovo
Utilizo pra caminhar, na academia, passear, muito bom. Confortável e macio, estou adorando. Lado ruim não tenho nada a dizer.
Ver mais avaliações03.5
Um caminho curto até o pagamento
A sacola lista cada item com cor e tamanho, a opção de presente, a quantidade e o total, e depois um botão amarelo.
COLLECTIONCamisa azul comdetalhes com
estrelasR$ 190,00R$ 90,00Ref: #165-0020-963-01Cor: AzulTamanho: M
Presente?Quantidade:1
TOPCamisa azul comdetalhes com
estrelasR$ 190,00R$ 90,00Ref: #165-0020-963-01Cor: MarromTamanho: único
TOTAL:R$ 299,00ou em 7x dde R$ 42,80
FINALIZAR COMPRA03.6
Um lugar, novidades o tempo todo
O Mural é um lugar pensado em todo tipo de novidade e atividade que o aplicativo pode te proporcionar: um pedido a caminho, um look para a estação, novos acessórios.
Bolsa Marromcom detalhes...R$ 190,00R$ 90,00Ref: #165-0020-963-01Cor: MarromTamanho: único
Dúvidas ?Produto Entregue
Camisa azul comdetalhes com
estrelasR$ 190,00R$ 90,00Ref: #165-0020-963-01Cor: AzulTamanho: único
Dúvidas ?Saiu para entrega
FINAL DE ANO!Separamos um look
perfeito pra vocêVeja os produtos
NOVOS ACESSÓRIOS10:00 amSeu produto está aqui!
Lorem ipsum lectus neque iaculis,
lectus Suspendisse laoreet, vitae.
Também no fluxo
Telas refeitas em código a partir do meu design de 2017 para a Pernambucanas.
04 / Resultado
Do lançamento a 1,2 milhão de usuários.
O app chegou a 1,2 milhão de usuários, e foi esse sucesso que chamou a atenção da TV Globo no fim do ano.
- 2017
Lançamento
O app chega aos clientes das lojas.
- Depois do lançamento
1,2 milhão de usuários
O app da Pernambucanas chega a 1,2 milhão de usuários.
- 22/12/2017
No Jornal Nacional
A TV Globo mostra o trabalho numa reportagem sobre novas carreiras, comigo como designer de aplicativos.
O que contava como sucesso
- Aprovação
- Um design aprovado pelo cliente, feito junto com o time deles
- Vendas
- Mais vendas pelo app, com ofertas que fazem sentido para cada cliente
- Avaliação
- Uma boa avaliação nas lojas de aplicativos
As metas para as quais o projeto foi pensado.
05 / No Jornal Nacional
E foi isso que levou o Jornal Nacional até o escritório.
O sucesso do app chamou a atenção da TV Globo. Em 22 de dezembro de 2017, o Jornal Nacional exibiu uma reportagem sobre as novas carreiras que surgem com as mudanças na sociedade, e designer de aplicativos era uma delas: a equipe me filmou na minha mesa na Kanamobi, na minha primeira entrevista na TV.
No ar, expliquei as mesmas três etapas que esta página percorreu: estrutura, layout, protótipo. Aqui está a reportagem, minuto a minuto, com as minhas partes marcadas: clique numa delas para assistir no vídeo lá em cima.
Wireframe isométrico da tela de produto da Pernambucanas, camada por camada: a estrutura, o layout e o botão Comprar tocado como num protótipo.
Os apresentadores abrem o assunto
A crise, o tempo e a tecnologia tiram espaço de algumas profissões enquanto outros tipos de trabalho surgem.
A repórter Renata Ribeiro, em São Paulo
A gente se apresenta pelo que faz, mas algumas das carreiras novas nem entraram ainda no catálogo de ocupações do IBGE.
“Sou designer de aplicativo”
No ar por ~3 s
Eu me apresento como designer de aplicativos, com a legenda que deixou tudo oficial.
No trabalho: estrutura → layout → protótipo
No ar por ~26 s
Na minha mesa e com a repórter, explico como um app é feito: primeiro o esqueleto, depois o layout, depois a navegação num protótipo.
“A gente monta um esqueleto para depois criar o layout.”
- Estrutura O esqueletoO que vai em cada tela, e onde, antes de qualquer cor.
- Layout O que você vêCores, tipografia e imagens sobre o esqueleto.
- Protótipo Navegue por eleAs telas ligadas, para testar o app antes de ele existir.
Outras carreiras novas na tecnologia
Um desenvolvedor mobile e uma analista de requisitos explicam o que fazem, e a reportagem passa por outras: arquiteto de dados, engenheiro de rede, gerente de sustentabilidade, gerontologista.
Um especialista do Sebrae sobre o que cresce
Trabalhar com tecnologia para celular está em alta, assim como serviços que resolvem problemas do dia a dia, como entregar marmitas.
Profissões com passado
Uma videolocadora, no auge no fim dos anos 1980, vê o negócio sumir; a reportagem fecha lembrando que o mundo e os nossos hábitos continuam mudando.
Fonte: Jornal Nacional / g1, 22/12/2017 · Ler e assistir no g1 ↗
06 / Bastidores
Bastidores.
O dia em que a equipe veio e a noite em que foi ao ar, do jeito que as pessoas ao meu redor viram, com alguns segundos da reportagem. Pegue uma foto, mude de lugar, abra.
arraste as fotos · clique para abrir · as setas movem a foto em foco
O pessoal da Globo escreveu meu nome errado: “Bruno de Lorenzo” kkk
Olhando para trás
O que eu faria hoje.
E o que eu manteria.
Mudar hoje
Hoje, eu planejaria como medir o app desde o primeiro dia, para o valor dele não depender de um só número, e prototiparia numa única ferramenta em vez de três.
Créditos
- Trechos e imagens da TV
- TV Globo / Jornal Nacional, 22/12/2017, a partir da minha própria gravação; só a minha parte da reportagem.
- Fotos de bastidores, stories e posts
- Os colegas e amigos que estavam lá, mantidos como eles postaram.
- Telas do app
- Refeitas em código a partir do meu design de 2017 para a Pernambucanas, feito na Kanamobi.
Comece uma conversa
Vamos falar sobre o seu produto, o seu time e onde o design pode gerar mais valor.
- Duração
- 20–30 minutos
- Tema
- Design engineering
- Valor
- Gratuito