CASE 01 · PROJETO CONCEITUAL · SITE E APLICATIVO
B2F Agência de viagem
Projeto conceitual de site e aplicativo para uma agência de viagens fictícia: busca por destino, pacotes, hospedagens e um espaço para compartilhar momentos.
FUNÇÃO
Marca, UX/UI e protótipo
MARCA
B2F (fictícia, criada para o projeto)
ANO
2024
FERRAMENTAS
Figma
01 — CONTEXTO
SITE E APLICATIVO
Da descoberta do destino à próxima viagem: uma experiência digital para a B2F.
A marca
A B2F (Born to Fly) é uma agência de viagens fictícia, criada por mim para este projeto. Defini o posicionamento, a identidade e a experiência digital: descoberta de destinos, pacotes, hospedagens e compartilhamento de momentos em site, aplicativo e versões para telas menores.
A proposta
Criar, do zero, a marca e a experiência digital de uma agência de viagens em que o viajante encontrasse destinos, comparasse pacotes e hospedagens e fechasse a viagem num só lugar. Como diferencial, um espaço próprio, o Momentos, para os viajantes compartilharem as viagens e ganharem créditos para as próximas.
TIPO
Projeto conceitual: marca, site e aplicativo
PÚBLICO
Viajantes que buscam pacotes, hospedagens e ofertas
OBJETIVO
Unir inspiração, compra e comunidade
02 — DESAFIO
4 OBJETIVOS
Reunir inspiração, compra e comunidade em uma só experiência de viagem.
01
Facilitar a busca por destino, data e número de hóspedes.
02
Apresentar pacotes com passagem e hospedagem de forma fácil de comparar.
03
Destacar hospedagens e ofertas para cada época do ano.
04
Criar um espaço para os viajantes compartilharem momentos e ganharem créditos.
03 — PROCESSO
5 ETAPAS
Da estrutura à interface: uma jornada para explorar e escolher.
01
Fluxograma
Mapa das jornadas e das telas do site e do app.
02
Moodboard
Referências visuais e direção de arte da marca.
03
Wireframe
Estrutura das páginas do site em baixa fidelidade.
04
Protótipo web
Interface em alta fidelidade para desktop.
05
Protótipo mobile
Adaptação da experiência para o celular.
Arquitetura do site
O fluxograma organiza a navegação a partir da Home: ofertas, pacotes, hospedagens, dicas, Momentos e destinos, cada um levando até a página do produto.
Home
Login e cadastro
Melhores ofertas
Página do produto
Item específico
Descrição, preço, o que oferece e avaliações
Pacotes
Melhores viagens
Mais vendidos
Momentos
Pricing
Valores dos pacotes
Hospedagens
Melhores hospedagens por destino
Item específico
Descrição, preço, o que oferece e avaliações
Dicas de viagem
Onde ir no carnaval, feriados e férias
Item específico
Descrição, preço, o que oferece e avaliações
Momentos
O que é
Como participar
Como se inscrever
Exemplos
Melhores destinos
Destinos e eventos mais desejados
Informações do produto
Descrição, preço, o que oferece e avaliações
Novos destinos
Destinos e eventos mais desejados
Informações do produto
04 — IDENTIDADE VISUAL
SÍMBOLO, CORES E TIPOGRAFIA
Born to Fly: um B que também é um avião.
O nome
B2F é a forma curta de Born to Fly, "nascido para voar": o 2 ocupa o lugar do "to" do inglês. O símbolo leva essa ideia para a forma, unindo a inicial da marca a um avião desenhado com o mínimo de traços.
Construção do símbolo
Dois triângulos empilhados formam o B. Um terceiro, sobreposto à esquerda, é o avião simplificado. Com traços de mesma espessura e cantos arredondados, os três formam o símbolo da B2F.
“B” Born
+
Avião simplificado
=
Símbolo completo
Azul-violeta
#254EF0
Preto
#000000
Cinza escuro
#9C9C9C
Cinza
#D9D9D9
Branco
#FFFFFF
Aa
Raleway
Títulos e chamadas.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Aa
Montserrat
Textos e elementos de interface.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
05 — INTERFACE
PROTÓTIPO WEB · DESKTOP
Do wireframe à interface: a estrutura se mantém, a marca dá o tom.
WIREFRAME
BAIXA FIDELIDADE
INTERFACE
ALTA FIDELIDADE
A Home completa
A página reúne a jornada inteira: busca, ofertas, pacotes, hospedagens, destinos e o convite para o Momentos.
Descobrir
A busca por lugar, data e hóspedes abre a página, seguida de ofertas e destinos.
Comparar
Cartões reúnem destino, diárias, preço e parcelamento lado a lado.
Compartilhar
O Momentos convida o viajante a contar a viagem e ganhar créditos para a próxima.
A página Pacotes
Uma vitrine de pacotes: a busca abre a página, seguida dos pacotes do ano, dos mais vendidos e do convite para usar os créditos do Momentos.
Filtrar
A busca por destino fica no topo, para o viajante ir direto ao que procura.
Comparar
Cada cartão mostra destino, diárias, preço, parcelamento e o que está incluso.
Converter
O bloco de créditos liga a compra ao Momentos e incentiva a próxima viagem.
A página Momentos
O programa em que o viajante compartilha fotos e vídeos da viagem e ganha pontos para trocar por novas viagens.
Inspirar
Fotos de viajantes abrem a página e mostram o espírito do programa.
Explicar
Números e um passo a passo mostram como ganhar e usar os pontos.
Engajar
O formulário de inscrição e o carrossel de momentos fecham a página com prova social.
06 — LOGIN E CADASTRO
PROTÓTIPO WEB · DESKTOP
Entrar e criar conta em poucos passos, com o mesmo visual do site.
Um campo por vez
O login pede primeiro o e-mail ou telefone e só depois a senha.
Atalhos visíveis
Esqueci a senha e criar conta ficam logo abaixo do formulário.
Cadastro em etapas
Nome, país, nascimento e e-mail em um painel com rolagem e botão de continuar.
07 — MOBILE
PROTÓTIPO MOBILE
A mesma linguagem, em outra escala.
HOME · BUSCA
HOME · HOSPEDAGENS
PACOTES
As telas completas
Home e Pacotes na versão para celular, de ponta a ponta: busca, ofertas, pacotes, hospedagens e rodapé reorganizados em uma única coluna.
HOME
430 PX
PACOTES
430 PX
08 — ENTREGAS E APRENDIZADOS
ESCOPO DO PROJETO
Três páginas, dois formatos e uma identidade aplicada de ponta a ponta.
03
páginas: Home, Pacotes e Momentos
02
formatos de interface: web e mobile
01
identidade visual aplicada às interfaces
O que fica
A mesma linguagem, em outra escala. As versões para telas menores reorganizam a navegação sem perder a identidade da B2F. A próxima etapa é validar os fluxos com usuários e refinar a experiência a partir dos testes.
PRÓXIMO CASE · 02
Car House Powerchip
Nathan Gabriel Santos
CASE 01 · PROJETO CONCEITUAL · SITE E APLICATIVO
B2F Agência de viagem
Projeto conceitual de site e aplicativo para uma agência de viagens fictícia: busca por destino, pacotes, hospedagens e um espaço para compartilhar momentos.
FUNÇÃO
Marca, UX/UI e protótipo
MARCA
B2F (fictícia, criada para o projeto)
ANO
2024
FERRAMENTAS
Figma
01 — CONTEXTO
SITE E APLICATIVO
Da descoberta do destino à próxima viagem: uma experiência digital para a B2F.
A marca
A B2F (Born to Fly) é uma agência de viagens fictícia, criada por mim para este projeto. Defini o posicionamento, a identidade e a experiência digital: descoberta de destinos, pacotes, hospedagens e compartilhamento de momentos em site, aplicativo e versões para telas menores.
A proposta
Criar, do zero, a marca e a experiência digital de uma agência de viagens em que o viajante encontrasse destinos, comparasse pacotes e hospedagens e fechasse a viagem num só lugar. Como diferencial, um espaço próprio, o Momentos, para os viajantes compartilharem as viagens e ganharem créditos para as próximas.
TIPO
Projeto conceitual: marca, site e aplicativo
PÚBLICO
Viajantes que buscam pacotes, hospedagens e ofertas
OBJETIVO
Unir inspiração, compra e comunidade
02 — DESAFIO
4 OBJETIVOS
Reunir inspiração, compra e comunidade em uma só experiência de viagem.
01
Facilitar a busca por destino, data e número de hóspedes.
02
Apresentar pacotes com passagem e hospedagem de forma fácil de comparar.
03
Destacar hospedagens e ofertas para cada época do ano.
04
Criar um espaço para os viajantes compartilharem momentos e ganharem créditos.
03 — PROCESSO
5 ETAPAS
Da estrutura à interface: uma jornada para explorar e escolher.
01
Fluxograma
Mapa das jornadas e das telas do site e do app.
02
Moodboard
Referências visuais e direção de arte da marca.
03
Wireframe
Estrutura das páginas do site em baixa fidelidade.
04
Protótipo web
Interface em alta fidelidade para desktop.
05
Protótipo mobile
Adaptação da experiência para o celular.
Arquitetura do site
O fluxograma organiza a navegação a partir da Home: ofertas, pacotes, hospedagens, dicas, Momentos e destinos, cada um levando até a página do produto.
Home
Login e cadastro
Melhores ofertas
Página do produto
Item específico
Descrição, preço, o que oferece e avaliações
Pacotes
Melhores viagens
Mais vendidos
Momentos
Pricing
Valores dos pacotes
Hospedagens
Melhores hospedagens por destino
Item específico
Descrição, preço, o que oferece e avaliações
Dicas de viagem
Onde ir no carnaval, feriados e férias
Item específico
Descrição, preço, o que oferece e avaliações
Momentos
O que é
Como participar
Como se inscrever
Exemplos
Melhores destinos
Destinos e eventos mais desejados
Informações do produto
Descrição, preço, o que oferece e avaliações
Novos destinos
Destinos e eventos mais desejados
Informações do produto
04 — IDENTIDADE VISUAL
SÍMBOLO, CORES E TIPOGRAFIA
Born to Fly: um B que também é um avião.
O nome
B2F é a forma curta de Born to Fly, "nascido para voar": o 2 ocupa o lugar do "to" do inglês. O símbolo leva essa ideia para a forma, unindo a inicial da marca a um avião desenhado com o mínimo de traços.
Construção do símbolo
Dois triângulos empilhados formam o B. Um terceiro, sobreposto à esquerda, é o avião simplificado. Com traços de mesma espessura e cantos arredondados, os três formam o símbolo da B2F.
“B” Born
+
Avião simplificado
=
Símbolo completo
Azul-violeta
#254EF0
Preto
#000000
Cinza escuro
#9C9C9C
Cinza
#D9D9D9
Branco
#FFFFFF
Aa
Raleway
Títulos e chamadas.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Aa
Montserrat
Textos e elementos de interface.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
05 — INTERFACE
PROTÓTIPO WEB · DESKTOP
Do wireframe à interface: a estrutura se mantém, a marca dá o tom.
WIREFRAME
BAIXA FIDELIDADE
INTERFACE
ALTA FIDELIDADE
A Home completa
A página reúne a jornada inteira: busca, ofertas, pacotes, hospedagens, destinos e o convite para o Momentos.
Descobrir
A busca por lugar, data e hóspedes abre a página, seguida de ofertas e destinos.
Comparar
Cartões reúnem destino, diárias, preço e parcelamento lado a lado.
Compartilhar
O Momentos convida o viajante a contar a viagem e ganhar créditos para a próxima.
A página Pacotes
Uma vitrine de pacotes: a busca abre a página, seguida dos pacotes do ano, dos mais vendidos e do convite para usar os créditos do Momentos.
Filtrar
A busca por destino fica no topo, para o viajante ir direto ao que procura.
Comparar
Cada cartão mostra destino, diárias, preço, parcelamento e o que está incluso.
Converter
O bloco de créditos liga a compra ao Momentos e incentiva a próxima viagem.
A página Momentos
O programa em que o viajante compartilha fotos e vídeos da viagem e ganha pontos para trocar por novas viagens.
Inspirar
Fotos de viajantes abrem a página e mostram o espírito do programa.
Explicar
Números e um passo a passo mostram como ganhar e usar os pontos.
Engajar
O formulário de inscrição e o carrossel de momentos fecham a página com prova social.
06 — LOGIN E CADASTRO
PROTÓTIPO WEB · DESKTOP
Entrar e criar conta em poucos passos, com o mesmo visual do site.
Um campo por vez
O login pede primeiro o e-mail ou telefone e só depois a senha.
Atalhos visíveis
Esqueci a senha e criar conta ficam logo abaixo do formulário.
Cadastro em etapas
Nome, país, nascimento e e-mail em um painel com rolagem e botão de continuar.
07 — MOBILE
PROTÓTIPO MOBILE
A mesma linguagem, em outra escala.
HOME · BUSCA
HOME · HOSPEDAGENS
PACOTES
As telas completas
Home e Pacotes na versão para celular, de ponta a ponta: busca, ofertas, pacotes, hospedagens e rodapé reorganizados em uma única coluna.
HOME
430 PX
PACOTES
430 PX
08 — ENTREGAS E APRENDIZADOS
ESCOPO DO PROJETO
Três páginas, dois formatos e uma identidade aplicada de ponta a ponta.
03
páginas: Home, Pacotes e Momentos
02
formatos de interface: web e mobile
01
identidade visual aplicada às interfaces
O que fica
A mesma linguagem, em outra escala. As versões para telas menores reorganizam a navegação sem perder a identidade da B2F. A próxima etapa é validar os fluxos com usuários e refinar a experiência a partir dos testes.
PRÓXIMO CASE · 02
Car House Powerchip
