Vacanza Aria
Vacanza Aria
A fully-functional boutique airline booking
website built entirely in Figma.
A fully-functional boutique airline booking
website built entirely in Figma.
A fully-functional boutique airline booking website built entirely in Figma.
Role
Designer (Individual Project)
Designer (Individual Project)
Skills
Advanced Prototyping,
Design Systems, Branding
Advanced Prototyping,
Design Systems, Branding
Tools
Figma
Figma
Duration
6 weeks
6 weeks
Project Overview
Project Overview
Project Overview
Italian culture is beautiful, unique, and multifaceted. The branding for this project pushed me to blend creativity and user-centric design to create a culturally authentic experience without sacrificing accessibility.
Vacanza Aria challenged me to create a Figma prototype that responded dynamically to user interactions through variables and conditionals. I also built a corresponding design system that ensured consistency across all areas and allowed me to make efficient updates to core design elements.
Italian culture is beautiful, unique, and multifaceted. The branding for this project pushed me to blend creativity and user-centric design to create a culturally authentic experience without sacrificing accessibility.
Vacanza Aria challenged me to create a Figma prototype that responded dynamically to user interactions through variables and conditionals. I also built a corresponding design system that ensured consistency across all areas and allowed me to make efficient updates to core design elements.
Italian culture is beautiful, unique, and multifaceted. The branding for this project pushed me to blend creativity and user-centric design to create a culturally authentic experience without sacrificing accessibility.
Vacanza Aria challenged me to create a Figma prototype that responded dynamically to user interactions through variables and conditionals. I also built a corresponding design system that ensured consistency across all areas and allowed me to make efficient updates to core design elements.
PDF | 20.5MB
PDF | 20.5MB
PDF | 20.5MB
FIGMA FILE
FIGMA FILE
FIGMA FILE
FIGMA FILE
FIGMA FILE
FIGMA FILE
Problem
Problem
Problem
HMW create a boutique airline booking website that communicates Italian culture to the user while also maintaining an efficient and accessible experience?
HMW create a boutique airline booking website that communicates Italian culture to the user while also maintaining an efficient and accessible experience?
HMW create a boutique airline booking website that communicates Italian culture to the user while also maintaining an efficient and accessible experience?
Solution
Solution
Solution
A distinctive, engaging, and efficient experience that prioritizes user experience. Accessibility will take the forefront through language and contrast considerations.
A distinctive, engaging, and efficient experience that prioritizes user experience. Accessibility will take the forefront through language and contrast considerations.
A distinctive, engaging, and efficient experience that prioritizes user experience. Accessibility will take the forefront through language and contrast considerations.
01. Research
01. Research
01. Research
Findings
To ensure my boutique airline had an even coverage of the country, I chose Rome as my hub. I then found three other cities that were far enough to fly between. From there, I worked with the following requirements to work out logistics:
To ensure my boutique airline had an even coverage of the country, I chose Rome as my hub. I then found three other cities that were far enough to fly between. From there, I worked with the following requirements to work out logistics:
To ensure my boutique airline had an even coverage of the country, I chose Rome as my hub. I then found three other cities that were far enough to fly between. From there, I worked with the following requirements to work out logistics:
3 planes that make trips out to each hub every day
Consistent flight schedule every day
3 planes that make trips out to each hub every day
Consistent flight schedule every day
3 planes that make trips out to each hub every day
Consistent flight schedule every day
Planning
Given that all of my cities were so close to my hub, a plane could fly out to each twice a day. Based on flight lengths and turnover time, I set up a Google Sheet to keep my flight information organized.
Given that all of my cities were so close to my hub, a plane could fly out to each twice a day. Based on flight lengths and turnover time, I set up a Google Sheet to keep my flight information organized.
Given that all of my cities were so close to my hub, a plane could fly out to each twice a day. Based on flight lengths and turnover time, I set up a Google Sheet to keep my flight information organized.
02. Iteration
02. Iteration
02. Iteration
Sketches & Testing
variable testing
I learned how to bind variables to object properties, use basic conditionals, and create a “listener” to trigger certain actions once a conditional has been met. I also started testing a small-scale version of the date picker I was planning on using.
I learned how to bind variables to object properties, use basic conditionals, and create a “listener” to trigger certain actions once a conditional has been met. I also started testing a small-scale version of the date picker I was planning on using.
I learned how to bind variables to object properties, use basic conditionals, and create a “listener” to trigger certain actions once a conditional has been met. I also started testing a small-scale version of the date picker I was planning on using.
Sketches
I started sketching location & flight picker screens, as well as ideating how I could stylize flight cards to match my brand.
I started sketching location & flight picker screens, as well as ideating how I could stylize flight cards to match my brand.
I started sketching location & flight picker screens, as well as ideating how I could stylize flight cards to match my brand.
…And more sketches
Finally, I worked on the basic information architecture of screens in the back half of the user flow, such as trip review, passenger & payment info, and a trip confirmation screen.
Finally, I worked on the basic information architecture of screens in the back half of the user flow, such as trip review, passenger & payment info, and a trip confirmation screen.
Finally, I worked on the basic information architecture of screens in the back half of the user flow, such as trip review, passenger & payment info, and a trip confirmation screen.
Visual Design
Feel
To start building my visual style, I first collected a series of images of Italian culture that I wanted to capture the feel of in my brand.
To start building my visual style, I first collected a series of images of Italian culture that I wanted to capture the feel of in my brand.
To start building my visual style, I first collected a series of images of Italian culture that I wanted to capture the feel of in my brand.
Look
With that tone in mind, I then collected more specific inspiration to reference when establishing my design system.
With that tone in mind, I then collected more specific inspiration to reference when establishing my design system.
With that tone in mind, I then collected more specific inspiration to reference when establishing my design system.
Design explorations
Based on my previous explorations, I began searching for the two most important elements in forming the cornerstone of my brand: typeface and airline name. Then, I developed a set of guidelines to work with.
Based on my previous explorations, I began searching for the two most important elements in forming the cornerstone of my brand: typeface and airline name. Then, I developed a set of guidelines to work with.
Based on my previous explorations, I began searching for the two most important elements in forming the cornerstone of my brand: typeface and airline name. Then, I developed a set of guidelines to work with.
Design System
Building the system
From my exploration, I established a set of brand guidelines and a design system to work with.
From my exploration, I established a set of brand guidelines and a design system to work with.
From my exploration, I established a set of brand guidelines and a design system to work with.
FIGMA FILE
FIGMA FILE
FIGMA FILE
Implementing variables
I defined Figma variables to use in tokens such as spacing or font family, which simplified the process of applying them to components, auto-layouts, or text styles later down the line.
I defined Figma variables to use in tokens such as spacing or font family, which simplified the process of applying them to components, auto-layouts, or text styles later down the line.
I defined Figma variables to use in tokens such as spacing or font family, which simplified the process of applying them to components, auto-layouts, or text styles later down the line.
Accessibility
When working with images and textures as backgrounds, consideration of accessibility becomes especially important. All text was tested against the WCAG guidelines using the "Contrast" Figma plugin by Willowtree and meets at least AA standards.
When working with images and textures as backgrounds, consideration of accessibility becomes especially important. All text was tested against the WCAG guidelines using the "Contrast" Figma plugin by Willowtree and meets at least AA standards.
When working with images and textures as backgrounds, consideration of accessibility becomes especially important. All text was tested against the WCAG guidelines using the "Contrast" Figma plugin by Willowtree and meets at least AA standards.
Prototyping
Variables & modes
Figma variables allowed me to create a fully functional prototype in as few frames as possible, and also empowered me to tackle even deeper levels of dynamic prototyping, such as language switching on all screens.
Figma variables allowed me to create a fully functional prototype in as few frames as possible, and also empowered me to tackle even deeper levels of dynamic prototyping, such as language switching on all screens.
Figma variables allowed me to create a fully functional prototype in as few frames as possible, and also empowered me to tackle even deeper levels of dynamic prototyping, such as language switching on all screens.
Conditionals
Conditionals were absolutely integral in allowing me to prototype as efficiently and accurately as possible. Their functionality allowed me to make any combination of flights, passengers, and dates possible.
Conditionals were absolutely integral in allowing me to prototype as efficiently and accurately as possible. Their functionality allowed me to make any combination of flights, passengers, and dates possible.
Conditionals were absolutely integral in allowing me to prototype as efficiently and accurately as possible. Their functionality allowed me to make any combination of flights, passengers, and dates possible.
03. Final Designs
03. Final Designs
03. Final Designs
Based on my brand guidelines and UI compositions, I created my UI screens, ensuring that the entire experience remained memorable, accessible, and efficient. While I was doing that, I built out full functionality with my new variable and conditional skills.
Based on my brand guidelines and UI compositions, I created my UI screens, ensuring that the entire experience remained memorable, accessible, and efficient. While I was doing that, I built out full functionality with my new variable and conditional skills.
Based on my brand guidelines and UI compositions, I created my UI screens, ensuring that the entire experience remained memorable, accessible, and efficient. While I was doing that, I built out full functionality with my new variable and conditional skills.
UI Screens
Splash Screen
Departure & Arrival Select
Departure Select Pop-Up
Date Picker
Flight Picker/Confirmation
Trip Details Review
Passenger Info
Payment Info
Trip Confirmation
Final Prototype
Full prototype video, including splash screen idle animations, hover interactions on buttons, real-time information updating with variables, loading screens, and functional text boxes. Experience the prototype for yourself.
Full prototype video, including splash screen idle animations, hover interactions on buttons, real-time information updating with variables, loading screens, and functional text boxes. Experience the prototype for yourself.
Full prototype video, including splash screen idle animations, hover interactions on buttons, real-time information updating with variables, loading screens, and functional text boxes. Experience the prototype for yourself.
FIGMA FILE
FIGMA FILE
FIGMA FILE
Takeaways
Takeaways
Takeaways
This project was an incredible opportunity to learn more about advanced prototyping in Figma, which opens up incredible opportunities for faster, cheaper, and more efficient user testing of products. I pushed myself to design in a style that I didn’t have a lot of experience with, which expanded my visual knowledge.
This project was intended for completion over 15 weeks, but I only had 5. Considering how much I had to constrain the project, I think I did a phenomenal job, but I would have loved more opportunities to iterate on my UI compositions and refine the final product.
This project was an incredible opportunity to learn more about advanced prototyping in Figma, which opens up incredible opportunities for faster, cheaper, and more efficient user testing of products. I pushed myself to design in a style that I didn’t have a lot of experience with, which expanded my visual knowledge.
This project was intended for completion over 15 weeks, but I only had 5. Considering how much I had to constrain the project, I think I did a phenomenal job, but I would have loved more opportunities to iterate on my UI compositions and refine the final product.
This project was an incredible opportunity to learn more about advanced prototyping in Figma, which opens up incredible opportunities for faster, cheaper, and more efficient user testing of products. I pushed myself to design in a style that I didn’t have a lot of experience with, which expanded my visual knowledge.
This project was intended for completion over 15 weeks, but I only had 5. Considering how much I had to constrain the project, I think I did a phenomenal job, but I would have loved more opportunities to iterate on my UI compositions and refine the final product.
Next Steps
Next Steps
Next Steps
Complete a few more rounds of iteration to fully refine the final product
Conduct user testing with my fully-functional prototype to assess how well I met my design goals
Continue to refine and improve my design based upon the results of the user testing.
Complete a few more rounds of iteration to fully refine the final product
Conduct user testing with my fully-functional prototype to assess how well I met my design goals
Continue to refine and improve my design based upon the results of the user testing.
Complete a few more rounds of iteration to fully refine the final product
Conduct user testing with my fully-functional prototype to assess how well I met my design goals
Continue to refine and improve my design based upon the results of the user testing.
