Estrenamos nuevo diseño en nuestro blog
Estrategia de optimización para contenidos dinámicos
Luego de varios meses diseñando y aplicando estrategias de marketing de contenidos, ya nos tocaba un rediseño a nuestro propio blog. Durante este tiempo de aprendizajes y pruebas, utilizamos distintos formatos, técnicas de posicionamiento y temáticas, y logramos identificar varios puntos que necesitaban optimización.
Los principales problemas que vimos fueron que la portada no reflejaba el flujo diario de publicaciones y que los llamados estaban desorganizados, por lo que no se destacaban los puntos de conversión.
Además, los elementos de navegación necesitaban un rediseño, ya que la baja duración de un número importante de sesiones nos estaba indicando que muchos usuarios se iban luego de revisar solo un contenido.
Luego de este análisis, definimos los siguientes objetivos:
- Replantear el home del blog para mostrar que hay contenido dinámico y rescatar los artículos antiguos que necesitan más visibilidad.
- Aumentar el tiempo de sesión y la cantidad de páginas por sesión.
- Presentar el blog como una plataforma más independiente, que estuviera más cercana de un medio de comunicación que del sitio corporativo.
- Redefinir los puntos de conversión.
Nueva estructura, mejor estilo visual y más accesibilidad
Con estos objetivos en mente, nuestros equipos de arquitectura de información y diseño web comenzaron a trabajar en las optimizaciones. Los resultados se pueden resumir en una estructura más organizada y enfocada al contenido, un estilo visual más limpio y mejores prácticas de accesibilidad web.
Estructura
A nivel de estructura, el objetivo principal era demostrar el flujo de actualizaciones y facilitar la búsqueda y navegación de los contenidos. Para lograr esto, realizamos los siguientes cambios:
- Header: En nuestro diseño anterior, el menú principal era el mismo del sitio corporativo, por lo que no mostraba los contenidos que ofrece el blog. Ahora se muestran las categorías, las cuales fueron replanteadas según un análisis de palabras clave enfocado en la optimización para buscadores. Además, agregamos la barra de búsqueda, dejándola en una posición más visible y relevante.
- Bloques de contenido: Tomamos el ejemplo de Google Cards para crear bloques de contenido fáciles de replicar. Siguiendo este modelo, agrupamos todos los elementos de una publicación y los ordenamos en un mismo patrón. Esta organización ayuda a la coherencia y mejora la performance en desarrollo.
- Scroll infinito: Gracias a las redes sociales, los usuarios se han acostumbrado al scroll infinito. Adaptamos nuestro blog a esta tendencia, aprovechando además que esta modalidad nos permite mostrar de forma fluida todo el contenido disponible.
- Puntos de conversión: Creamos un formulario que sirve para responder las distintas necesidades que pueden tener los usuarios y lo ubicamos en el sidebar. La barra de suscripción al newsletter quedó situada justo debajo de los artículos destacados para invitar al lector a seguir nuestras publicaciones.
Estilo visual
Desde el estilo visual, adelantamos parte del trabajo con la creación de una línea gráfica para la producción de imágenes propias. Luego, realizamos algunos ajustes:
- Cajas: Eliminamos las cajas grises que rodeaban los elementos. Ahora el diseño es más limpio y se enfoca al contenido.
- Colores: Adaptamos los tonos según la nueva gama de la línea gráfica, lo que nos permite destacar mejor los elementos importantes.
- Imágenes: En el blog antiguo las imágenes se cortaban para adaptarse a los distintos tamaños, perdiendo contenido. Ahora, las adaptamos para que se redimensionen, mostrando toda la información sin importar el tamaño.
Accesibilidad
Las buenas prácticas de accesibilidad web nos permiten asegurar que todos los usuarios podrán consumir nuestros contenidos de forma adecuada. Por esto, realizamos las siguientes optimizaciones:
- Títulos: Eliminamos las palabras en mayúsculas para mejorar la legibilidad. El uso adecuado de este recurso facilita la distinción de palabras y hace más rápida la lectura.
- Contraste: Mejoramos el contraste de los enlaces y las cajas para que fueran más fáciles de identificar. Incluimos un azul luminoso que ayuda a reconocer los elementos de navegación.
- Tiempo de lectura: Agregamos un indicador del tiempo que se necesita para consumir cada contenido.
- Colores: Usamos colores complementarios en un diseño limpio para mejorar la lectura, ser más atrayentes y destacar ciertos elementos.
Gracias al trabajo coordinado de nuestros equipos, logramos una solución para darle mayor visibilidad a los contenidos, manteniendo un balance entre las producciones recientes y las antiguas.
Confiamos en que el nuevo blog combina nuestros aprendizajes y experiencia en técnicas SEO, diseño de experiencia de usuarios y marketing de contenidos, para responder de la mejor forma a las necesidades de nuestros lectores.
Estructura
- Header: En nuestro diseño anterior, el menú principal era el mismo del sitio corporativo, por lo que no mostraba los contenidos que ofrece el blog. Ahora se muestran las categorías, las cuales fueron replanteadas según un análisis de palabras clave enfocado en la optimización para buscadores. Además, agregamos la barra de búsqueda, dejándola en una posición más visible y relevante.
- Bloques de contenido: Tomamos el ejemplo de Google Cards para crear bloques de contenido fáciles de replicar. Siguiendo este modelo, agrupamos todos los elementos de una publicación y los ordenamos en un mismo patrón. Esta organización ayuda a la coherencia y mejora la performance en desarrollo.
- Scroll infinito: Gracias a las redes sociales, los usuarios se han acostumbrado al scroll infinito. Adaptamos nuestro blog a esta tendencia, aprovechando además que esta modalidad nos permite mostrar de forma fluida todo el contenido disponible.
- Puntos de conversión: Creamos un formulario que sirve para responder las distintas necesidades que pueden tener los usuarios y lo ubicamos en el sidebar. La barra de suscripción al newsletter quedó situada justo debajo de los artículos destacados para invitar al lector a seguir nuestras publicaciones.
Estilo visual
- Cajas: Eliminamos las cajas grises que rodeaban los elementos. Ahora el diseño es más limpio y se enfoca al contenido.
- Colores: Adaptamos los tonos según la nueva gama de la línea gráfica, lo que nos permite destacar mejor los elementos importantes.
- Imágenes: En el blog antiguo las imágenes se cortaban para adaptarse a los distintos tamaños, perdiendo contenido. Ahora, las adaptamos para que se redimensionen, mostrando toda la información sin importar el tamaño.
Accesibilidad
- Títulos: Eliminamos las palabras en mayúsculas para mejorar la legibilidad. El uso adecuado de este recurso facilita la distinción de palabras y hace más rápida la lectura.
- Contraste: Mejoramos el contraste de los enlaces y las cajas para que fueran más fáciles de identificar. Incluimos un azul luminoso que ayuda a reconocer los elementos de navegación.
- Tiempo de lectura: Agregamos un indicador del tiempo que se necesita para consumir cada contenido.
- Colores: Usamos colores complementarios en un diseño limpio para mejorar la lectura, ser más atrayentes y destacar ciertos elementos.
Autor
Andrea Zamora
Directora
Lidero el trabajo de una de las consultoras en diseño de experiencia más importantes de Chile. Con nuestro equipo entendemos cómo comunicar y posicionar productos y servicios, generando experiencias deseables en los usuarios finales.
Artículos relacionados
Accesibilidad cognitiva
Estás perdiendo a uno de cada cinco usuarios porque el modo oscuro no es una estrategia de inclusión
Diseño de Experiencia
Arquitecturas de información en tiempos de Inteligencia Artificial
Inteligencia Artificial