Flighter
La web Flighter es un prototipo de alta fidelidad que simula webs de reserva de transporte y viajes tales como SkyScanner, Atrápalo, Kayak o WaynaBox.
Realizado en FIGMA
La intención con este proyecto consistía en demostrar el manejo en la creación de prototipos de alta fidelidad más complejos en FIGMA, centrándose en el diseño y la interacción del mismo siguiendo las normas de diseño de usuario.
01
PRIMEROS PASOS
Lo primero fue un estudio de las empresas que competirían en el mercado con Flighter. Busqué la forma de diseñar la experiencia del usuario de cada una de ellas, viendo en qué destacaban y de qué podía carecer.
Tras ello, se realizó un primer boceto de Wireframe directamente digital en FIGMA, situando los elementos, primero de la página principal, y luego del resto de páginas más relevantes para el flow del usuario.
02
Refinado de los diseños
Una vez realizado el prototipo en baja fidelidad de la página Flighter, se procedió a pasarlo a alta fidelidad. Para ello se diseñaron los logos y toda la iconografía en vectorizado de Illustrator, así como imagenes hechas con inteligencia artificial y de bancos públicos.
Se decidieron los tamaños de letras y tipografías para definir el estilo de la página, así como elegir la paleta definitiva de colores.
Una vez se situaron todos los elementos estéticos se procedió al prototipado de la página, creando los componentes y sus respectivas interacciones.
Para este paso, se observaron diversas páginas como las mencionadas anteriormente, para ver qué efectos y transiciones se usaban y poder replicarlas. El objetivo de este prototipo de alta fidelidad era demostrar las capacidades técnicas en FIGMA, por ello consideraba indispensable añadir todo tipo de técnicas e interacciones, tal como se especifican a continuación.
Ejemplo 1
Ejemplo 2
Ejemplo 4
Ejemplo 3
Ejemplo 6
Ejemplo 5
Ejemplo 7
03
prototipado
En el prototipo de alta fidelidad final se ha querido simular el recorrido del usuario desde la página de inicio hasta la confirmación de reserva, en este caso de vuelo.
Para el prototipado se ha tratado de simular el comportamiento de páginas de todo tipo que he considerado de atractivo visual y reto de diseño en FIGMA. Se han realizado desde comportamientos sencillos como reacciones de las botoneras al paso del cursor para dar la sensación de que es un botón pulsable, hasta elementos visualmente más interesantes como la botonera de "destinos en tendencia"(ejemplo 2).
Otros comportamientos de componentes de mayor complejidad pueden ser el sobre desplegable de la página de inicio mediante "drag" del ejemplo 1, el deslizable de duración de vuelo en el que a su vez van cambiando las horas del mismo según el cursor aumenta o disminuye del ejemplo 3, o los cajones de input de texto del ejemplo 6, simulando la sensación de poder introducir texto como ocurriría en la página real.
También se han realizado acciones de prototipado un poco más complejas como la del ejemplo 7, donde se le ha dado un estado a un componente de selección una variable booleana o binaria (true/false), y se le ha vinculado a una interacción de tipo condicional en el botón de reserva que suelta el disparador. Si la selección no ha sido activada, el botón derivará a un mensaje de aviso en superposición indicando que se deben aceptar los datos, impidiéndole avanzar. Si por el contrario esta selección ha sido activada, el botón mandará al usuario a la página con los datos de su vuelo y su número de confirmación y reserva, acabando así el flujo y pudiendo el usuario regresar al inicio.
04
Adaptación a móvil
Una vez realizado el prototipo de alta fidelidad para pc y portátil, se adaptó su diseño para móvil, con el objetivo de demostrar la capacidad de adaptabilidad entre distintos dispositivos y sus normas en cuanto a tamaños y jerarquías.
Además se realizó un cuidadoso manipulado de la información, planteándola de distinta forma para poder incluirla de manera que resultase cómodo e intuitivo para el usuario.
Prototipo PC
Prototipo Móvil
05
Conclusiones
Impacto
La web tiene un fuerte componente visual, así como una fluidez para el usuario que le permite de manera sencilla poder reservar vuelos, trenes o coches de alquiler, con un comparador de distintas compañías.
Lo aprendido
En el proceso de creación de este proyecto se ha profundizado en el manejo de la herramienta FIGMA, contrándonos especificamente en el uso de los componentes y su interacción, desde simples a más complejas.
_edited_edited.png)
_edited.png)
