# Pernambucanas app case study: 1.2M users, on Jornal Nacional > https://brunodelorence.com/globo-interview > > The Pernambucanas shopping app, designed by Bruno Delorence at Kanamobi in 2017: street research, Photoshop, Sketch and prototypes, 1.2M users and a feature on Jornal Nacional. [← Selected work](https://brunodelorence.com/#projects) Pernambucanas / Mobile app Kanamobi · 2017 (Image: Globo) As seen on Jornal Nacional # The Pernambucanas app: a store in the pocket, from street research to 1.2M users. Kanamobi · 2017 · On Jornal Nacional, December 22, 2017 In 2017, as a Senior Designer at Kanamobi, I designed the Pernambucanas shopping app with a five-person squad: from guerrilla research in stores and on the street to prototypes in InVision, Marvel and Principle. It reached 1.2 million users, and its success put me on TV Globo’s Jornal Nacional. At a glance Bruno Delorence designed the Pernambucanas mobile app in 2017 as a Senior Designer at Kanamobi, on a five-person squad led by Raul Souza. The work went from guerrilla research with customers and sales staff, to structure in Photoshop, layout in Sketch and prototypes in InVision, Marvel and Principle. The app reached 1.2 million users. On December 22, 2017, TV Globo’s Jornal Nacional featured him as an app designer in the report “Mudanças na sociedade fazem surgir novas profissões”, explaining that same process: structure, layout, prototype. See the app [Watch the report on g1](https://g1.globo.com/jornal-nacional/noticia/2017/12/mudancas-na-sociedade-fazem-surgir-novas-profissoes.html) About the project ## A big store, a small squad. One app for everyone who shops there. Pernambucanas is one of Brazil’s oldest and best-known retail chains. At Kanamobi, our squad of five took its stores to the phone: an app to build a relationship with customers and make selling easier. - Company: Kanamobi - Client: Pernambucanas - My role: Senior Designer, Pernambucanas squad - Team: 5 people, led by Raul Souza - Period: 2017, from start to end of the year - On air: Bruno Delorence, app designer · Jornal Nacional, Dec 22, 2017 - Tools: Photoshop Sketch InVision Marvel Principle **1.2M** Users of the Pernambucanas app Pernambucanas mobile app **2017** Designed and launched within the year Kanamobi, a squad of five **22.12.17** On TV Globo’s Jornal Nacional The report on g1 (Image: Bruno at his desk on Jornal Nacional, with his name and “Designer de aplicativos” in the lower third) Images: TV Globo / Jornal Nacional, Dec 22, 2017 · [Full report on g1](https://g1.globo.com/jornal-nacional/noticia/2017/12/mudancas-na-sociedade-fazem-surgir-novas-profissoes.html) 00 / Context ## A store everyone knows, moving to the phone. The goal, as I wrote it on the design board: build a relationship with customers and make selling easier. Taking the physical store online was about making people’s lives easier. The people who shop at Pernambucanas are men and women, kids and grandparents. One app had to welcome all of them, keep the relationship going and sell, without turning into a catalogue. The icons I drew for the people who shop there - (Image: Him) - (Image: Her) - (Image: Kids) - (Image: Grandparents) 01 / Street research ## We took the research to the street. Before drawing screens, we went where the shopping happens. We ran guerrilla research in stores and on the street: short conversations with customers, and with the sales staff who hear their questions every day. On the street ### Customers and sales staff. Quick, informal interviews in and around the stores: how people choose, what makes them come back, what they ask the staff, and where a phone fits in all of it. Inside the company ### How Pernambucanas saw research. We also worked with Pernambucanas’ own team to understand how they thought about research, and brought what we heard on the street into the brief and into every review of the screens. The questions that guided the screens 1. What should open the app, before anyone searches? Home shortcuts 2. Which offers matter to this person? Offers 3. What do people ask before they buy? Product: colours, sizes, reviews 4. How do we keep them coming back between purchases? The Wall 02 / Process ## Structure, layout, prototype, in the tools of 2017. The year in five phases. It is the same order I explained on Jornal Nacional: a skeleton first, then the layout, then the navigation in a prototype. 1. Start of 2017 ### Research Guerrilla research in stores and on the street, with customers and sales staff. 2. Then ### Structure in Photoshop Every flow as a skeleton: what goes on each screen, and where, before any colour. - 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 How my wireframe flows looked on screen in the report: a flow from another project, the same way of working. Images: TV Globo / Jornal Nacional, Dec 22, 2017 3. Then ### Layout in Sketch Colour, type and images over the skeleton, in the brand’s blue and yellow. - 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. Then ### Prototypes in InVision, Marvel and Principle The screens linked so people could tap through the app, and the motion of each transition. - InVision - Marvel - Principle Seu produto está aqui! Lorem ipsum lectus neque iaculis, lectus Suspendisse laoreet, vitae. Login com Google Cadastre-se Entrar 5. 2017 ### Launch The app goes out to the stores’ customers. 03 / The app ## The screens, and a flow you can tap. The key screens, rebuilt from my 2017 design, and the decision behind each one. Then the flow as a prototype: sign in, open a product, buy it, check out. 03.1 ### One app, many uses As the board put it: an app that seeks a relationship with customers and makes selling easier. One sign-in, with Google or an account, opens the whole store. 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 ### Easy and interactive The main page is made of categories and the app’s main features, each one tap away: 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 ### Products made for you Beyond the relationship, the app is there to sell, bringing offers through a smart filter for each kind of user. 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 ### More information when you buy Clearly and objectively, the user sees the reviews and the details of every product listed: colours, sizes and what other buyers said. Try the colours and sizes 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 ### A short way to pay The bag lists each item with its colour and size, a gift option, the quantity and the total, then one yellow button. 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 ### One place, news all the time The Wall is a place for every kind of news and activity the app can bring: an order on its way, a look for the season, new accessories. 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 Also in the flow A clickable prototype of the Pernambucanas app Tap “Entrar” to sign in Screens rebuilt in code from my 2017 design for Pernambucanas. 04 / Outcome ## From launch to 1.2 million users. The app reached 1.2 million users, and that success is what caught TV Globo’s attention by the end of the year. 1. 2017 ### Launch The app reaches the stores’ customers. 2. After launch ### 1.2 million users The Pernambucanas app reaches 1.2 million users. 3. Dec 22, 2017 ### On Jornal Nacional TV Globo features the work in a report on new careers, with me as the app designer. What success looked like - Approval: A design the client signs off on, built with their own team - Sales: More sales through the app, from offers that fit each customer - Rating: A strong rating in the app stores The goals the project was designed for. 05 / On Jornal Nacional ## And that is what brought Jornal Nacional to the office. The app’s success caught TV Globo’s attention. On December 22, 2017, Jornal Nacional aired a report on the new careers a changing society creates, and app designer was one of them: the crew filmed me at my desk at Kanamobi, for my first TV interview. On air I explained the same three steps this page has walked through: structure, layout, prototype. Here is the report, minute by minute, with my parts marked: click one to watch it in the video at the top. 1. 00:00 ### The anchors open the topic Crisis, time and technology push some jobs aside while new kinds of work appear. 2. 00:14 ### Reporter Renata Ribeiro, in São Paulo We introduce ourselves by what we do, but some of the new careers are not even in IBGE’s catalogue of occupations yet. 3. 00:44 ### “Sou designer de aplicativo” On air for ~3 s I introduce myself as an app designer, with the lower third that made it official. 4. 00:47 ### At work: structure → layout → prototype On air for ~26 s At my desk and with the reporter, I explain how an app is made: a skeleton first, then the layout, then the navigation in a prototype. > “A gente monta um esqueleto para depois criar o layout.” > > “We build a skeleton, and then we create the layout.” 1. **Structure** *The skeleton* What goes on each screen, and where, before any colour. 2. **Layout** *What you see* Colours, type and images on top of the skeleton. 3. **Prototype** *Tap through it* The screens linked, so the app can be tried before it is built. See these steps in the app’s process ↑ 5. 01:13 ### More new careers in tech A mobile developer and a requirements analyst explain their jobs, and the report runs through others: data architect, network engineer, sustainability manager, gerontologist. 6. 02:14 ### A Sebrae specialist on what is growing Work in mobile technology is in demand, and so are services that solve everyday problems, like delivering home-made lunches. 7. 02:44 ### Careers with a past A video rental shop, at its peak in the late 1980s, sees its trade fading; the report closes on how the world, and our habits, keep changing. Source: Jornal Nacional / g1, Dec 22, 2017 · [Read and watch on g1 ↗](https://g1.globo.com/jornal-nacional/noticia/2017/12/mudancas-na-sociedade-fazem-surgir-novas-profissoes.html) 06 / Behind the scenes ## Behind the scenes. The day the crew came, and the night it aired, as the people around me saw it, with a few seconds of the report. Pick a photo up, move it around, open it. drag them around · click to open · arrow keys move a focused photo Globo got my name wrong: “Bruno de Lorenzo” 😅 Looking back ## What I would do today. And what I would keep. Keep I would keep the street research: talking to customers and sales staff shaped the screens more than any brief. Change today Today I would plan how to measure the app from the first day, so its value rests on more than one number, and I would prototype in a single tool instead of three. Credits - Clips and TV images: TV Globo / Jornal Nacional, Dec 22, 2017, from my own recording; only my part of the report. - Behind-the-scenes photos, stories and posts: The colleagues and friends who were there, kept as they posted them. - App screens: Rebuilt in code from my 2017 design for Pernambucanas, made at Kanamobi. [Open the report on g1 ↗](https://g1.globo.com/jornal-nacional/noticia/2017/12/mudancas-na-sociedade-fazem-surgir-novas-profissoes.html) [Next project **Oitchau**](https://brunodelorence.com/oitchau) Start a conversation ## Looking for a design engineer? Let’s talk about your product, your team, and where design can create the most value. - Call duration: 20-30 minutes - Topic: Design engineering - Price: Free [Contact Bruno](https://wa.me/5511991108680)