Entrevista a Inma Bermejo: Rediseñando Xataka

A finales del mes pasado, uno de los medios tecnológicos en español más populares (si es que no es el más popular, con sus seis millones y medio de usuarios únicos en noviembre), se rediseñaba.

Ellos mismos nos explicaban algunas de las claves más importantes en su propio medio, pero hemos querido hablar un poco más sobre el tema con una de las principales implicadas, Inma Bermejo, que nos ha cedido amablemente su tiempo para contestar estas preguntas.

¿Te podrías presentar?

Desde hace unos 13 años me dedico al diseño y desarrollo web profesionalmente, soy ingeniera informática de formación, pero las bases de datos no me ganaron :-). Empecé con la corriente de la accesibilidad y usabilidad que había a principios de este nuevo siglo y lo que marcó el punto de inflexión fue que me escogieron para participar en el Programa Vostok IV de Javier Cañada. Desde entonces, he enfocado mi carrera más hacia el diseño, o diseño de producto, que se llama ahora.

Trabajo en Weblogs SL en su división de producto, diseñando y desarrollando nuestros propios medios digitales, y también como freelance para algunos proyectos puntuales.

¿Qué es lo que pretendíais con este rediseño de Xataka?

El objetivo principal era conseguir reflejar lo que es Xataka ahora: uno de los medios de comunicación líderes en tecnología. Nació hace 11 años como un blog, pero ahora tiene más de 6 millones de lectores al mes  y genera contenidos de gran calidad que no se veían reflejados en su portada anterior.

También queríamos dar herramientas al equipo editorial, y a los lectores, para distinguir fácilmente en la portada los tipos de contenidos que se elaboran. Antes, con el diseño propio de un blog, un análisis muy trabajado tenía el mismo aspecto que una nota de prensa.

Ahora tenemos varias herramientas para reflejar la jerarquía, y también para distinguir los contenidos importantes editorialmente de las publicaciones más recientes. Así pretendemos que la portada sea útil para alguien que la visita varias veces al día, o para los que vienen de vez en cuando.

Hablemos del proceso. Desde que surgió la primera idea hasta que se ha puesto en marcha… ¿cuánto tiempo ha pasado? ¿Nos puedes describir un poco el equipo humano que ha trabajado en el proyecto y la metodología que habéis seguido?

Bastante tiempo, porque tuvimos un intento fallido. A principio de año, pasamos un par de meses trabajando en ello, pero no conseguimos un planteamiento viable para desarrollarlo con el equipo que tenemos.

Después, con una persona que se incorporó para dirección de producto, hicimos un nuevo roadmap que sí nos permitía llevarlo a cabo: usando un proceso iterativo lanzando poco a poco las novedades, cada 2-3 semanas.

En total, calculo esos dos meses iniciales, y luego lo retomamos a mediados de septiembre… hasta el 23 de noviembre, total, cuatro meses.

Sobre el proceso, más o menos éstas son las fases que seguimos:

1. Visión: trabajando sobre todo con Julio Alonso, nuestro CEO, para identificar objetivos.
2. Investigación: de nuestro producto actual (análisis DAFO), de nuestra materia prima (los contenidos), los usuarios y stakeholders con entrevistas.
3. Análisis: estudio de los resultados de la investigación, y ver cómo maridaban con los objetivos del rediseño.
4. “Bajarlo a tierra”: en base al análisis creamos una lista de necesidades o retos. En esta fase ya incluimos ideas para posibles soluciones y las métricas de valoración para cada necesidad. Después, planificamos en calendario.
5. Bocetos y wireframes: producción y validación con stakeholders de la solución propuesta para cada necesidad concreta.
6. Diseño visual y validación de nuevo con stakeholders
7. Creación de prototipos en HTML y CSS con el diseño e interacciones definitivos.
8. Desarrollo back-end: escalado en sprints de dos semanas, trabajamos con metodología Agile.
9. Control de calidad, y, por fin, ¡lanzamiento!

En cuanto al equipo, en la parte de desarrollo tenemos a nuestro director técnico y diez desarrolladores back-end. Por mi parte hago el diseño de wireframes, visual y desarrollo front-end de prototipos.

Normalmente, un compañero del equipo de Diseño y yo nos ocupamos de la recogida de requisitos y las gestiones que facilitan el trabajo con stakeholders; sin embargo, en esta ocasión, hemos contado con la ayuda de un director de producto e incluso del propio Julio Alonso para trabajar con los equipos editorial y comercial.

Esta intermediación es muy importante en nuestros caso para facilitar el trabajo, ya que somos un equipo con muy distribuido geográficamente; yo trabajo desde Murcia, pero la oficinas centrales están en Madrid, además el equipo editorial está por toda España y parte del extranjero.

Y en cuanto a la implementación… Vuestro HTML y CSS son, habida cuenta de la complejidad de Xataka, bastante legibles y, en principio, parecen también bastante manejables. ¿Nos puedes contar cómo lo habéis trabajado?

Creo que eso ocurre por dos cosas: no usamos un framework “comercial”, sino uno propio, y la semántica es casi lo más importante para mí en front-end. Soy de la escuela del CSS Zen Garden 🙂 y nos esforzamos mucho en que el HTML sea semántico, y que el CSS sea el menor posible.

Para diseño, trabajamos con sistemas. Seguimos los principios de patrones de contenido y patrones de diseño y Atomic Design y eso ayuda mucho a mantener bajo control el front-end.

Antes nuestro CSS se organizaba por páginas y aprovechando el rediseño, estamos pasando a arquitectura modular. Para organizarnos, usamos una nomenclatura similar a BEM pero simplificada, y SMACSS. Por ahora estamos muy contentos con el cambio.

Aunque sabemos que bastante pronto para hacer una evaluación completa, ¿habéis comenzado a estudiar si está dando los resultados esperados?

Cualitativamente hemos recibido buenas opiniones y el equipo está contento con los cambios. Nuestros rediseños anteriores no habían salido bien del todo y esta vez ha sido muy diferente, para bien.

Cuantitativamente, en la primera iteración observamos mejoras en las métricas que elegimos (tasa de rebote, páginas vistas desde portada…) pero en la segunda iteración, empeoraron.

Hemos investigado y hemos visto que la influencia de la actualidad (por ejemplo, si hay una keynote de Apple) es tan grande que no nos deja ver claramente la influencia de los cambios, así que en las siguientes iteraciones vamos a valorar otras formas de medir, como test A/B.

Cita recomendada: MOSAIC. Entrevista a Inma Bermejo: Rediseñando Xataka. Mosaic [en línea], diciembre 2016, no. 144. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n144.1631.