Introducción

El proyecto nace con la intención de simplificar el proceso venta de vhículos, entregando una experiencia ágil, eficiente y transparente, que permita al usuario tomar decisiones bien informado y con confianza.

En mi rol como Diseñador UI, fui responsable de organizar, dar coherencia y representar visualmente los requerimientos del proyecto, creando una experiencia intuitiva y una estética centrada en comunicar confianza, cercanía y simplicidad.

Mi trabajo se enfocó en desarrollar un sistema de diseño consistente, con una paleta de colores adecuada y jerarquía visual clara, considerando siempre la usabilidad y alineando las necesidades del usuario con los objetivos del negocio.

1.0 Descubrimiento

1.1 Benchmark

Se realizó un benchmark centrado en los aspectos visuales y gráficos, con el objetivo de analizar el contexto competitivo y obtener referencias que permitan crear una mejor coherencia visual, jerarquía y experiencia estética de diseño. Esta comparación sirvió como base para identificar buenas prácticas y oportunidades de mejora en la interfaz.

Autofact
Mecanix
Comparativa entre los sitios web Autofact y Mecanix
Buena
Consistencia
Buena
Buena
Coherencia cromática
Buena
Regular
Simplicidad
Regular
Regular
Ruido visual
Buena
Buena
Jerarquía visual
Regular
Mala
Legibilidad
Regular
Regular
Contraste
Buena
Lo mejor de Autofact

Buena jerarquía visual, tamaños bien definidos y CTA llamativo

Lo peor de Autofact

Información confusa y poco contraste en secciones clave del sitio web

Lo mejor de Mecanix

Buen contraste e información clara

Lo peor de Mecanix

Demasiados campos de textos en una sola página y poca visibilidad de los botones

2.0 Definición

2.1 Perfil de usuario

Personas adultas, propietarias de vehículos que se plantean vender su automóvil de manera informada, rápida y sin complicaciones. Valoran la claridad en la información, la eficiencia del proceso y la confianza en la plataforma.

2.2 Insights

  • Los usuarios necesitan conocer un valor aproximado de su vehículo en base a las características que este tenga.
  • Desconfían de herramientas que les piden sus datos y no son transparentes o tienen mucha publicidad.
  • Valoran un diseño limpio y directo que les brinde seguridad y cercanía.

2.3 Requisitos

  • Debe aparecer el estimador de precio de manera clara en la parte superior del homepage.
  • Tiene que ser fácil de usar.
  • Debe tener la opción de buscar por patente.
  • El lenguaje visual debe transmitir cercanía, simplicidad y confianza.

3.0 Desarrollo

3.1 User flow

Descripción del recorrido del usuario al cotizar su vehículo, se identificaron los puntos clave de interacción dentro de la plataforma.

Parte uno del User flow que muestra desde el comienzo Parte dos del User flow que muestra hasta el final

3.2 Wireframes

Selección de wireframes que representan algunas de las pantallas principales del proyecto. Estos permitieron enfocarse en la jerarquía de la información, la disposición de los elementos y la funcionalidad básica antes de aplicar el diseño final.

Wireframes en formato de escritorio y móvil

3.3 Identidad visual

Los colores escogidos evocan confianza (azul violáceo) acompañado de acentos cálidos (rojo anaranjado), que refuerzan esta percepción. Las formas redondeadas complementan este lenguaje visual, transmitiendo cercanía y amabilidad.

La tipografía, moderna y limpia, mejora la legibilidad y aporta claridad, facilitando la lectura y enriqueciendo la experiencia del usuario.

Las imágenes vectoriales aportan simplicidad visual, comunicando calidez y cercanía de manera afable. Además, complementan el diseño sin distraer la atención de la funcionalidad principal.

Logotipo de Mi Autoprecio sobre fondo oscuro Representación gráfica de la tipografía Noto sans Representación gráfica de los colores utilizados Ilustración utilizada, que muestra dos personas haciendo un trato para la venta de un auto

4.0 Entrega

4.1 Sistema de diseño

A continuación se muestran algunos de los componentes principales que forman parte del sistema de diseño, con estos logramos mantener la coherencia visual y funcional de toda la plataforma.

Estado de los botones que se utilizaron Elementos del formulario que se utilizaron

4.2 Resultado

Muestra representativa del diseño final, donde se aplicaron los elementos visuales para potenciar la experiencia del usuario.

Vista del resultado final donde se muestra varias pantallas de escritorio y móvil sobre un fondo oscuro

Conclusión y aprendizajes

Se diseñó una solución intuitiva y fácil de usar, enfocada en las necesidades del usuario. La simplicidad de los elementos de la interfaz mejora la experiencia de navegación, facilitando la interacción. Esto fortalece la confianza en uno de los principales puntos de contacto del viaje del usuario.

Se logró conectar con la idea de negocio y transmitir a través de elementos de la interfaz como gráficos, textos y cromática la idea que quería comunicar el cliente y logrando también resolver de igual manera las necesidades que buscaban los usuarios.

Siguiente proyecto
App de transporte compartido