Responsive design for an online Classify. UX Designer: Lisandra Maioli Webdesigner: Euler Araújo.

1. Bom Negócio

2. Carlos decidiu vender seu carro usado e finalmente
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

3. Carlos define
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

4. Define 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

5. Bom Negócio
Define
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

6. Overview das páginas

7. 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

8. 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
1.0.JDC-Desktop-Home
Localização não identificada
Localização identificada

9. 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
1.0.JDC-Desktop-Home

10. 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
1.0.JDC-Desktop-Home

11. Receba alerta - hover
Receba alerta - ativo
Navegação Resultado de Busca
1.0.JDC-Desktop-Home

12. Logo, Marca e
modelo do carro
(obrigatório)
Especificaçõ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
1.0.JDC-Desktop-Home

13. Resultado de Busca
1.0.JDC-Desktop-Home
Solicite proposta - hover Solicite proposta - ativo

14. Formatos de anúncio
Formatos de Anúncios
1.0.JDC-Desktop-Home

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

16. 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

17. 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

18. Comportamentos e Flows

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

20. 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ífica. Ele receberá alertas por email.
http://www.skyscanner.com/

21. Receba ofertas (alerta)
botão popup feedback

22. Receba ofertas (alerta)
1)
2)
3)

23. 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 flow da Mojo e o nosso, é que a Mojo pede
que o usuário faça login, nós vamos, por enquanto, ter o mesmo flow do
alerta (anterior): o usuario receberá alertas por email.

24. botão popup feedback
Siga esta oferta (carro)

25. 1)
2)
3)
Siga esta oferta (carro)

26. Especificações Funcionais

27. 1.0.JDC-Desktop-Home
1.0.JDC-Desktop-Home
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 identificado 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 filtro 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.

28. 1.0.JDC-Desktop-Home
1.0.JDC-Desktop-Home
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).

29. Formatos de Anúncios
1.1.JDC-Desktop-Home
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 filtro.

30. 1.2.JDC-Desktop-Mapa
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 filtro.

31. 1.2.JDC-Desktop-Mapa-Detalhes
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 filtro.

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

33. Sites Inspirações

35. Anexos - Processo

36. Wires Low-Fi PaperSketch

40. Wires Med-Fi Balsamiq

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

42. 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

43. 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

44. 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

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

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

47. Opção de Capa
Bom Negócio

48. Opção de Carrossel
Bom Negócio

49. Sites Inspirações

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

52. CCA e Benchmarking

53. VW

54. Smart

55. Ford

56. VW

57. VW

58. VW

59. Chevrolet

60. Fiat

61. Local
Fiat

62. Renault

63. VW

64. VW

65. Mini

67. Fiat

68. Airbnb

69. hostels.com

70. Skyscanner

71. Journey map

75. UXpressoCafe.com