CASE 01 · CONCEPT PROJECT · WEBSITE & APP
B2F Travel Agency
Concept website and app for a fictional travel agency: destination search, packages, stays and a space to share travel moments.
ROLE
Brand, UX/UI and prototype
BRAND
B2F (fictional, created for this project)
YEAR
2024
TOOLS
Figma
01 — CONTEXT
WEBSITE & APP
From finding a destination to the next trip: a digital experience for B2F.
The brand
B2F (Born to Fly) is a fictional travel agency I created for this project. I defined its positioning, identity and digital experience: discovering destinations, packages, stays and sharing travel moments across website, app and smaller-screen versions.
The proposal
Create, from scratch, the brand and digital experience of a travel agency where travelers find destinations, compare packages and stays, and book the trip in one place. As a differentiator, a dedicated space, Momentos, where travelers share their trips and earn credits for the next one.
TYPE
Concept project: brand, website and app
AUDIENCE
Travelers looking for packages, stays and deals
GOAL
Bring together inspiration, booking and community
02 — CHALLENGE
4 GOALS
Bringing inspiration, booking and community into a single travel experience.
01
Make it easy to search by destination, dates and number of guests.
02
Present packages with flights and stays in an easy-to-compare way.
03
Highlight stays and deals for every season.
04
Create a space where travelers share moments and earn credits.
03 — PROCESS
5 STEPS
From structure to interface: a journey to explore and choose.
01
Flowchart
Map of the journeys and screens of the website and app.
02
Moodboard
Visual references and the brand's art direction.
03
Wireframe
Low-fidelity structure of the website pages.
04
Web prototype
High-fidelity desktop interface.
05
Mobile prototype
The experience adapted for mobile.
Site architecture
The flowchart organizes navigation from the Home page: deals, packages, stays, tips, Momentos and destinations, each one leading to the product page.
Home
Log in and sign up
Best deals
Product page
Specific item
Description, price, what's included and reviews
Packages
Best trips
Best sellers
Momentos
Pricing
Package prices
Stays
Best stays by destination
Specific item
Description, price, what's included and reviews
Travel tips
Where to go for Carnival, holidays and vacations
Specific item
Description, price, what's included and reviews
Momentos
What it is
How to join
How to sign up
Examples
Top destinations
Most wanted destinations and events
Product information
Description, price, what's included and reviews
New destinations
Most wanted destinations and events
Product information
04 — VISUAL IDENTITY
SYMBOL, COLORS AND TYPOGRAPHY
Born to Fly: a B that is also a plane.
The name
B2F is short for Born to Fly: the 2 stands in for "to". The symbol turns this idea into form, joining the brand's initial with a plane drawn with as few strokes as possible.
Building the symbol
Two stacked triangles form the B. A third one, overlapping on the left, is the simplified plane. With equal stroke weights and rounded corners, the three make up the B2F symbol.
“B” Born
+
Simplified plane
=
Full symbol
Violet blue
#254EF0
Black
#000000
Dark gray
#9C9C9C
Gray
#D9D9D9
White
#FFFFFF
Aa
Raleway
Headlines and calls to action.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Aa
Montserrat
Body copy and interface elements.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
05 — INTERFACE
WEB PROTOTYPE · DESKTOP
From wireframe to interface: the structure stays, the brand sets the tone.
WIREFRAME
LOW FIDELITY
INTERFACE
HIGH FIDELITY
The full Home page
The page brings the whole journey together: search, deals, packages, stays, destinations and the invitation to Momentos.
Discover
Search by place, dates and guests opens the page, followed by deals and destinations.
Compare
Cards show destination, nights, price and installments side by side.
Share
Momentos invites travelers to share their trip and earn credits for the next one.
The Packages page
A showcase of packages: search opens the page, followed by this year's packages, best sellers and an invitation to use Momentos credits.
Filter
Destination search sits at the top, so travelers go straight to what they want.
Compare
Each card shows destination, nights, price, installments and what's included.
Convert
The credits block links the purchase to Momentos and encourages the next trip.
The Momentos page
The program where travelers share photos and videos of their trip and earn points to redeem for new trips.
Inspire
Travelers' photos open the page and show the spirit of the program.
Explain
Numbers and a step-by-step show how to earn and use points.
Engage
The sign-up form and the moments carousel close the page with social proof.
06 — LOG IN AND SIGN UP
WEB PROTOTYPE · DESKTOP
Log in and sign up in a few steps, with the same look as the website.
One field at a time
Log in asks for email or phone first, and only then for the password.
Visible shortcuts
Forgot password and create account sit right below the form.
Step-by-step sign up
Name, country, date of birth and email in a scrolling panel with a continue button.
07 — MOBILE
MOBILE PROTOTYPE
The same language, at another scale.
HOME · SEARCH
HOME · STAYS
PACKAGES
The full screens
Home and Packages on mobile, end to end: search, deals, packages, stays and footer rearranged into a single column.
HOME
430 PX
PACKAGES
430 PX
08 — DELIVERABLES AND LEARNINGS
PROJECT SCOPE
Three pages, two formats and one identity applied end to end.
03
pages: Home, Packages and Momentos
02
interface formats: web and mobile
01
visual identity applied to the interfaces
Takeaway
The same language, at another scale. The smaller-screen versions rearrange navigation without losing B2F's identity. The next step is to validate the flows with users and refine the experience based on testing.
NEXT CASE · 02
Car House Powerchip
Nathan Gabriel Santos
CASE 01 · CONCEPT PROJECT · WEBSITE & APP
B2F Travel Agency
Concept website and app for a fictional travel agency: destination search, packages, stays and a space to share travel moments.
ROLE
Brand, UX/UI and prototype
BRAND
B2F (fictional, created for this project)
YEAR
2024
TOOLS
Figma
01 — CONTEXT
WEBSITE & APP
From finding a destination to the next trip: a digital experience for B2F.
The brand
B2F (Born to Fly) is a fictional travel agency I created for this project. I defined its positioning, identity and digital experience: discovering destinations, packages, stays and sharing travel moments across website, app and smaller-screen versions.
The proposal
Create, from scratch, the brand and digital experience of a travel agency where travelers find destinations, compare packages and stays, and book the trip in one place. As a differentiator, a dedicated space, Momentos, where travelers share their trips and earn credits for the next one.
TYPE
Concept project: brand, website and app
AUDIENCE
Travelers looking for packages, stays and deals
GOAL
Bring together inspiration, booking and community
02 — CHALLENGE
4 GOALS
Bringing inspiration, booking and community into a single travel experience.
01
Make it easy to search by destination, dates and number of guests.
02
Present packages with flights and stays in an easy-to-compare way.
03
Highlight stays and deals for every season.
04
Create a space where travelers share moments and earn credits.
03 — PROCESS
5 STEPS
From structure to interface: a journey to explore and choose.
01
Flowchart
Map of the journeys and screens of the website and app.
02
Moodboard
Visual references and the brand's art direction.
03
Wireframe
Low-fidelity structure of the website pages.
04
Web prototype
High-fidelity desktop interface.
05
Mobile prototype
The experience adapted for mobile.
Site architecture
The flowchart organizes navigation from the Home page: deals, packages, stays, tips, Momentos and destinations, each one leading to the product page.
Home
Log in and sign up
Best deals
Product page
Specific item
Description, price, what's included and reviews
Packages
Best trips
Best sellers
Momentos
Pricing
Package prices
Stays
Best stays by destination
Specific item
Description, price, what's included and reviews
Travel tips
Where to go for Carnival, holidays and vacations
Specific item
Description, price, what's included and reviews
Momentos
What it is
How to join
How to sign up
Examples
Top destinations
Most wanted destinations and events
Product information
Description, price, what's included and reviews
New destinations
Most wanted destinations and events
Product information
04 — VISUAL IDENTITY
SYMBOL, COLORS AND TYPOGRAPHY
Born to Fly: a B that is also a plane.
The name
B2F is short for Born to Fly: the 2 stands in for "to". The symbol turns this idea into form, joining the brand's initial with a plane drawn with as few strokes as possible.
Building the symbol
Two stacked triangles form the B. A third one, overlapping on the left, is the simplified plane. With equal stroke weights and rounded corners, the three make up the B2F symbol.
“B” Born
+
Simplified plane
=
Full symbol
Violet blue
#254EF0
Black
#000000
Dark gray
#9C9C9C
Gray
#D9D9D9
White
#FFFFFF
Aa
Raleway
Headlines and calls to action.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Aa
Montserrat
Body copy and interface elements.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
05 — INTERFACE
WEB PROTOTYPE · DESKTOP
From wireframe to interface: the structure stays, the brand sets the tone.
WIREFRAME
LOW FIDELITY
INTERFACE
HIGH FIDELITY
The full Home page
The page brings the whole journey together: search, deals, packages, stays, destinations and the invitation to Momentos.
Discover
Search by place, dates and guests opens the page, followed by deals and destinations.
Compare
Cards show destination, nights, price and installments side by side.
Share
Momentos invites travelers to share their trip and earn credits for the next one.
The Packages page
A showcase of packages: search opens the page, followed by this year's packages, best sellers and an invitation to use Momentos credits.
Filter
Destination search sits at the top, so travelers go straight to what they want.
Compare
Each card shows destination, nights, price, installments and what's included.
Convert
The credits block links the purchase to Momentos and encourages the next trip.
The Momentos page
The program where travelers share photos and videos of their trip and earn points to redeem for new trips.
Inspire
Travelers' photos open the page and show the spirit of the program.
Explain
Numbers and a step-by-step show how to earn and use points.
Engage
The sign-up form and the moments carousel close the page with social proof.
06 — LOG IN AND SIGN UP
WEB PROTOTYPE · DESKTOP
Log in and sign up in a few steps, with the same look as the website.
One field at a time
Log in asks for email or phone first, and only then for the password.
Visible shortcuts
Forgot password and create account sit right below the form.
Step-by-step sign up
Name, country, date of birth and email in a scrolling panel with a continue button.
07 — MOBILE
MOBILE PROTOTYPE
The same language, at another scale.
HOME · SEARCH
HOME · STAYS
PACKAGES
The full screens
Home and Packages on mobile, end to end: search, deals, packages, stays and footer rearranged into a single column.
HOME
430 PX
PACKAGES
430 PX
08 — DELIVERABLES AND LEARNINGS
PROJECT SCOPE
Three pages, two formats and one identity applied end to end.
03
pages: Home, Packages and Momentos
02
interface formats: web and mobile
01
visual identity applied to the interfaces
Takeaway
The same language, at another scale. The smaller-screen versions rearrange navigation without losing B2F's identity. The next step is to validate the flows with users and refine the experience based on testing.
NEXT CASE · 02
Car House Powerchip
