UX - Online Classify wireframe

Carlos decidiu vender seu carro usado e ﬁnalmente
comprar seu primeiro carro zero. Ele já sabe mais
ou menos seu budget, além do valor que poderia
dar de entrada e em parcelas mensais.
Não sabe ainda qual marca/modelo de carro vai
comprar, mas já tem 3 marcas em mente que acha
mais interessantes.
Ele tem pesquisado para saber sobre vantagens/
desvantagens dos carros que selecionou como:
custo-benefício e gastos mensais de manutenção,
combustível e seguro.
Desejo: Carlos quer comprar seu carro novo e se
sentir bem com a sua compra!
Carlos, 36, publicitário, tech savvy,
solteiro, mora em São Paulo
Persona
Pain Points Needs • Comparar diferentes opções de
modelos e marcas
• Descobrir melhores ofertas
disponíveis na sua região
• Encontrar ofertas dentro de seu
orçamento e com as melhores
condições de pagamento
• Dúvida entre 3 marcas
• Falta de tempo para
pesquisar e comparar
• Orçamento apertado
Bom Negócio

Carlos deﬁne
budget e
quanto
poderia
pagar por
mês
Pesquisa
carros de
diferentes
marcas por
valor
Seleciona e
compara as
opções mais
interessantes
Busca por
lojas mais
próximas
Entre em
contato/
solicita quote
online para
lojas
selecionadas
Vai até a loja
para
negociar/
fechar
Jornada do Usuário Bom Negócio

Deﬁne região/
localização
Escolhe
Marca/Preço
Encontra/
Compara
Entra em
contato
Vê mais
detalhes
User Flow
Recebe alerta/
Entra no site
Vai à loja/
Fecha negócio
Bom Negócio

Bom Negócio
Deﬁne
localização
Filtra por
modelo,
marca e
preço
Visualiza
no mapa
Vê detalhes
no mapa
Vê detalhes
na página do
carro
Vê detalhes
na página do
carro
Task Flow

Carrossel (marcas)
Contador decrescente
Filtro para buscar
ofertas da semana
Busca Avançada
Ofertas
Paginação
1.0.JDC-Desktop-Home
Alerta
Organizar por
Anúncios encontrados/
Visualizar por

Logos das
marcas em
destaque
Navegação dos
slides
Geolocalização
Link para query de
resultados de ofertas
da marca
específicamente
Slide anterior Próximo slide
Localização
identificada
Contador
(sempre visivel)
Carrossel/Localização
Localização não identificada
Localização identificada

Slider das marcas,
selecionáveis com
um clique
Slider dos modelos,
selecionáveis com
um clique
Busca avançada
Filtro de Preço
Slecionar apenas
ofertas com
carimbo “Bom
Negócio"
Filtos

Possibilidade de
visualização em
Grid e em Mapa
Número de
anúncios
encontrados
Cadastro para
receber alertas de
preço
Organizar por
preço
Paginação/
Navegação para
visualizar próximos
anúncios
Navegação Resultado de Busca

Receba alerta - hover
Receba alerta - ativo
Navegação Resultado de Busca

Logo, Marca e
modelo do carro
(obrigatório)
Especiﬁcações do
carro (obrigatório)
Imagem do carro
(obrigatório)
Preço (que pode
ser com desconto)
Contatos com o
vendedor (email e
telefone obrigatórios/
whatsapp opcional)
Carimbo animado
“Bom Negócio” (se
pago pelo
anunciante)
Informação
relevante do
mercado
(opcional)
Envio de telefone/
email para vendedor
entrar em contato
(obrigatório)
Resultado de Busca

Resultado de Busca
Solicite proposta - hover Solicite proposta - ativo

Formatos de anúncio
Formatos de Anúncios

Sliders com os
nove resultados
desta página
Mapa com
indicações de onde
encontrar as ofertas
exibidas
1.2.JDC-Desktop-Mapa

Anúncio selecionado
para ser visualizado
no mapa
Detalhes da oferta
ao clicar no ícone no
mapa (como Airbnb)
1.2.JDC-Desktop-Mapa-
Detalhes

Informações
do carro
Mais ofertas do
mesmo anunciante
Informações do
vendedor/anunciante
Informações
do carro
Compartilhar nas redes
Sociais
"Siga este carro""
1.3.JDC-Desktop-
PaginaCarro

FLOWs:
- Receba ofertas/alerta
- Siga esta oferta/carro

Receba ofertas (alerta)
botão popup feedback
A ideia é seguir o modelo de alertas como o do Skyscanner: o usuário pode receber alertas
de ofertas de carros referentes a uma pesquisa realizada. Ou seja, o alerta é baseado na
query gerada pelo usuário para a busca especíﬁca. Ele receberá alertas por email.
http://www.skyscanner.com/

1)
2)
3)

http://www.mojomotors.com/
Siga esta oferta (carro)
A ideia é seguir o modelo de alertas como o do Mojo Motors: o usuário pode
receber alertas de alteraçoes de preços referente a oferta de carro que está
seguindo. A diferença entre o ﬂow da Mojo e o nosso, é que a Mojo pede
que o usuário faça login, nós vamos, por enquanto, ter o mesmo ﬂow do
alerta (anterior): o usuario receberá alertas por email.

1)
2)
3)

Ao entrar pela primeira vez na página, o usuário irá visualizar todas as
ofertas com carimbo “Bom Negócio”. O usuário será convidado a
fornecer a localização ou região de busca como nas páginas de Ofertas
de Montadoras (Benchmarking).1
2
1
2
O contatador mostrará quanto tempo os anúncios da semana ainda
estarão no ar.
O usuário poderá informar sua Cidade, CEP ou selecionar a opção para
que seu local seja identiﬁcado automaticamente.
3 Mais de uma marca de carro poderá ser selecionada no slider.
3
4
4 Automaticamente, os modelos das marcas selecionadas serão exibidias
no slider de modelos. Assim como no slider de Marcas, o usuário poderá
selecionar mais de modelo.
5 Opção para selecionar range (valor mínimo-máximo) de valores das
ofertas. Default será a opção de zero a total. Será visualizado número
total de resultados conforme o usuário altera os valores.
5
6
7
6
Opção de seleção para visualizar apenas ofertas com o selo “Bom
Negócio"
7 Opção de selecionar mais detalhes de ﬁltro em uma busca avançada
(DEFININDO)
8 9
8 Número de resultados encontrados.
9
Opções de visualizar os resultados de Busca em formato grid (como
visualizado nesta imagem) ou em Mapa (1.2)
10 11
10
Paginação da lista de resultados da busca. Serão exibidos 6 resultados
por página
9 Opção de organizar as ofertas por Preço.

12
13
14
15
16
17
18
19
20
12
Ao clicar em “Receba alertas”, serão exibido pop up para que o usuário
forneça seu email para receber alertas de acordo com seus resultados
de busca (como no Skyscanner).

Formatos de Anúncios
1.1.JDC-Desktop-Anuncios
Ao fornecer sua localização ou fornecer a região da busca, os anúncios
abaixo serão automaticamente reorganizados para apresentar os
anúncios da região selecionada. O mesmo acontecerá ao se mudar as
opções do ﬁltro.

1.2.JDC-Desktop-Mapa

1.2.JDC-Desktop-Mapa-Detalhes

1.3.JDC-Desktop-PaginaCarro
1.3.JDC-Desktop-PaginaCarro
Nesta página, o usuário poderá ver detalhes e especiﬁcações do carro,
bem como galeria de imagens, informações e contatos com o vendedor
e mais ofertas do Vendedor

1.0.Capa (sem local)
Carrossel
"Relógio"
Localizador
Outros destaques
Slides
Marcas
Carimbo “Bom
Negócio"
Informações
da Oferta
Bom Negócio

1.2.Capa (com local)
Local
Ver no mapa
(lojas) / Compare
Outra opção de
marcador de slide
“por marca"
Tabs Marcas
Ver mais detalhes
(ir para página
do produto)
“Ver oferta"
Scroll para
ver mais (ou
paginação)
Bom Negócio

1.3.Capa - Mapa
Visualização
no mapa
Opção de escolher
até 3 carros (ou
mais?)
Clique para
selecionar e
visualizar no mapa
Detalhes sobre
oferta e loja
(resumido) Ir para
página da
oferta (mais
detalhes)
Bom Negócio

FIltrar apenas
ofertas “Bom
Negócio” (como
“Prime" da Amazon)
Selecionar budget
Selecionar marcas
Selecionar
Modelo
1.3a.Capa - Mapa (opção de filtro) Bom Negócio

Opção de
ﬁltro reduzido
Possibilidade de
ter mais opções
de ﬁltros (como
Airbnb)
1.3b.Capa - Mapa (opção
de filtro reduzido)
Bom Negócio

Opção de layout para filtro/ mapa Bom Negócio

Opção de Carrossel
Bom Negócio

+
Inspiração: Airbnb + VW Bom Negócio

UX - Online Classify wireframe

Mais conteúdo relacionado

Destaque

Semelhante a UX - Online Classify wireframe

Mais de Lisandra Maioli

UX - Online Classify wireframe