Antecendentes
Ambacar se define como un supermercado automotriz, con más de 50 años en el mercado y presencia en 4 países (Ecuador, Colombia, Perú y Costa Rica). Con gran reconocimiento a nivel nacional, destacando por ser la casa automotriz de modelos vehiculares que han sido un éxito en ventas, como: la POER Manual o el Haval H6.
Con la creciente necesidad de las empresas de invertir en medios digitales como Google Ads o Meta Ads, el diseño de páginas web optimizadas para SEO y que cumplan con buenas prácticas de UX/UI se vuelve un requerimiento indispensable.
• Página Web Anterior
*Capturas de Pantalla tomadas de la página de retail de Colombia (Diseño anterior)
Los principales errores de estructuración de la página identificados, fue: el uso de imágenes con elementos gráficos para presentar modelos nuevos; y página principales con baja cantidad de contenido; además de contar con una estructura de URLs muy compleja, lo que no es óptimo para una estrategia SEO.
Como interfaz, la página presenta muchos problemas vinculadas con la cantidad de botones u opciones que tiene el usuario en un primer pantallaso, lo que por Ley de Hick, no es ideal ya que complejiza ralentiza la toma de la decisión, además, presenta una estética anticuada que se opaca con los diseños de la competencia.
• Referencias Principales
*Capturas de Pantalla tomadas de la páginas de la marca correspondientemente y se respetan los derechos de autor respectivamente.
Conociendo que el mercado de Ambacar actualmente se enfoca en presentarse como «el lugar donde encuentras el modelo que se adapta a ti» se buscaron referencias que visualmente compartan rasgos amables y la implementación de una paleta cromática definida y bien implementada.
De la página web de Peugeot se destacó el uso de menús transparentes, su mega-menú y el uso de imágenes grandes como fondo de bloques. Además de que usa imágenes del vehículo sin fondo junto al contenido, lo cual presenta una construcción interesante. Adicional quisiera destacar el uso de las familias tipográficas, que tienen buena legibilidad y contraste.
De la página de Kía se destacó el cómo estructuran sus formularios de recopilación de datos y la presentación de características destacadas, además de su implementación de recursos 360° para una ejor presentación de elementos destacados.
Finalmente de la página web de 1001carros se destacó su uso de elementos amigables (debido al uso de bloques con las esquinas redondeadas), además de la gran paleta cromática utilizada, ya que presenta un buen contraste y un orden claro.
Proceso del Rediseño
Al ser una página web que había almacenado 10 años de información de Ambacar, se definió una metodología enfocada en la estructuración de las URL para simplificar su indexación y la optimización SEO.
• Arquitectura de la Información
Cómo primer punto se definieron los dominios principales y que tipo de contenido iba a albergar con respecto a las páginas anteriores.
Existian 2 dominios principales y un subdominio, a los cuales se les asignó los siguientes contenidos:
• www.ambacar.com (Corporativo)
• www.ambacar.ec (Retail modelos Nuevos)
• seminuevos.ambacar.ec (Retail Seminuevos)
Después se definió que tipo de contenido correspondía para cada página, a fin de tener claro, en qué dominio se deba cargar el nuevo contenido futuro.
| Corporativo | Página destinada principalmente para un uso B2B, en esta no se presentan vehículos, sino hechos de la empresa y su crecimiento: • Blog |
|---|---|
| Retail Nuevos | Página destinada a la recepción de lead calificados para la venta exclusiva de los modelos nuevos de Ambacar: • Modelos Nuevos |
| Seminuevos | Página destinada como canal oficial para la promoción de modelos que se encuentran a la venta, bajo la modalidad de seminuevos, y se requiere que tenga un formato de ecommerce, y debe ser gestionado por los asesores.: • Modelos Seminuevos |
• Wireframe
Con la estructura de páginas clara, se inició con la composición de los diferentes bloques y páginas para cada dominio.
• Prototipado
Para el prototipado se usó Figma.
1.- La disposición del contenido complejo, permite una lectura simplificada y resume el contenido, destacando características o datos relevantes.
2.- El orden del contenido, si importa, no es lo mismo, tener que leer que en la sección de noticias hay entradas de cada uno de los países donde se encuentra Ambacar. A ver que Ambacar está en varios países viendo las banderas, donde puedo no leer el contenido y ver el bloque noticias.
3.- Para mi, el footer de las páginas web, es equivalente a los directorios en un edificio. Por ello, su orden debe responder a las posibles preguntas del usuario, ya que este es el último lugar donde viene a buscar.
4.- Para la página de Retail Se buscó destacar el vehículo por que la marca se enfoca en venderte el auto ideal para ti. No te vende marcas, sino calidad.
5.- Se estableció como requerimiento la implementación varios tipos de medios, pero, cómo hacer que mantenga la armonía sin saturar de recursos.
6.- Consistencia visual entre las diferentes páginas web, no siempre es que sea igual, sino, cómo con lo mismo puedo hacer otro bloque.
7.- Entiende primero la información que le interesa al usuario, así la destacas y centras la atención del usuario.
• Puesta en línea
Para el desarrollo de la plantilla de Ambacar se usó el maquetador visual Elementor Pro.
Para la migración del nuevo sitio se planificó problemas de indexación o problemas de lectura de documentos CSS, por lo que es necesario realizar una revisión y corrección de los bugs visuales.
Conclusión
Para proyectos, así de grandes, lo que me llevo de reflexión es que siempre que tienes claras las bases y los propósitos de cada pantalla, elemento o entorno el diseño es mucho más sencillo, por que permite enfocarse en cómo acomodarla para que sea clara y cumpla con sus funciones.
