AVSA Rent a Car – Rediseño UI/UX
Rediseño de un sitio web de rent a car en Chiloé, enfocado en la mejora visual y en principios básicos de usabilidad. Incluyó contenido actualizado, una identidad visual más clara, imágenes contextualizadas, un nuevo módulo de FAQ y un canal de contacto directo para facilitar el arriendo.
Marie Garrido- Rol
- Diseñador UX/UI
- Agencia
- Laika, agencia digital de Dittborn & Unzueta
- Contexto
- Sitio web de AVSA Rent a Car, en Chiloé
- Alcance
- Landing de una página: sistema visual, componentes reutilizables, textos reescritos, un FAQ nuevo y contacto directo, en versión escritorio y móvil
- Resultado
- Una interfaz más ordenada, comprensible y coherente con las necesidades reales del usuario
- Límite
- Sin investigación UX, entrevistas ni pruebas con usuarios
Contexto del proyecto
El cliente requería rediseñar su sitio web para modernizarlo visualmente, reforzar la identidad territorial de Chiloé y mejorar la claridad del servicio ofrecido.
El encargo consistió en desarrollar una landing informativa con navegación por secciones utilizando anclas, centrada principalmente en el diseño UI, con aplicación de principios de usabilidad y buenas prácticas de lectura.
Este proyecto no contempló investigación UX, entrevistas ni pruebas con usuarios. El diseño se realizó priorizando claridad visual, consistencia y una experiencia de navegación intuitiva.
Aunque el enfoque principal del proyecto fue diseño UI, durante el proceso se realizaron mejoras clave en contenido y estructura informativa que aportaron significativamente a la experiencia del usuario.
Alcance del diseño
Diseño UI
- Sistema visual completo: colores, tipografías, espaciado, iconografía.
- Componentes reutilizables.
- Diseño responsive para escritorio y móvil.
Reorganización del contenido
El sitio original contaba con textos poco claros, desactualizados y con inconsistencias de tono. Se reescribieron los textos principales:
- Hero / Mensaje de valor
- Sección Nosotros
- Sección de Flota
- Módulo de Leasing Operativo
- Términos y Condiciones
Objetivo de incluir esta mejora dentro del rediseño:
- Clarificar la propuesta de valor de AVSA.
- Mejorar la comprensión del servicio sin añadir complejidad.
- Generar un tono coherente y profesional en todo el sitio.
- Hacer la lectura más simple, directa y alineada con la identidad visual.
Ajustes de usabilidad
Entre los principales ajustes se incluyen:
- Mejor legibilidad mediante ajustes tipográficos y mayor contraste.
- Jerarquía visual más clara para facilitar la comprensión inmediata de la oferta y los pasos para arrendar.
- Llamados a la acción más visibles y consistentes, orientados a mejorar la conversión.
- Integración de imágenes relevantes que apoyan la comprensión del servicio.
- Incorporación de un FAQ, inexistente en la versión anterior, para reducir fricción y resolver dudas clave.
- Canal de contacto directo para simplificar el proceso de arriendo y disminuir pasos innecesarios.
- Mejoras básicas de accesibilidad, como alineación, espaciados, etiquetas claras y elementos interactivos distinguibles.
Limitaciones
El proyecto no incluyó investigación UX, entrevistas, testing o benchmarks profundos.
Proceso de diseño
Se decidió trabajar bajo los principios de:
Diseño Visual First (UI-driven)
Ya que el cliente requería modernización y claridad visual.
Consistency over novelty
Privilegiar patrones conocidos de navegación.
Simplicidad
Un "one page" de estructura ligera, lectura rápida, secciones delimitadas.
Narrativa territorial
Uso de fotografías del entorno para reforzar identidad local y apariencia "outdoor".
Usabilidad y accesibilidad
Aunque no existió investigación UX, se incorporaron buenas prácticas:
Ley de Jakob
Se mantuvieron patrones reconocidos de navegación, especialmente en booking.
Ley de Fitts
Botones y CTAs con áreas clickeables amplias.
Contraste AA
Uso asegurado de texto legible sobre fondos oscuros y claros.
Ley de proximidad
Agrupación de contenido relacionado para lectura rápida.
Escaneabilidad
Estructura con bloques independientes para evitar ruido visual.
Navegación persistente (menú lateral)
Ayuda a no perder contexto en un sitio one-page extenso.
Diseño UI
Mejora de la identidad y legibilidad
Tipografía
Medium · Semi Bold · Bold
| H1 | DM Sans Bold/Medium | 50/60 |
|---|---|---|
| H2 | DM Sans Bold | 48/20 |
| H3 | DM Sans Bold | 32/24 |
| Body 1 | DM Sans Bold | 18/60 |
| Body 2 | DM Sans Medium | 16/60 |
| Button | DM Sans Bold | 24/14 |
Paleta de colores
#1A1A1ATexto base. Textos principales, títulos, contenido.
#FFFFFFFondo general. Fondo del sitio, secciones primarias.
#171F14Fondo de formularios y menú activo, secciones de contraste, módulos oscuros de contenido.
#F8E2DFFAQ, bloques informativos suaves, tarjetas de soporte.
#CC433CBotones primarios, iconos, llamados a la acción, indicadores visuales.
Botones
Pantallas antiguas
Pantallas del sitio antes del proceso de rediseño.
Versión escritorio
Optimizada para una experiencia amplia, visual y cómoda en escritorio.
Versión móvil
Diseñada para una navegación clara y accesible en pantallas pequeñas.
