Rediseño del sitio web de Enfant Terrible
Enfant Terrible es un medio cooperativo fundado en 2018 en Córdoba, Argentina. Su enfoque abarca temas socioambientales, políticos, territoriales y de género, trabajando en colaboración con organizaciones sociales y como miembro fundador de la Red de Medios Digitales (RMD) de Argentina.
TL;DR
Desafío
El sitio ya no reflejaba la evolución de la identidad de marca, lo que generaba problemas de usabilidad y desconexión con las expectativas de los usuarios.
Proceso
Realicé entrevistas con usuarios, revisé las métricas del sitio web y trabajé con el equipo Editorial para identificar los principales puntos débiles.
Solución
Rediseñé el sitio web desde cero, mejorando la navegación, agregando live search y modernizando el diseño visual para alinearlo mejor con la identidad de la marca.
Impacto
Se logró una presencia online coherente, con mayor usabilidad y una mejora en la interacción de los usuarios.
Rol
Functional Analyst, Web Developer, UX/UI Designer
Stack
WordPress, Oxygen, Gutenberg, Tailwind, Winden
Qué hice
Como diseñador principal, desarrollador y analista funcional, lideré la exploración, análisis, diseño e implementación del sitio web de Enfant Terrible.
Realicé entrevistas internas y externas para definir los requisitos de negocio y usuario, y traduje esas necesidades en funcionalidades del sitio.
Definí características clave, comportamientos e integraciones, asegurando una integración sin problemas con WordPress y servicios de terceros.
Además, desarrollé prototipos de baja y alta fidelidad para refinar la experiencia de usuario y gestioné la implementación completa en WordPress.
El problema
Enfant Terrible pasó por varios procesos de maduración de su identidad visual desde su fundación.
Dado el énfasis en las redes sociales, con un crecimiento particular en Instagram, la velocidad a la que maduró la identidad visual no fue la misma que la del sitio web.
Muchos componentes del sitio ya no representaban la identidad visual de Enfant Terrible, mientras que otros tenían problemas de usabilidad.
Objetivo
Implementar un rediseño del sitio web de Enfant Terrible que sea coherente con su identidad visual actual.
Investigación
Tuve reuniones con el equipo de Enfant Terrible para identificar problemas y posibles mejoras.
Consideré la plataforma web y las redes sociales como una familia de productos interconectados y realicé un análisis heurístico para evaluar la consistencia visual interna.
Analicé datos de Google Analytics y Microsoft Clarity para comprender mejor los patrones de consumo e interacción con el sitio web.
Realicé entrevistas con 6 usuarios habituales para profundizar en cómo consumen contenido en la plataforma web, así como los problemas o dificultades que suelen encontrar.
Insights
Análisis Visual
La tipografía y los estilos visuales presentados en las redes sociales no coincidían con los del sitio web. Algunos componentes tenían problemas de accesibilidad.
Inicio
Los usuarios que llegaban desde Instagram preferían ver más contenido en la página de inicio.
Búsqueda
Todos los usuarios entrevistados tenían problemas con la función de búsqueda del sitio web.
Contexto
Los usuarios dependen del lema/encabezado para comprender rápidamente el contexto de los artículos.
Proceso
Teniendo en cuenta lo planteado por el equipo de Enfant Terrible, junto con las perspectivas obtenidas de las entrevistas y los análisis, se identificaron los siguientes elementos clave:
- Diseñar una única fuente de verdad que permita mantener la consistencia interna en los diferentes productos.
- Mejorar el diseño de los artículos en la página de inicio.
- Implementar un mejor sistema de búsqueda.
Única Fuente de Verdad
Creé una guía de estilo y marca en Figma para guiar el proceso de rediseño. Esta guía sirvió tanto para el rediseño del sitio web como para mejorar el flujo de generación de activos para redes sociales por parte del equipo de Community Management.
Home (is where I want to be)
Una vez sistematizada la guía de estilo y marca, procedimos a iterar sobre una serie de wireframes. Se prestó especial atención a la página de inicio y los artículos, ya que estos eran los puntos de acceso más comunes según los análisis y la información obtenida de las entrevistas.
Tuvimos varias sesiones de ideación con el equipo de Enfant Terrible, donde presenté algunos problemas de usabilidad y accesibilidad del sitio. Trabajamos durante varias semanas en el diseño de la página de inicio y los artículos.
Se implementó un feed de artículos, priorizando contenido más compacto, con la mayor cantidad de información posible en cada artículo, moviendo ciertos detalles (autoría, categoría, fecha) al fondo.
Mejorando la Búsqueda
Uno de los problemas mencionados por los usuarios entrevistados era lo engorroso que resultaba buscar un artículo cuando no sabían cómo formular su búsqueda. El sistema no proporcionaba ninguna notificación de estado hasta después de realizar la búsqueda.
Para facilitar el proceso de búsqueda, se diseñó un flujo que proporcionaba búsqueda en vivo con opciones de autocompletado, reduciendo el número de interacciones y proporcionando notificaciones de estado de búsqueda.
Takeaways
El proyecto está escrito en un orden lógico, no cronológico.
Ciertas etapas fueron desafiantes debido a los recursos limitados. Como único diseñador y desarrollador, el proceso fue más largo y menos exhaustivo de lo que hubiera querido.
A pesar de esto, el rediseño recibió comentarios positivos, tanto dentro de Enfant Terrible como de usuarios externos, incluso más allá de la muestra utilizada para evaluar la implementación.
Aunque la identidad visual de Enfant Terrible ha evolucionado en los últimos años, todavía hay aspectos por resolver.
Actualmente, el sitio web está construido utilizando Oxygen, un constructor visual, y Winden, una extensión que permite usar Tailwind.
La decisión de hacerlo de esta manera se debe a que el sitio web se encuentra en un punto de inflexión, con una migración planeada a un tema híbrido con Tailwind.
Oxygen y Winden resultaron ser un paso intermedio, siendo el primero parte de la deuda técnica del sitio.