# Case app da Pernambucanas: 1,2 milhão de usuários, no Jornal Nacional > https://brunodelorence.com/pt-BR/globo-interview > > O app de compras da Pernambucanas, desenhado por Bruno Delorence na Kanamobi em 2017: pesquisa na rua, Photoshop, Sketch e protótipos, 1,2 milhão de usuários e o Jornal Nacional. [← Trabalhos selecionados](https://brunodelorence.com/pt-BR#projects) Pernambucanas / App mobile Kanamobi · 2017 (Image: Globo) Como visto no Jornal Nacional # O app da Pernambucanas: a loja no bolso, da pesquisa na rua a 1,2 milhão de usuários. Kanamobi · 2017 · No Jornal Nacional em 22 de dezembro de 2017 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. Ver o app [Assistir à reportagem no g1](https://g1.globo.com/jornal-nacional/noticia/2017/12/mudancas-na-sociedade-fazem-surgir-novas-profissoes.html) Sobre o projeto ## Uma loja grande, um squad pequeno. Um app para todo mundo que compra lá. A Pernambucanas é uma das redes de varejo mais antigas e conhecidas do Brasil. Na Kanamobi, o nosso squad de cinco levou as lojas para o celular: um app para criar um relacionamento com os clientes e facilitar a venda. - Empresa: Kanamobi - Cliente: Pernambucanas - Meu papel: Senior Designer, squad da Pernambucanas - Time: 5 pessoas, lideradas por Raul Souza - Período: 2017, do início ao fim do ano - No ar: Bruno Delorence, designer de aplicativos · Jornal Nacional, 22/12/2017 - Ferramentas: Photoshop Sketch InVision Marvel Principle **1,2 mi** Usuários do app da Pernambucanas App mobile da Pernambucanas **2017** Desenhado e lançado dentro do ano Kanamobi, um squad de cinco **22.12.17** No Jornal Nacional, da TV Globo A reportagem no g1 (Image: Bruno na mesa de trabalho no Jornal Nacional, com o nome dele e “Designer de aplicativos” na legenda) Imagens: TV Globo / Jornal Nacional, 22/12/2017 · [Reportagem completa no g1](https://g1.globo.com/jornal-nacional/noticia/2017/12/mudancas-na-sociedade-fazem-surgir-novas-profissoes.html) 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á - (Image: Ele) - (Image: Ela) - (Image: Crianças) - (Image: Avós) 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 1. O que deve abrir o app, antes de qualquer busca? Atalhos da home 2. Quais ofertas importam para esta pessoa? Ofertas 3. O que as pessoas perguntam antes de comprar? Produto: cores, tamanhos, avaliações 4. 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. 1. Início de 2017 ### Pesquisa Pesquisa de guerrilha nas lojas e na rua, com clientes e vendedores. 2. 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 *2* Paola Indica Top ofertas Novidades Por tempo limitado Ofertas Preços baixos Peç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 3. 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 *2* Paola Indica Top ofertas Novidades Por tempo limitado Ofertas Preços baixos Peça seu cartão! Primeira compra com 10% e frete grátis 4. 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, lectus Suspendisse laoreet, vitae. Login com Google Cadastre-se Entrar 5. 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 Delorence Veja e edite seu perfil Lojas e Ofertas Compre Online Localizar lojas Meus Pedidos Favoritos Cupons Conteúdo Especial Conteúdo e configurações Lembrete Menu Seu produto está aqui! Lorem ipsum lectus neque iaculis, lectus Suspendisse laoreet, vitae. Login com Google Cadastre-se Entrar 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. *2* Moda Feminina Encontre tudo que você precisa aqui Veja os produtos Moda Masculina Encontre tudo que você precisa aqui Veja os produtos Moda Infantil Encontre tudo que você precisa aqui Veja os produtos *2* Especial pra você Descrição do anúncio ou oferta, descrição padrão *2* Paola Indica Top ofertas Novidades Por tempo limitado Ofertas Preç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. BUSCAR O que podemos fazer por você ? SEU NOVO CELULAR ESTÁ NA PERNAMBUCANAS Veja os modelos Suas buscas principais Compre Online Localizar lojas Meus Pedidos Favoritos Ofertas COLLECTION Tênis Nike Lennox R$ 299,90 R$ 199,90 5X 19,90 TOP Tênis Adidas Preto R$ 299,90 R$ 99,90 5X 9,90 SPORT Tênis Adidas Nop R$ 299,90 R$ 399,90 10X 39,90 COLLECTION Tênis Adidas Preto R$ 299,90 R$ 99,90 5X 9,90 03.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 *2* 645 avaliações Tênis Nike Impact Descrição do anúncio ou oferta, descrição padrão Cores disponíveis R$ 250,00 ou em 10x dde R$ 32,80 Cartão Pernambucanas Avaliações sobre Tênis Nike Impact Baseado em **645 avaliações** - 5 estrelas 401 - 4 estrelas 223 - 3 estrelas 19 - 2 estrelas 0 - 1 estrelas 2 **4,6** Prós Contras Neutros 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ções 03.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. Adicione seu cartão Detalhes do seu cartão Digite suas informações ou use a câmera Nome: Nome do seu cartão Número: Número do cartão Vencimento: Número do cartão Adicionar Cartão de Crédito Sacola Editar COLLECTION Camisa azul com detalhes com estrelas R$ 190,00 R$ 90,00 Ref: #165-0020-963-01 Cor: Azul Tamanho: M Presente? Quantidade: **1** TOP Camisa azul com detalhes com estrelas R$ 190,00 R$ 90,00 Ref: #165-0020-963-01 Cor: Marrom Tamanho: único TOTAL: R$ 299,00 ou em 7x dde R$ 42,80 FINALIZAR COMPRA 03.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 Marrom com detalhes... R$ 190,00 R$ 90,00 Ref: #165-0020-963-01 Cor: Marrom Tamanho: único Dúvidas ? Produto Entregue Camisa azul com detalhes com estrelas R$ 190,00 R$ 90,00 Ref: #165-0020-963-01 Cor: Azul Tamanho: único Dúvidas ? Saiu para entrega Meus Pedidos Mural PRODUTO SAIU PARA ENTREGA Seu produto vai chegar em 23/10/2018 Vestido Longo Azul Tamanho: P / Quantidade: 01 Veja sua compra aqui IDEIA DE LOOK FINO 08:00 am VERÃO FINAL DE ANO! Separamos um look perfeito pra você Veja os produtos NOVOS ACESSÓRIOS 10:00 am Seu produto está aqui! Lorem ipsum lectus neque iaculis, lectus Suspendisse laoreet, vitae. Login com Google Cadastre-se Também no fluxo Um protótipo navegável do app da Pernambucanas Toque em “Entrar” 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. 1. 2017 ### Lançamento O app chega aos clientes das lojas. 2. Depois do lançamento ### 1,2 milhão de usuários O app da Pernambucanas chega a 1,2 milhão de usuários. 3. 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. 1. 00:00 ### 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. 2. 00:14 ### 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. 3. 00:44 ### “Sou designer de aplicativo” No ar por ~3 s Eu me apresento como designer de aplicativos, com a legenda que deixou tudo oficial. 4. 00:47 ### 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.” 1. **Estrutura** *O esqueleto* O que vai em cada tela, e onde, antes de qualquer cor. 2. **Layout** *O que você vê* Cores, tipografia e imagens sobre o esqueleto. 3. **Protótipo** *Navegue por ele* As telas ligadas, para testar o app antes de ele existir. Veja essas etapas no processo do app ↑ 5. 01:13 ### 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. 6. 02:14 ### 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. 7. 02:44 ### 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 ↗](https://g1.globo.com/jornal-nacional/noticia/2017/12/mudancas-na-sociedade-fazem-surgir-novas-profissoes.html) 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. Manter Eu manteria a pesquisa na rua: conversar com clientes e vendedores moldou as telas mais do que qualquer briefing. 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. [Abrir a reportagem no g1 ↗](https://g1.globo.com/jornal-nacional/noticia/2017/12/mudancas-na-sociedade-fazem-surgir-novas-profissoes.html) [Próximo projeto **Oitchau**](https://brunodelorence.com/pt-BR/oitchau) Comece uma conversa ## Procura um design engineer? 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 [Fale com o Bruno](https://wa.me/5511991108680)