Solúvel

Design
Process
Um breve cenário sobre
o processo do design
digital e suas entregas.
 Solúvel Design Process

Etapas
Com a visão holística do Design
UX UI DEV
aplicado ao Digital, podemos EXPERIÊNCIA INTERFACE DESENVOLVIMENTO
segmentar algumas etapas DO USUÁRIO DO USUÁRIO PROGRAMAÇÃO

no nosso processo
de desenvolvimento

DESIGN ENGENHARIA DE SOFTWARE

 Solúvel Design Process

UX
PESQUISA

Através do UX exploramos as necessidas

do usuário, com as premissas do negócio
onde buscamos não só a coleta das DESCOBERTA
informações, mas também o entendimento
e os possíveis caminhos a serem
selecionados para o desenvolvimento
IDEAÇÃO

OPORTUNIDADES

DOCUMENTAÇÃO
 Solúvel Design Process

PR
O
O TO
Ã

T
UI

EA

IP
A
ID

GE
M
Quando iniciamos o UI,
visa tangibilizar e prototipar
para testar e validade as premissas USER INTERFACE
do projeto, visando a usabilidade,
objetivos de negócio e principalmente
o handoff para o dev.

TE
F

S
F

T
O E
D S
N
HA
Heardbout
Branding, Graphic, Product Design

Heardbout is a platform
that connects brands
and products to local
influencers, promoting
engagement and benefits.
Context
why how what

The startup needs Research with PO’s Design the brandbook,

to find the brand values and potential users, key visual and deploy
and connect with to find the brand values on website and app.
real user through purpose. and the user needs.
Challenge
Identify opportunities to enhance the connection between products, brands and people
in the local market.

The startup had some ideas and wireframes, but without users infos, bringing challenge
to find the infos through brand concepts and user experience, to create the project base.

Why create this product?

What brand values do users and owners need?
Who is target?
What are the main goals of the products?
 Apps mais utilizados no Brasil 2019 Comunicação x Engajamento Instagram Influencer Tiers

100

90

80

70 Mega 1m+

60
50

40
76%
das pessoas já compraram
Macro 500k - 1m

algo por meio de indicação

30 de influenciadores digitais
Mid 50k - 500k

20 Micro 10k-50k

10 Nano 1k-10k

00
Followers
Instagram

Facebook

Linkedin
Youtube

Twitter

*Qualibest + Spark *MediaKix

*Social Media 2019 // Rock Content

Quotes Pros & Cons

“A falta de fama é uma das qualidades "O nanoinfluenciador gera uma troca + Investimento mais baixo - Muitos perfis com boot
que os tornam acessíveis. profunda com a audiência dele. + Agilidade na parceria e contratos - Modificação de dados facilmente
Quando eles recomendam um shampoo, É uma pessoa com a qual o público + Autonomia da empresa para escolha - Escolha mais precisa (nicho)
loção ou marca de móveis no Instagram, se identifica e sente uma sensação + Marketing menos agressivo - Maior número para mensurar
a palavra deles parece tão genuína quanto de segurança, pois os dois lados + Conexão mais real
os conselhos de um amigo”. vivem as mesmas coisas".
— The New York Times — Ananias Neto (Kaerre)
Cláudia
Empresária
35 anos
She promote national and international
parties and concerts in Caxias do Sul area,
She’s always been connected to people
to know what is desires and needs to promote
events. This is important, mainly beacuse budget
is too high. The most part of investments are made
by digital influencers.
Connection and business are points
that influence in her decision making.
Marina
Estilista de Moda
24 anos
Marina has 1.5k followers on Instagram,
She shares photos and her fashion creation
daily on social media. Already try making
partnerships with local brands, but, it was possible,
because she doesn’t have many followers.
She likes to go to parties, but she doesn't
go to many because it is very expensive.
Convenience and comfort are concepts
that she values when using apps such
as iFood and Uber.
Context
Through a diagnosis of the brand and target audience,
some key concepts were defined to guide
for the beginning of the development.

entrepreneurs > (nano)influencers > target

safety > simplicidade > clean

connection > share > benefit

Branding
bench

Apps Style

lowercase; bold; simplicity; solid colors lines; bold; simplicity; minimal ; ludic

colors inspiration

safety well being joy attention entrepreneur (nano)influencer benefit tech

App
80
people research
In the app we seek to understand how platforms users interact
to replicate constant use, facilitating connection and usability.
Initially the app will focused primarly on nano influencers users.

Research

Most used social network daily? Most used device? Most accessed websites daily?
Mapping what type of content is easier to assimilate. Wha is the influency about responsive and content
(texts, images etc.) through platforms
Instagram Smartphone

Facebook Notebook

Linkedin Desktop

Twitter 00 10 20 30 40 50 60 70 80 90 100

Linkedin
00 10 20 30 40 50 60 70 80 90 100

What is the purpose? Access point

Understant moments of the day to connect Loading and fast access
infos and entretainment

Information Wifi

Work 4g

Entertain 00 10 20 30 40 50 60 70 80 90 100
00 10 20 30 40 50 60 70 80 90 100
CUSTOMER JOURNEY

Download Link to Complete Select Find Sharing on Validate Use the

Moments App
Login/ Sign up
instagram Profile Preferences Promotion Instagram post voucher

Initial page
Apple Store Instagram Profile Screen Preferences Promotion Instagram
Touchpoints Google Play Facebook
App
Photo Album Screen Screen Stories
Company Checkout
E-mail

Connection Clear
Easy to find Easy to find Reliable Basic infos Easy to find Reliable
Expect Agility Agility Agility Safety
with desire
and needs
Easy to find
Agility
Agility
Agility
Agility

+ Login with Instagram + Hard to read infos,

+ There’s no info about
account redirect to keyboard above fields
Pains Facebook.
+Two action for the
+ Easier way to complete
profile with pre define
voucher use request
+ How much time to
company validate voucher
same purpose datas
Flow
Validar
Entrar
Instagram

Início

Código de
e-mail Registre-se
Verificação

Página de Login

instagram Código de
Recuperar senha e-mail
Verificação

Nano influencer task Completar

Perfil

Escolher
Preferências

Início
Atualizar
Preferências

Atualizar Dados

Ofertas Vouchers Histórico Perfil

Logout

Confirmar
Visualizar Utilizar Visualizar
Oferta Voucher Histórico
Desativar ALERTA
conta

Cancelar
Compartilhar
Validar Voucher

ALERTA

Cancelar Confirmar
Confirmar ALERTA OK

ALERTA
Enviar para ALERTA
conferência

Cancelar

Compartilhar Reportar
Cancelar Abrir Enviar
Stories Problema

Cancelar
Postagem
 Promoções

Wireframe *analisar telas

Splash Screen Login Informações/Perfil

Prototype low-fi heardbout

nome do evento

*preferência pelo *caixa baixa no e-mail * teclado está sobre as * trabalhar tela mais
instragram *mínimo de 8 caracteres informações “ilustrativa”(imagens)

?
* ir para página ofertas

nome do evento

validade 00/00/0000 a 00/00/0000

visualizar

nome do evento

validade 00/00/0000 a 00/00/0000

*saida mais “distante”

Perfil
Learning
deals
Understand the real
problems and negotiate
with owners and stakeholders
to change some features.
user experience apple store developer
Discover some pains Some features were denied Working with the dev based
and desires to use in by Apple Store, generating in London. The time zone
the app. delay and new directions was a great learning, but
for the project. specially to understand
the dev’s vision.
Aviso Viagem
Desafio CI&T
Contexto
Imagine que você trabalha em um time que atua de ponta-a-ponta
do desenvolvimento de uma mobile app de cartão de crédito.

Desafio
Como podemos adicionar uma experiência de "aviso viagem" ao nosso app?

Objetivo
Fazer com que o máximo de usuários consigam se auto-servir caso precisem avisar sobre uma viagem.
 Pesquisa Flow Protótipo

Desk Research User Journey Protótipo de baixa fidelidade

Pesquisa Quantitativa User Flow para a solução
Pesquisa Qualitativa
 Porque habilitar o Aviso Viagem?

O Aviso Viagem é feito para a sua segurança

Caso você vá viajar para algum país diferente daquele em que o seu cartão
de crédito foi emitido, saiba que é necessário fazer o Aviso Viagem, que é a
comunicação das datas e destinos da viagem para que a administradora faça
o desbloqueio para utilização. Este procedimento é uma medida de segurança,
sendo obrigatório para todos os cartões internacionais. Caso o cliente não
efetive a comunicação ele corre o risco de ter o cartão bloqueado no exterior
e, consequentemente, ser impedido de realizar compras com cartão de crédito.
fonte: https://www.cartaoacredito.com/aviso-viagem-e-obrigatorio-para-uso-de-cartao-de-credito-no-exterior/
 font: ABECS

EUROPA 35,1%
ÁSIA 3,5%
EUA 47,1%

AFRICA 1,0%

AMÉRICA SEM EUA 12,2%

OCEANIA 1,1%

EUA e Europa concentram

mais de 80% dos gastos
de brasileiros no exterior
Pesquisa Resoluções e Tendências

Fonte: G1 - https://g1.globo.com/economia/noticia/2020/03/01/comeca-a-valer-uso-da-taxa-de-cambio-do-dia-gasto-no-exterior-no-cartao-de-credito.ghtml Fonte: ABECS - https://api.abecs.org.br/wp-content/uploads/2020/05/Apresentac%CC%A7a%CC%83o-Balanco-1T20.pdf

Gastos de brasileiros no exterior

aumentam 9% no primeiro trimestre
de 2020 totalizando R$ 7,6 bi

Fonte: Meliuz - https://www.meliuz.com.br/blog/futuro-do-consumo/ Fonte: ABECS - https://api.abecs.org.br/wp-content/uploads/2020/05/Apresentac%CC%A7a%CC%83o-Balanco-1T20.pdf

Pagamento por aproximação cresce

456% e movimenta R$ 3,9 bilhões
Pesquisa Qualitativa

Pontos de preocupação no período antes da viagem

90,5 %
Alta
Reservar hotéis é a ação mais apontada
Baixa
Habilitar o Aviso Viagem está entre as opções
como preocupação antes das viagens com baixa preocupação antes das viagens

Dos entrevistados possuem entre 18 a 40 anos

22
Bloqueio
%
62
Lazer
%
90,5
Comida
%

29 % 12 %
Não saber qual valor
está sendo pago
81 % 33 %
Lazer e Trabalho 52,2 % 57 %
Transporte

38 %
Transporte

Relataram já ter tido problemas Tem viajado com uma frequência de 1x ao ano Fazem compras com cartão de crédito no exterior
com cartões em viagens
Pesquisa
Principais bancos/fintechs que possuem cartão User task - tarefa para achar a função Aviso Viagem

4.2 4.5

50
segundos
26
segundos
38
segundos
30
segundos

Pontos chave
4.5 4.1 #nomenclaturas; #localização; #menu; #etapas

Citações
O paulista Marcelo Migotti, cliente do cartão Nubank,
é um dos que elogiaram a transparência na hora
de conferir os gastos no aplicativo:
“Com o cartão Nubank, eu sempre sabia o que estava
pagando – além de ter sido aceito em todos os lugares
durante a viagem”.
A designer Thalita Godoy, cliente do Bradesco,
ressalta o ponto de facilidade ao acesso
do “Aviso Viagem”.
“Poderia ter algo que me avisasse uns dias antes
da minha viagem para eu habilitar a função”.
O engenheiro Gustavo, cliente do Banco do Brasil,
traz a questão sobre deixar confiabilidade.
“Quando habilito eu não sei se foi e também
se o período está correto”.
Pontos Chave

Transparência Fácil Acesso Confiabilidade Suporte

Transparência em saber sobre Não ser burocrático, Estar fora do país de origem Fazer parte da viagem
a ativação do aviso viagem que tenha uma facilidade pode ser um transtorno para resolver é um ponto de conforto.
e também sobre os valores no momento de ativar. problemas. Ser um serviço que dê
a serem pagos nas compras. confiança é um ponto chave.
 sEGURO fAZER AS MALAS

Jornada P ORTE rOTEIRO hOTÉIS

PA S S A
cOMPRAR
cARTÃO DE CRÉDITO DINHEIRO

Realizando um storyboard
para contar a história
da persona, apontando
algumas oportunidades Meses atrás Thalita decidiu que iria viajar. Estudou e decidiu a data da viagem. Tickets em mãos agora é se organizar Viajar é bom, mas são tantas coisas

dia da viagem aeroporto

?
aviso viagem

Chegou o dia da viagem Chegada no aeroporto, Thalita lembra Através do app é realizado o Aviso Viagem, Hora do vôo
que não habilitou o Aviso Viagem porém na dúvida se está tudo certo

resturante aeroporto fatura

menu
u$
u$
u$

Na chegada, foi comer um lanche Quanto será que irei pagar neste lanche? Será que preciso desabilitar algo? Planejamento para o pagamento da fatura
Fluxo 1 2 3 4
O usuário acessa Realizar as configurações Acionar produtos Vai utilizar o app para
O objetivo principal do Fluxo
é mapear e entender que o com antecedência para de acordo com a viagem e serviços realcionados controlar os gastos
Usuário ative o “Aviso Viagem” habilitar o Aviso Viagem. a viagem
e que dê suporte nos gastos
durante a viagem.

FLUXO NOTIFICAÇÃO

data viagem
start
início e fim
sim
login aviso viagem confirmar
senha

notificação acessar países

conectado ao calendário américa do norte, europa, ásia, etc.

saída da notificação
não

sim
ex. modo viagem

modo viagem

não

FLUXO APP

start

data viagem

início e fim

aviso viagem confirmar

home login acessar home padrão menu viagens senha

países

américa do norte, europa, ásia, etc.

sim
ex. modo viagem

modo viagem

não
Sketches
Os sketches visam esboçar
as ideias iniciais e também
gerar um primeiro refinamento
Protótipos Home Viagem

Notificação Splash Home Padrão Menu Menu Viagens Configurações Confirmação/Produtos

Alteração País

Menu Alteração

Alteração Data
Protótipos Home Viagem

Notificação Splash Home Padrão Menu Menu Viagens Configurações Confirmação/Produtos

Alteração País

Menu Alteração

Alteração Data
Referências Bancos/Fintechs

Banco do Brasil NuBank Bradesco Apps

Moodbard
Stylish Fonts, Cores, Ícones

Branding Ícones

Cores Fonts

#D71F3B #FFFFFF #434343

Aa
Montserrat Regular
Aa
Montserrat Bold
Aa
SF Pro Text

#23BEC6 #181818 #434343 50%

Aa
Montserrat Medium
Aa
Montserrat Black
Telas
Handoff

Link
Solúvel
Design
Process
Obrigado!