
Diseño editorial: repelente. — Case study
“Repelente” es un proyecto que hice junto a Beatriz Uzquiano sobre cómo mejorar la experiencia de usuario de una editorial.
Además de pensar en nuestro público, ideamos qué tipo de features debíamos incorporar, analizamos la competencia y desarrollamos una identidad visual y un sistema de diseño.
Problema: Las revistas en papel llevan desde los 2000s sufriendo un gran descenso de lectores. A pesar de que todas ellas, tienen su formato digital necesitan encontrar nuevas formas con las que interactuar, ya que la tipología de usuario está cambiando.
Briefing: Diseñar una plataforma interactiva enfocada a las necesidades de nuestro perfil de usuario. Creando una marca reconocible y un estilo que garantizase la consistencia.
Investigación, definición e ideación
En este proyecto debíamos centrarnos sobretodo en la parte UI, pero antes de llegar a esta parte hicimos un proceso ágil de investigación

¿Quién nos va a leer?
Mujeres jóvenes de entre 18 y 36, aunque no de manera excluyente. Las tomamos como modelo para observar los nuevos comportamientos y desarrollar nuevas funcionalidades.
“La tendencia actual es que los usuarios utilizan el móvil más que cualquier otro dispositivo para mantenerse informados. Pero a la vez tienen menos tiempo o falta de concentración para leer artículos largos. Además comparten más que nunca la información y sus opiniones a través de las redes sociales.”
User persona
Construimos nuestro principal user persona en base un estereotipo, no enfocándonos en una persona en concreto. En principio era una usuaria muy centrada en la moda y nosotras ampliamos sus gustos a un perfil más actual y abierto. Así creamos a Carmen, una usuaria ficticia que no solo tiene interés en la moda sino en temas de actualidad, arte y cultura, incluso eventos o series de televisión y además está aburrida de las típicas publicaciones de prensa rosa.

Web mobile first
Según nuestro público objetivo nos encontramos con que la mayoría de los usuarios utilizan el móvil tanto para leer como para compartir información. Por lo que diseñamos nuestro contenido teniendo en cuenta estas limitaciones.
Just to be done y estudio de la competencia
Tras definir nuestro user persona, nos pusimos a desarrollar nuestras funcionalidades principales. Algunas eran elementos clave que habíamos observado en otras publicaciones digitales, como indicar el tiempo de lectura, y otras vendrían de patrones de redes sociales, como mostrar un círculo para destacar el contenido reciente.

Diseño
Moodboard
Para inspirarnos empezamos a buscar referencias que nos encajasen con nuestro perfil. Empezamos mezclado muchas imágenes de diferentes fuentes: desde fotos inspiradoras, publicaciones en Instagram, Pinterest o Dribble. Al agruparlas nos dimos cuenta que teníamos tres líneas muy diferentes y como aún no queríamos descartar nada las completamos con los colores principales, familia de iconos, tipo de ilustración, elementos gráficos y tipografías. Una vez completados tuvimos muy claro el que elegir, pero aún así pedimos ayuda a nuestra TA Inés para ver su opinión. Definitivamente hubo consenso, y esta era la propuesta que mejor representaba nuestra marca.

La marca
Desde el principio teníamos clara la idea de que el nombre de nuestra revista fuera una palabra en el español con mucha carga de significado.

Pensamos en “repelente” porque aunque sea un término que se usa de forma despectiva, podríamos apropiarnos de él para llevarlo al lado opuesto. Así haríamos un adjetivo con el que se identifiquen las personas que quieren saber y lo hacen de una manera activa, e incluso como una reivindicación.

Guía de estilo
Para crear nuestra marca nos basamos en 3 elementos principalmente: el color, la tipografía y las formas redondeadas.
El color. Tiene dos colores que la componen el azul y el rosa. Tuvimos que hacer algunos cambios para que fuera accesible y el contraste garantizara la legibilidad y tuviera la triple A.

Observamos que el rosa sobre azul funciona perfectamente y a la inversa, también, y vimos que podíamos usar el azul sobre blanco. Y además, hicimos una gama de tres grises virados a azul que los completaban.
La tipografía: Buscamos una tipografía de palo seco que tuviera una gran versatilidad. Elegimos la Poppins por su variedad de pesos, así no necesitaríamos añadir una segunda tipografía.

Otro motivo por el que nos parecía acertada esta tipografía era porque pertenece a Google Fonts, lo que además de facilitar el desarrollo de la página agiliza la carga. Esta tipografía recorre toda la revista creando desde el logo, pasando por los titulares, secciones y categorías, hasta el cuerpo de texto.
Las formas redondeadas aparecen en los botones, y en las cajas y fondos y ademas se utilizan para enmarcar fotografías y unificarlas, ya que al ser una publicación no siempre vamos a poder controlar el tipo de imagen pero este marco le dará unidad.

La guía de estilo es fundamental para mantener la consistencia de la página y que el usuario no sienta que sale del entorno. Empezamos desarrollando una primera guía compuesta por los colores y definiendo su usos, los tamaños y colores de la tipografías, los botones y encuadres fotográficos.

Prototipo
Nuestra propuesta: repelente. Una revista interactiva con una gran actitud, un punto de encuentro entre actualidad, moda, cultura, arte y opinión.
Antes de empezar a pintar pantallas, creamos un User flow con con dos recorridos posibles que haría nuestro usuario Carmen.

En nuestro primer prototipo en papel nos dimos cuenta de algunos pasos que faltaban. Y empezamos a ver las jerarquías y organización de los contenidos.
Un nuevo usuario empezaría por una bienvenida, que le daría el tono de nuestra publicación para a continuación pedirle que elija los temas de interés que quiere que le mostremos.
Una vez con estos datos entraría en la home donde:
- Primero le mostramos una noticia principal , y con mayor relevancia.
- A continuación sus categorías elegidas con un patrón reconocible en el que aparece destacado con un circulo cuando hay contenido nuevo.
- Bajaría a un scroll lateral con noticias destacadas en la web.
- Una sección de lo que no puede perderse desde la que puede o añadir a la lista de lectura, marcar como favorita o acceder a la noticia.
- Otra funcionalidad que decidimos añadir era un calendario, ya que nuestro público esta formado por gente que adquiere cultura de manera presencial. Y les gusta ser activos y asistir a los eventos como conciertos, exposiciones, pases de moda o presentaciones de libros.
Otras características que tienen las páginas de noticia son:
- El tiempo de lectura medio: al usuario le estresa no saber cuánto tiempo le va a llevar esta tarea y la suele abandonar.
- El destacado del autor, desde donde acceder a su perfil.
- Sección de noticias relacionadas, desde las que seguir navegando y saltar de una notica a otra. Incrementando el tiempo de permanencia en la plataforma.
- Y una de las funcionalidades más especiales para el usuario: hacer una publicación para Instagram con contenido relevante. Así podría nutrir su redes sociales de contenido cultural y a nosotras nos da publicidad gratis.
Otra funcionalidad estrella era poder seguir a escritores. De manera que creamos una sección especial con los más destacados en la home. Y también una ficha de autor con un perfil donde poder seguir leyendo más sobre él o ella. Desde una frase que le defina, a los artículos publicados o los seguidores que tiene dentro de la plataforma.
Aprendizajes
Trabajo en equipo: La verdad que me gustaría hacer una mención especial a este respecto a Bea porque creo que hizo un gran trabajo. Demostró una gran actitud, abierta en todo momento a aprender y defender el trabajo realizado.
Probar nuevos programas: Habíamos hecho un workshop sobre Figma y queríamos ponerlo en práctica, así que nos lanzamos de cabeza.
Sobre todo nos interesaba la posibilidad del trabajo en remoto y las animaciones que permite en el prototipado, como el scroll lateral.
Gracias por tu tiempo ❤
