0%

Toyota Yaris HUD

Toyota Yaris HUD

Categoría

Categoría

UI Design / Prototipado

UI Design / Prototipado

Duración

Duración

6 semanas

6 semanas

Herramientas

Herramientas

Illustrator, Adobe Flash

Illustrator, Adobe Flash

Contexto

Contexto

Desde hace ya tiempo , y cada vez con mayor eficacia, se están desarrollando tecnologías que facilitan a las personas su vida cotidiana . En el mundo del automóvil se ha conseguido llegar un paso más allá, han logrado cambiar la visión que teníamos del vehículo como un simple medio de transporte. Ahora la mayoría de vehículos poseen un sistema por el cual permanecen conectados , por ello una de las principales aspiraciones para este trabajo es mejorar esas comunicaciones creando una aplicación que mejore la personalización y la usabilidad  para el vehículo de la marca Toyota .

Desde hace ya tiempo , y cada vez con mayor eficacia, se están desarrollando tecnologías que facilitan a las personas su vida cotidiana . En el mundo del automóvil se ha conseguido llegar un paso más allá, han logrado cambiar la visión que teníamos del vehículo como un simple medio de transporte. Ahora la mayoría de vehículos poseen un sistema por el cual permanecen conectados , por ello una de las principales aspiraciones para este trabajo es mejorar esas comunicaciones creando una aplicación que mejore la personalización y la usabilidad  para el vehículo de la marca Toyota .

Este proyecto lo desarrollé durante el segundo curso del Grado en Diseño Integral y Gestión de la Imagen en la Universidad Rey Juan Carlos (2017), y supuso mi primer contacto real con el diseño UX/UI y el prototipado. El objetivo del ejercicio era diseñar un HUD para el Toyota Yaris e incorporar alguna funcionalidad innovadora que mejorara la experiencia de uso del vehículo.


En aquel momento, la conexión entre dispositivos y automóviles aún no estaba plenamente implementada, por lo que planteé un sistema de sincronización que permitiera conectar el coche a internet o al teléfono móvil. Esta solución hacía posible compartir y gestionar datos entre dispositivos sin necesidad de estar cerca del vehículo, permitiendo, por ejemplo, crear listas de reproducción desde casa o liberar espacio de almacenamiento del móvil transfiriendo archivos directamente al coche.

Este proyecto lo desarrollé durante el segundo curso del Grado en Diseño Integral y Gestión de la Imagen en la Universidad Rey Juan Carlos (2017), y supuso mi primer contacto real con el diseño UX/UI y el prototipado. El objetivo del ejercicio era diseñar un HUD para el Toyota Yaris e incorporar alguna funcionalidad innovadora que mejorara la experiencia de uso del vehículo.


En aquel momento, la conexión entre dispositivos y automóviles aún no estaba plenamente implementada, por lo que planteé un sistema de sincronización que permitiera conectar el coche a internet o al teléfono móvil. Esta solución hacía posible compartir y gestionar datos entre dispositivos sin necesidad de estar cerca del vehículo, permitiendo, por ejemplo, crear listas de reproducción desde casa o liberar espacio de almacenamiento del móvil transfiriendo archivos directamente al coche.

Bocetos y proporciones

Para el diseño de las formas y la paleta de color del cuadro de mandos, tomé como referencia una estética futurista, caracterizada por el uso de colores metálicos, la presencia de luces y focos y un entorno oscuro. Esta elección visual buscaba reforzar la sensación de tecnología avanzada y crear una interfaz clara y legible, pensada para integrarse de forma natural en el interior del vehículo.

Busqué una forma equilibrada y sólida, por lo que diseñé dos lados totalmente simétricos y proporcionados, tomando como base las circunferencias exteriores del cuadro de mandos. Esta estructura me permitió generar una composición estable y ordenada, facilitando la lectura de la información y reforzando la sensación de control al volante.

Leyenda y Arbol de navegación

Para definir cómo se navega dentro del HUD, creé un árbol de navegación siguiendo la regla de los tres clics, que plantea que cualquier información relevante debe poder encontrarse en un máximo de tres interacciones desde la pantalla principal. Este enfoque me permitió simplificar la navegación, facilitar el acceso a la información más importante y reducir la posible frustración del usuario durante la conducción.

1. Menú de conducción

1.Menú de conducción

2. Menú GPS

2.Menú GPS

3. Menú Música

3.Menú Música

4. Menú Toyota Connect

4.Menú Toyota Connect

5. Menú Ajustes

5.Menú Ajustes

6. Usuario conectado

6.Usuario conectado

7. Fecha

7.Fecha

8. Indicaciones GPS

8.Indicaciones GPS

9. Velocimetro digital

9.Velocimetro digital

10. Cuentarevoluciones

10Cuentarevoluciones

11. Indicador de gasolina

12. Información de consumo

13. Pantalla principal

14. Alertas

Wireframes

  • Pantalla principal

  • Menú conducción

  • Menú modos de conducción

  • Modo Standart

  • Modo Sport

  • Modo Eco

  • Menú música

  • Menú Toyota Connect

  • Reproductor

  • Menú información

  • Menú modo asientos

  • Menú ajustes

  • Menú Gps

Dosier digital

Aquí presento la versión digital del dossier que realicé en formato impreso para el proyecto. En él se recoge toda la información clave del trabajo, incluyendo las fases de investigación, la definición del user persona y el desarrollo completo del HUD. Además, el dossier incorpora una serie de instrucciones para facilitar el uso del prototipo. También incluyo un enlace que permite descargar y probar el prototipo en una versión Flash interactiva.

Conclusiones

Este proyecto supuso mi primer contacto práctico con el diseño UX/UI allá por 2017, y también una de las primeras veces en las que trabajé animaciones e interacción de forma consciente. Durante su desarrollo descubrí una de mis grandes pasiones dentro del diseño: la animación, la interacción y la creación de prototipos. Fue un trabajo en el que el tiempo se me pasaba volando mientras lo realizaba y que, a pesar de sus errores y limitaciones propias del momento, me permitió aprender, experimentar y desarrollarme enormemente en este ámbito del diseño, sentando una base muy importante para mi evolución posterior.

Create a free website with Framer, the website builder loved by startups, designers and agencies.