Rebranding de marca de un portal de automoción

web mostrada en tres dispositivos de forma responsive

El rediseño de marca de Experto Tráfico abarca el diseño corporativo de elementos de la marca como son el logotipo, definición de colores y tipografías además de sus aplicaciones digitales y físicas.

Experto Tráfico es el mayor portal de trámites relacionados con vehículos de toda España. Desde él, se responde, asesora y se ofrecen soluciones legales a los trámites desde un equipo de expertos. Su objetivo es informar sobre los trámites para que los potenciales clientes contraten los servicios y deleguen en ellos las gestiones.

La imagen de marca de esta plataforma no había podido ser desarrollada hasta el momento. Por eso, cuando comencé a trabajar, el cliente necesitaba una identidad corporativa (especialmente para mostrar en la web) y cerrar las versiones del logotipo.

Logotipo

La imagen de la que partimos para crear toda la identidad fue la del logotipo existente.

El cliente tenía muy claro cómo quería el logo y no quería cambiarlo, por lo que los cambios que realicé fueron de contenido y ligeros cambios de contraste para mejorar la legibilidad.

Un tic triple verde, amarillo y rojo junto a expertotráfico portal dgt y gestoría de vehículos
Antes y después del logotipo
No había versiones cerradas por lo que creamos varias para utilizar en distintos tamaños y según el texto que acompañase al logo.
Versiones del logotipo

Papelería corporativa

La empresa tiene sede en Barcelona y hace trámites en toda España. Parte de los servicios que ofrece se reflejan en papelería física. Ofrecer una buena experiencia a través de los impresos era una prioridad para la marca, por lo que construimos la identidad partiendo de estos materiales.

Un coche amarillo aparece debajo el logo y el slogan de marca "El mayor portal de trámites de vehículos de toda España". En la parte posterior se ve la parte trasera sobre tres líneas grandes de los colores de marca y la información de contacto.
El interior de la carpeta muestra el trasero y lateral de un coche en transparencias con las líneas diagonales en los colores de marca a modo de marca de agua. En la pestaña se lee "Trámites con garantía jurídica".
El sobre muestra de frente el morro del coche amarillo con el logo y slogan. En la pestaña trasera se lee el segundo slogan en blanco sobre verde y la información de contacto.
Firma de mail que incluye el logotipo, los valores de marca, página web, teléfono y correo electrónico en colores y tipografía corporativos.

Página web

La web necesitaba mejorar su estética y usabilidad. Por eso, planteamos un rediseño gradual, en el que se hizo un diseño base que se repetiría en los demás clusters y artículos de la web.

Cambios de estructura y diseño de nuevas páginas

Un cambio importante que propuse fue el cambio del menu actual por otro más completo y útil. Tanto por razones de navegabilidad, como de confianza hacia los usuarios y para lograr una mejor distribución del linkjuice entre las páginas.

Eso suponía el diseño de nuevas páginas corporativas que hablasen sobre la empresa y que mostrasen la fiabilidad y experiencia del equipo que la gestiona.

El menú no muestra las páginas de contenidos y solo tiene enlaces a la home
Menú anterior
El menú incluye un apartado de trámites y servicios con desglose para poder acceder a ellos en menos clics y también una página de quienes somos y contacto
Menú propuesto

Rediseño home

La home era la página principal a rediseñar puesto que sigue siendo una página crucial para las empresas. Añadimos fotografías que hablasen de la empresa y nuevos textos que acompañasen a los usuarios en el descubrimiento de los contenidos que ofrece la empresa. Dimos un nuevo aspecto y facilitamos su uso.
El diseño anterior es una pantalla mayoritariamente negra con un texto centrado ilegible y dos botones de llamada a la acción. La nueva pantalla de inicio muestra el logo más visiblemente y el mensaje principal es el elemento más llamativo, seguido de dos coches que apuntan al botón CTA.
Primera impresión de la web
La propuesta incorpora agrupaciones de contenido, iconos y más jerarquización del contenido
Segunda sección de la web

Rediseño de otras páginas

Marqué los colores corporativos mediante muestras para que en caso de rediseño, fuese fácil cambiarlos. Unifiqué las tipografías, los estilos de encabezados y textos destacados.

También limpié los contenidos de información prescindible para hacer lo más importante más accesible.

La cabecera donde se muestran el título y subtítulo del artículo aprovecha más el espacio y utiliza los colores verde y amarillo para crear cohesión de marca y dar una sensación menos oscura y apagada. Se muestran migas de pan para mejorar la navegación y la fecha de publicación para dar fiabilidad.
Cabecera de artículo
El acceso a los contenidos del cluster se hace mediante paneles con un título, resumen y botón. Los anteriores no mostraban que eran clicables de forma clara y tenían un degradado gris de fondo. El rediseño los muestra sobre verde claro y al pasar el ratón por encima, se muestran en anaranjado. Se eliminó el enlace a la propia página y se dejaron solo los uqe llevaban a otros contenidos.
Antes y después del menú de contenidos
El post antes comenzaba con un banner rojo con el título "Artículo" y una lista de iconos de redes sociales. Eso hacía que el artículo comenzase a mitad de página. En el rediseño, el título y subtítulo tienen suficiente legibilidad y la introducción incluye un estilo propio, al igual que la tabla de contenidos con enlaces clicables distinguibles del resto de contenidos y con iconos.
Introducción y tabla de contenidos
El rediseño cambia los cuadrados negros que acompañaban a los titulares por iconos y números a color. Los textos destacados se incluyen con la identidad de marca y mejorando el contraste de colores. Además se incluyeron elementos visuales para diferenciar secciones del artículo y amenizar la lectura.
Encabezados y textos destacados.
El rediseño elimina los encabezados en mayúsculas y muestra las preguntas frecuentes agrupadas en tarjetas de color con una imagen. Al reducir la longitud de línea se mejora la legibilidad también.
Panel de preguntas frecuentes
¡Gracias por tu atención!
firmado, Beatriz
Agradecimientos por las fotos: Chris Stein, Alexander Grey, Kelly Sikkema, Christa Dodoo, Casey Thiebeau, Viktor Theo y más en Unsplash.

No te cortes, ¡comparte este post! 😍👇

Facebook
Twitter
LinkedIn

Y si has aprendido, probablemente te interese esto también…

Dos manos se agitan al aire con el logo de TikTok tatuado en la muñeca
¿Por qué TikTok es tan adictivo?

TikTok no la usan solo los teenagers, es una de las redes sociales más consumidas. Aquí te explico, desde el diseño, por qué no te puedes despegar de ella.