Flighter
The Flighter website is a high-fidelity prototype that simulates transportation and travel booking websites such asSkyScanner,catch it,Kayak eitherWaynaBox.
Made in FIGMA
The intention with this project was to demonstrate the ability to create more complex high-fidelity prototypes in FIGMA, focusing on design and interaction following user design standards.
01
FIRST STEPS
The first thing was a study of the companies that would compete in the market with Flighter. I looked for a way to design the user experience of each of them, seeing what they stood out for and what they might lack.
After that, a first directly digital Wireframe sketch was made in FIGMA, placing the elements, first of the main page, and then of the rest of the most relevant pages for the user's flow.
02
Refinado de los diseños
Once the low fidelity prototype of the Flighter page was made, it was converted to high fidelity. For this, the logos and all the iconography were designed in vectorized Illustrator, as well as images made with artificial intelligence and of public banks.
Letter sizes and fonts were decided to define the style of the page, as well as choosing the final color palette.
Once all the aesthetic elements were placed, the page was prototyped, creating the components and their respective interactions.
For this step, various pages like those mentioned above were observed to see what effects and transitions were used and to be able to replicate them. The objective of this high-fidelity prototype was to demonstrate the technical capabilities in FIGMA, which is why it was considered essential to add all types of techniques and interactions, as specified below.
Ejemplo 1
Ejemplo 2
Ejemplo 4
Ejemplo 3
Ejemplo 6
Ejemplo 5
Ejemplo 7
03
prototyping
In the final high-fidelity prototype we wanted to simulate the user's journey from the home page to the reservation confirmation, in this case a flight.
For prototyping, we have tried to simulate the behavior of pages of all types that I have considered visually attractive and a design challenge in FIGMA. They have been made from simple behaviors such as reactions of the keypads to the movement of the cursor to give the sensation that it is a clickable button, to more visually interesting elements such as the "trend destinations" keypad (example 2).
Other behaviors of more complex components can be the drop-down envelope of the home page using "drag" of theExample 1, the flight duration slider in which the hours of the flight change as the cursor increases or decreases.example 3, or the text input drawers of theexample 6, simulating the sensation of being able to enter text as it would occur on the real page.
Slightly more complex prototyping actions have also been carried out, such as that ofexample 7, where a boolean or binary variable (true/false) has been given a state to a selection component, and it has been linked to a conditional interaction on the reservation button that releases the trigger. If the selection has not been activated, the button will lead to an overlay warning message indicating that the data must be accepted, preventing you from proceeding. If, on the other hand, this selection has been activated, the button will send the user to the page with their flight data and their confirmation and reservation number, thus ending the flow and allowing the user to return to the beginning.
04
Adaptación a móvil
Once the high-fidelity prototype was made for PC and laptop, its design was adapted for mobile, with the aim of demonstrating the adaptability between different devices and their standards regarding sizes and hierarchies.
In addition, careful manipulation of the information was carried out, presenting it in a different way to be able to include it in a way that was comfortable and intuitive for the user.
Prototipo PC
Prototipo Móvil
05
Conclusions
Impact
The website has a strong visual component, as well as a fluidity for the user that allows them to easily book flights, trains or rental cars, with a comparator of different companies.
The learned
In the process of creating this project, we have delved into the use of the FIGMA tool, focusing specifically on the use of the components and their interaction, from simple to more complex.
_edited_edited.png)
_edited.png)
