42DS Design System

Construcción del Sistema de Diseño multimarca del grupo de prensa español Prensa Ibérica, con el fin de unificar y agilizar el diseño de sus más de 25 publicaciones actuales entre revistas y periódicos, con ediciones tanto en papel como digital que se distribuyen y se publican a nivel nacional.

Proyecto

 

DESAFÍO

Construir un sistema de diseño que permitiera la personalización para reflejar la identidad única de cada periódico y/o revista en sus ediciones digitales, al tiempo que proporcionara componentes unificados que facilitaran la navegación y el reconocimiento del grupo como una entidad.

 

OBJETIVO

Unificar la identidad digital de las múltiples marcas individuales de los periódicos y revistas de grupo, manteniendo la singularidad y personalidad de cada periódico.

MI ROL

UX/UI Designer

 

TAREAS

Research, Benchmark, UX/UI Design

 

HERRAMIENTAS

Figma, Zero Height

 

EQUIPO

8 diseñadores (Co-creación)

Contexto

El grupo de prensa español cuenta con una cartera diversa de periódicos diarios, semanarios y revistas, cada uno con su propia audiencia, tono y estilo visual. Se hacía necesario aportar coherencia en la experiencia digital para no dificultar la percepción unificada del grupo y a la vez agilizar los procesos de diseño.

El grupo cuenta actualmente con 28 periódicos y 4 revistas, además de multitud de crónicas locales y publicaciones corporativas. Se distribuyen de la siguiente manera:

  • Periódicos regionales (Información, Faro de Vigo, Levante EMV, Diario de Mallorca, La Nueva España, El Correo de Andalucía…
  • Periódicos nacionales (El periódico y El periódico de España)
  • Revistas (Woman, Viajar, Stylo y Cuore)
  • Diarios deportivos (Sport y Superdeporte)

 

La madurez del grupo en cuanto a sistemas de diseño se encontraba en fases tempranas, lo que se tradujo en una gran ventaja al poder participar y colaborar desde el principio en la construcción y mantenimiento de las bases del sistema de diseño del grupo, lo cual fue posible gracias a la coordinación y cooperación del equipo de diseñadores entre los que se encontraban algunos más experimentados en implementar con éxito sistemas de diseño con anterioridad.

Solución

Se optó por desarrollar un sistema de Diseño Multimarca que constaba de un conjunto de principios de diseño, patrones y componentes compartidos, junto con pautas claras para la personalización de cada marca. Se realizaron varias fases, que incluyeron una auditoría de los componentes principales que se usaban en los periódicos del grupo, investigación y comparativa de sistemas de diseño actuales, definición y diseño de los componentes usando para ello las bases del diseño atómico y teniendo en cuenta aspectos como la accesibilidad y posteriormente implementación a código.

 

Mi participación, en concreto, se centró en la investigación y generación en Figma de los componentes de los formularios existentes en los periódicos y revistas del grupo, así como la definición y diseño de ventanas modales que se usarían a posteriori en los nuevos rediseños del grupo. También añadí los estilos tipográficos y la guía de estilos de colores que usa la web corporativa del grupo Prensa Ibérica. Finalmente documenté mi aporte añadiendo información de cada componente, casos de uso/mal uso, accesibilidad… etc.

Implementación

Tras la finalización de la creación de los componentes y estilos del sistema de Diseño en Figma y siguiendo con la metodología de atomic design, el equipo de Front dio paso a la implementación de los componentes en código con la idea de usar también Storybook. Crearon un showroom del sistema del sistema de diseño donde además del html, también se refleja la estructura de construcción de los componentes en Sass.

Before After

Imagen anterior y posterior de una noticia de La Opinión de Málaga rediseñada usando los componentes del sistema de diseño

Aplicación

Actualmente el sistema de diseño multimarca se está implementando gradualmente en todos los periódicos del grupo, comenzando con una fase piloto en un periódico de tamaño mediano. Se realizaron ajustes basados en la retroalimentación entre los departamentos de SEO, marketing y analítica con desarrollo y se proporcionó capacitación al equipo interno para garantizar una adopción exitosa.

 

Resultados

La implementación del sistema de Diseño Multimarca condujo a una experiencia digital más coherente y profesional para todos los periódicos del grupo permitiendo al grupo de prensa español mantener la individualidad de cada marca mientras se ofrecía una experiencia unificada a los usuarios. Este enfoque no solo mejoró la eficiencia operativa, sino que también fortaleció la percepción de la marca en el mercado.