ux - jornal do carro

75
Bom Negócio

Upload: lisandra-maioli-user-experience

Post on 12-Apr-2017

115 views

Category:

Design


3 download

TRANSCRIPT

Page 1: UX - Jornal do Carro

Bom Negócio

Page 2: UX - Jornal do Carro

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

Page 3: UX - Jornal do Carro

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

Page 4: UX - Jornal do Carro

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

Page 5: UX - Jornal do Carro

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

Page 6: UX - Jornal do Carro

Overview das páginas

Page 7: UX - Jornal do Carro

Carrossel (marcas)

Contador decrescente

Filtro para buscar ofertas da semana

Busca Avançada

OfertasPaginação

1.0.JDC-Desktop-Home

AlertaOrganizar por

Anúncios encontrados/Visualizar por

Page 8: UX - Jornal do Carro

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

Page 9: UX - Jornal do Carro

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

Page 10: UX - Jornal do Carro

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

Page 11: UX - Jornal do Carro

Receba alerta - hover

Receba alerta - ativo

Navegação Resultado de Busca

1.0.JDC-Desktop-Home

Page 12: UX - Jornal do Carro

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 Busca1.0.JDC-Desktop-Home

Page 13: UX - Jornal do Carro

Resultado de Busca1.0.JDC-Desktop-Home

Solicite proposta - hover Solicite proposta - ativo

Page 14: UX - Jornal do Carro

Formatos de anúncio

Formatos de Anúncios1.0.JDC-Desktop-Home

Page 15: UX - Jornal do Carro

Sliders com os nove resultados desta página

Mapa com indicações de onde encontrar as ofertas

exibidas

1.2.JDC-Desktop-Mapa

Page 16: UX - Jornal do Carro

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

Page 17: UX - Jornal do Carro

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

Page 18: UX - Jornal do Carro

Comportamentos e Flows

Page 19: UX - Jornal do Carro

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

Page 20: UX - Jornal do 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ífica. Ele receberá alertas por email.

http://www.skyscanner.com/

Page 21: UX - Jornal do Carro

Receba ofertas (alerta)botão popup feedback

Page 22: UX - Jornal do Carro

Receba ofertas (alerta)

1)

2)

3)

Page 23: UX - Jornal do Carro

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.

Page 24: UX - Jornal do Carro

botão popup feedback

Siga esta oferta (carro)

Page 25: UX - Jornal do Carro

1)

2)

3)

Siga esta oferta (carro)

Page 26: UX - Jornal do Carro

Especificações Funcionais

Page 27: UX - Jornal do Carro

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

21

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.

34

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.

56

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.

Page 28: UX - Jornal do Carro

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

Page 29: UX - Jornal do Carro

Formatos de Anúncios1.1.JDC-Desktop-Home

1.1.JDC-Desktop-AnunciosAo 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.

Page 30: UX - Jornal do Carro

1.2.JDC-Desktop-Mapa

1.1.JDC-Desktop-AnunciosAo 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.

Page 31: UX - Jornal do Carro

1.2.JDC-Desktop-Mapa-Detalhes

1.1.JDC-Desktop-AnunciosAo 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.

Page 32: UX - Jornal do Carro

1.3.JDC-Desktop-PaginaCarro

1.3.JDC-Desktop-PaginaCarroNesta 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

Page 33: UX - Jornal do Carro

Sites Inspirações

Page 34: UX - Jornal do Carro
Page 35: UX - Jornal do Carro

Anexos - Processo

Page 36: UX - Jornal do Carro

Wires Low-Fi PaperSketch

Page 37: UX - Jornal do Carro
Page 38: UX - Jornal do Carro
Page 39: UX - Jornal do Carro
Page 40: UX - Jornal do Carro

Wires Med-Fi Balsamiq

Page 41: UX - Jornal do Carro

1.0.Capa (sem local)

Carrossel

"Relógio"

Localizador

Outros destaques

Slides

Marcas

Carimbo “Bom Negócio"

Informações da Oferta

Bom Negócio

Page 42: UX - Jornal do Carro

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

Page 43: UX - Jornal do Carro

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

Page 44: UX - Jornal do Carro

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

Page 45: UX - Jornal do Carro

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

Page 46: UX - Jornal do Carro

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

Page 47: UX - Jornal do Carro

Opção de CapaBom Negócio

Page 48: UX - Jornal do Carro

Opção de CarrosselBom Negócio

Page 49: UX - Jornal do Carro

Sites Inspirações

Page 50: UX - Jornal do Carro

+

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

Page 51: UX - Jornal do Carro
Page 52: UX - Jornal do Carro

CCA e Benchmarking

Page 53: UX - Jornal do Carro

VW

Page 54: UX - Jornal do Carro

Smart

Page 55: UX - Jornal do Carro

Ford

Page 56: UX - Jornal do Carro

VW

Page 57: UX - Jornal do Carro

VW

Page 58: UX - Jornal do Carro

VW

Page 59: UX - Jornal do Carro

Chevrolet

Page 60: UX - Jornal do Carro

Fiat

Page 61: UX - Jornal do Carro

LocalFiat

Page 62: UX - Jornal do Carro

Renault

Page 63: UX - Jornal do Carro

VW

Page 64: UX - Jornal do Carro

VW

Page 65: UX - Jornal do Carro

Mini

Page 66: UX - Jornal do Carro
Page 67: UX - Jornal do Carro

Fiat

Page 68: UX - Jornal do Carro

Airbnb

Page 69: UX - Jornal do Carro

hostels.com

Page 70: UX - Jornal do Carro

Skyscanner

Page 71: UX - Jornal do Carro

Journey map

Page 72: UX - Jornal do Carro
Page 73: UX - Jornal do Carro
Page 74: UX - Jornal do Carro
Page 75: UX - Jornal do Carro

UXpressoCafe.com