PrincipleKeep
I would keep the street research: talking to customers and sales staff shaped the screens more than any brief.
As seen on Jornal NacionalThe Pernambucanas app: a store in the pocket, from street research to 1.2M users.
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.
1.2M
Users of the Pernambucanas app
Pernambucanas mobile app2017
Designed and launched within the year
Kanamobi, a squad of five22.12.17
On TV Globo’s Jornal Nacional
The report on g1
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
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
- What should open the app, before anyone searches?Home shortcuts
- Which offers matter to this person?Offers
- What do people ask before they buy?Product: colours, sizes, reviews
- 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.
Isometric wireframe of the Pernambucanas home screen, in the order of the process: the structure drawn in Photoshop, the layout in Sketch, then a tab in the bottom bar tapped as in a prototype.
- Start of 2017
Research
Guerrilla research in stores and on the street, with customers and sales staff.
- 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
2Paola IndicaTop ofertasNovidadesPor tempo limitadoOfertasPreços baixosPeç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 - 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
2Paola IndicaTop ofertasNovidadesPor tempo limitadoOfertasPreços baixosPeça seu cartão!
Primeira compra com 10% e frete grátis
- 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,
Login com GoogleCadastre-seEntrar
lectus Suspendisse laoreet, vitae. - 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 DelorenceVeja e edite seu perfil
Seu produto está aqui!
Lorem ipsum lectus neque iaculis,
lectus Suspendisse laoreet, vitae.
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.
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
Products made for you
Beyond the relationship, the app is there to sell, bringing offers through a smart filter for each kind of user.
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
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
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
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.
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
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 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.
Also in the flow
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.
- 2017
Launch
The app reaches the stores’ customers.
- After launch
1.2 million users
The Pernambucanas app reaches 1.2 million users.
- 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.
Isometric wireframe of the Pernambucanas product screen, layer by layer: the structure, the layout, and the Comprar button tapped as in a prototype.
The anchors open the topic
Crisis, time and technology push some jobs aside while new kinds of work appear.
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.
“Sou designer de aplicativo”
On air for ~3 s
I introduce myself as an app designer, with the lower third that made it official.
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.”- Structure The skeletonWhat goes on each screen, and where, before any colour.
- Layout What you seeColours, type and images on top of the skeleton.
- Prototype Tap through itThe screens linked, so the app can be tried before it is built.
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.
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.
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 ↗
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.
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.
Start a conversation
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