Rediseño Gentleman

Propuesta de rediseño de la home de la web de Gentleman y la app regalador

Antecedentes

Gentleman es una revista de estilo de vida que se publica desde 2003. Según la OJD (Oficina de Justificación de la Difusión) es la revista 81º en el ranking general y la 4º en la categoría de estilo de vida con una tirada promedio de 25.510 ejemplares al mes y un promedio de difusión de 19.782 lectores. Pertenece al grupo editorial italiano Class Editori. Desde su inicio hasta el año 2014 fue editada por Prisa Revistas. A partir de este momento, como recoge El Mundo, es la empresa Luxury Media la encargada de editarla mensualmente.

En 2016, alcanzan un acuerdo con El Confidencial para alojar la versión digital de la publicación entre los verticales del diario digital. “La web aspira a posicionarse como un medio con entidad propia, aprovechando la agilidad, vivacidad e inmediatez del sector online”, decía el artículo en el que publicaban el acuerdo. Después de hacer este trabajo en mayo de 2019, el subdominio que llevaba a la portada de Gentleman dejaba de estar disponible, aunque parte de sus portadas todavía se pueden visitar, y en sus redes sociales publicaban su nueva web asociada al diario digital La Información.

Ranking de revistas de estilo de vida según la OJD donde Gentleman está en 4º posición.

Problemas y Objetivos

No suelo ser consumidor habitual de estas revistas pero a veces sí compro o echo un vistazo a revistas como Esquire, ICON Yorokobu o Gentleman. Sobre todo por ver su espectacular diseño editorial, además de leer algún reportaje interesante. Como este trabajo fue voluntario me inventé un supuesto problema en la portada desktop: los usuarios no suelen consumir más de un artículo en la web. El porcentaje de recirculación es bajo. La retención general del producto es baja. Rara vez visitan más de una vez al mes.

Para intentar solucionar estos problemas, se podrían poner en práctica varias acciones. De un vistazo general a la actual portada de la web de Gentleman y no encontré graves problemas de UI, aunque sí que puede tener demasiados módulos iguales que pueden ser repetitivos y no llamar la atención. Propongo un rediseño de la portada introduciendo diferentes módulos que le den más personalidad y carácter. También que permita hacer más llamativos los contenidos de la portada y dar sensación de dinamismo, de actualización diaria. Me da la sensación que el usuario cuando lee la revista en papel va a consultar la web y pierde el hábito de consultarla diariamente, imaginando creo, que se actualiza una vez al mes, como la revista.

Investigación (empatizar con el usuario)

UX Persona

Para trabajar enfocado en los objetivos alineado con el perfil de usuario seleccionado de Gentleman, construí el UX Persona de Pedro, sobre el que centrar mi diseño.

Ejecución rediseño home desktop

1. Encontré unas revistas antiguas que tenía en casa, entre ellas una Gentleman, y analicé los diseños y tipo de contenidos. Compré la edición actual para ver si había cambiado algo y utilizar la portada.
2. Hice una búsqueda de webs referentes de revistas en todo el mundo. Las investigué y guardé lo que más me llamaba la atención en cuanto a cabecera, tipo de GRID, módulos, etc.
3. Dibujé a mano los wireframe de cabecera, cabecera sticky, y los principales módulos.
4. Pasé los wireframe a sketch de forma rápida.
5. Dupliqué los wireframe y empecé a diseñar la capa visual sobre lo diseñado en wireframe.
6. Documenté y expliqué todo el proceso de rediseño de la home de la web de Gentleman.

Revistas utilizadas para inspiración

Cabecera

Rediseñé la cabecera intentando imprimir más el carácter de la publicación en papel. Fondo negro, al 100 %, para darle personalidad y elegancia. Separé las marcas de la cabecera, creo que ahora queda mucho más claro dónde estás. En Gentleman, que pertenece a la web de El Confidencial.

El menú hamburguesa esconde otras opciones diferentes a las destacadas fuera. Aunque también existe la posibilidad de poner el menú arriba junto al logo de El confidencial y que sea el menú de El Confidencial (aparece en una opción de sticky).

También contemplé para cuando saliese la edición en papel o se quisiera hacer algo más especial, que la cabecera podría ir toda bajo una imagen al 100 % que fuese la del primer contenido. Algo parecido a esto. Aunque finalmente no hice esta versión.

Cabecera sticky

Hice tres posibles opciones, dependiendo del tipo de convivencia de marcas solicitada.

GRID

Diseñé la web con un ancho estándar 100 % de 1140px. En el que excepto la cabecera, el resto de contenidos están encapsulados en una GRID de 996px, igual que la actual. Aunque personalmente con las pantallas de hoy en día mi opción es dar más ancho a los contenidos, decidí dejar esta medida para que en el espacio restante puedan convivir formatos publicitarios como los “rascacielos”, “bran day”, etc. El sistema que utilicé de GRID fue de 12 columnas.

Módulo apertura 12col

El primer módulo de la web es el de apertura. Lo diseñé al 100% de la GRID (excepto un pequeño margen). Me hubiera gustado ponerlo al 100 % como la cabecera, pero para respetar los formatos publicitarios lo dejé así.

Módulo apertura 12col + contenidos

Este módulo es copia del anterior, lo diseñé como segunda opción, en la portada real no estarían los dos juntos. Aprovechando el día que se publica la revista en papel se puede hacer un guiño a la portada en papel de Gentleman y añadir algunos contenidos más que lleven el número enlazado a sus correspondientes noticias.

Módulo 9col

Aunque no es muy común un módulo de 9 Columnas quise hacerlo como guiño a las aperturas en papel en las que la foto ocupa toda la primera página y parte de la segunda, creando un efecto con la encuadernación. Se podría utilizar para grandes temas o reportajes.

Módulo carrusel 12col

Aunque algunos expertos afirman que ya nadie usa los carruseles lo cierto es que la mayoría de plataformas audiovisuales (Netflix, Movistar+, HBO, Amazon Prime, etc) hacen de ellos su forma de presentar los contenidos. No tenía datos de uso pero propuse un carrusel a 12 Col, para destacar diferentes temas. No debería tener más de 4 o 5 contenidos, para no cansar al usuario.

Módulo 6col

Módulo común para enfrentar dos temas con el mismo peso.

Módulo 6col (sección)

Este módulo se me ocurrió, no sé si lo tendría en la cabeza de haberlo visto en algún sitio, y después viendo ejemplos vi que ya existía. La idea es que tenga una cabecera a modo de banner con una imagen personalizable. Incluso para vender la cabecera para que una marca patrocine la sección. Al hacer scroll, el primer contenido a la izquierda se queda anclado y el resto de contenidos de la derecha van haciendo scroll. Quise hacer un listado horizontal de contenidos para que no descuadrasen por la longitud de los titulares (en el siguiente módulo lo explico). La idea de este módulo es que haya uno por sección y se repartan por la portada. Estos son los ejemplos de funcionamiento: Ejemplo1 Ejemplo2

Módulo 8col

Este módulo es el que usaría para poner la mayoría de los contenidos de la web. No me gusta que en las webs actuales de noticias haya módulos de diferentes tamaños para dar más o menos importancia a los temas. Este comportamiento heredado de la jerarquía de los periódicos en papel puede tener sentido para noticias informativas. Los contenidos diferentes de Gentleman creo que no necesitan un orden tan jerarquizado y pueden ser simplemente un listado de contenidos en el que se vean los temas de forma clara.

Además, hace un cierto paralelismo a la edición en papel, en la que casi todos los temas ocupan una o más páginas y no comparten jerarquía con otros temas. Vas viendo los temas en orden conforme pasas las páginas. Aquí sería igual, vas viendo temas, conforme haces scroll. Si quieres saltar 10 páginas, también puedes hacerlo en digital haciendo más scroll. Como detalle, introduje el número de la edición en papel al lado de la fecha para indicar en qué número aparece ese contenido.

Módulo opinión

Un módulo para artículos de opinión, especiales o con nombres propios.

Módulo 3col (productos)

Algo que me llamó mucho la atención es cómo con la cantidad de páginas en papel dedicadas al showroom de productos no se ve reflejado en digital. Diseñé un módulo en el que se pueden destacar algunos productos, indicando su precio y enlace de compra bajo un programa de afiliación.

Módulo regalador

Buscando información sobre los programas de afiliación, que los desconocía, descubrí la posibilidad de hacer un “regalador”. Una especie de formulario con preguntas para que después te sugiera qué regalos hacer. Como me pareció interesante y ya que el diseño de la portada solo iba a hacerlo en desktop, decidí hacer una versión mobile del regalador. En la portada dejé un módulo con un CTA y que funciona como separador de contenido.

Módulo 3col (agenda)

Otra cosa que tampoco vi en la edición digital y que dedican varias páginas en papel es a la agenda cultural. Hice un módulo para ello que dispone de dos seleccionadores para ciudad y disciplina. Indica en el antetítulo el lugar y debajo del titular las fechas.

Módulo 6col (vídeos)

Es el mismo formato que el de las secciones pero más corto (se puede adaptar el tamaño) y dedicado a vídeos que se podrían potenciar ya que creo que no existen. Este mismo módulo se podría aprovechar para destacar las galerías de imágenes.

Módulo newsletter

Desconozco si tienen, pero se podría poner en marcha y potenciar una newsletter, bien diseñada, con los contenidos más interesantes. Así se podría enviar cuando se publicase la revista en papel para recordar que ya está en el kiosko y también durante el resto del mes, para intentar que el usuario que no vuelve, entre de nuevo en la web.

Módulo 6col (noticias El Confidencial)

Ya que en la web de El Confidencial hay un módulo de Gentleman, aquí también se podría hacer para hacer “crosslinking”.

Módulo Lo más

Módulo que se podría personalizar con lo más visto para vídeos o galerías y diseñar de diferentes formatos (4Col, 6Col, etc y ponerlo más arriba). Se utilizaría para potenciar la recirculación de contenidos, que en este momento no tiene. Se puede cambiar entre día, semana y mes. Aunque no es muy común filtrar por el mes pero me gustaba el guiño a la periodicidad en papel. Así se puede ver qué contenidos de la edición digital han funcionado mejor en el número actual de publicación impresa.

Módulo suscripción a papel

Imagino que los responsables de producto en papel les gustaría tener un módulo de suscripción en papel, como tienen la mayoría de webs de revistas impresas. También se podría habilitar un formulario con una pasarela de pago para suscribirse directamente ahí. Además, se podría implementar un registro con un perfil con el que en el futuro potenciar la personalización de contenidos.

Personalización

Con ese usuario registrado se podría personalizar la portada. Según sus gustos e intereses se podrían adaptar los contenidos y subir o bajar los módulos de la portada para cada usuario. De esta forma vería en la parte superior todos los temas que le interesan y fomentaría el consumo de más contenidos.

Diseño de interacción

Bocetos

Después de pensar los módulos que tendría que llevar la portada, dibujé unos bocetos a mano de cómo podrían ser algunos de estos módulos.

Wireframes

A partir de los bocetos diseñé en Sketch estos wireframes con la fidelidad necesaria para poder hacer algunas pruebas y validaciones.

Diseño de interface

Prototipo

Una vez diseñado el wireframe de la portada desktop del proyecto, diseñé visualmente la interface de usuario y ya podía empezar a verse cómo sería el resultado final.

También hice varias propuestas para el prototipo de la cabecera sticky

Regalador mobile Gentleman

Objetivo

Como he comentado, me surgió la idea de hacer un regalador de artículos de Gentleman al estudiar los posibles módulos que podría llevar la portada desktop. El reto se centraba en cómo resolver en el móvil un regalador en el que puedas ir customizando mediante filtros sobre la persona a la que quieras regalar, hasta llegar a un artículo que pueda gustarle (ficha de producto, listados, etc). Todo ello bajo un programa de afiliación.

Ejecución regalador mobile

Como este diseño comparte con el anterior todo lo referente a UX Persona, documentación, investigación, etc. realicé los siguientes pasos:

1. Diseño de wireframe a mano.
2. Diseño rápido de wireframe en Sketch.
3. Duplicar wireframe y diseñar la capa visual.
4. Documentar y describir el proceso.

Plataforma

Aunque en principio la idea me pedía hacer una aplicación nativa exclusiva con el producto, lo cierto es que finalmente diseñé pensando en la versión mobile o en la app pero en un apartado dentro de la propia web y app de Gentleman. Decidí esto porque al desconocer la necesidad y la demanda real del producto, es más funcional y económico probarlo dentro de un producto ya en producción y si funciona plantear si sacar un producto independiente.

Pantallas

1. Onboarding

Pantalla de llegada donde se explica el funcionamiento.

2. Preguntas (teclado)

Los filtros los planteé en preguntas cortas y directas. Hay una pregunta en cada pantalla para que el usuario no se agobie al ver tantas preguntas a la vez. En todo momento está viendo el progreso y cuántas preguntas le quedan para terminar.

3. Preguntas (botón)

Es la misma que la anterior sin el teclado. Con un desplegable, en el caso que sea multirespuesta. Con el botón de continuar y el de saltar la pregunta.

4. Resultado

Imagino que en principio la idea es que te recomiende un solo producto. Pero, ¿qué pasa si no te gusta? ¿Te arriesgas a perder la venta? Creo que es mejor ofrecer varios productos, 3 o 4, con un porcentaje de afinidad según las respuestas que has dado. En esta pantalla a parte de la compatibilidad con el producto te informa del nombre, descripción, precio y te da la opción de editar las respuestas si no te convence ninguna opción. El objetivo es que te proponga algo que te guste, aunque tengas que hacerlo otra vez.

5. Producto

Esta es la página de producto en la que aparece la misma info que en la anterior, pero ampliada. Un seleccionador del color del producto y la talla, en el caso de que el producto lo requiera. Tiene un botón de comprar en el que te indica el precio con el que ya irías al enlace externo de la tienda. También hay un botón para ver productos similares a este por si no te termina de convencer pero puedes estar cerca.

6. Productos similares

Esta pantalla muestra productos relacionados con el anterior. Al principio aparece la categoría a la que pertenece el producto que te ha ofrecido, y te ofrece otros productos similares de la misma categoría. También te ofrece más productos de otras categorías. En esta pantalla te vuelve a ofrecer que edites la respuesta si tampoco te gusta nada de lo que ves aquí.

7. Editar respuesta

Es la pantalla para editar las respuestas que has dado antes. Cambié el formato, para que no tengan que pasar otra vez por todas las pantallas y sea más rápido, mediante scroll, localizar la respuesta que quieres cambiar. Cuando terminas los cambios le darías a buscar y volverías al resultado de productos por afinidad.

8. Editar respuesta desplegado

Lo mismo que el anterior pero con todas las preguntas planteadas en el sistema. Faltaría añadir profesiones, más hobbies, etc. Se pueden añadir más preguntas pero creo que no pondría más de 10.

Diseño de interacción

Bocetos

Una vez tuve claro las pantallas que tendría que llevar el regalador, dibujé unos bocetos a mano de cómo podrían ser estos diseños.

Wireframes

A partir de los bocetos, diseñé en Sketch estos wireframes con la fidelidad necesaria para poder hacer algunas pruebas y validaciones.

Diseño de interface

Prototipo

Una vez diseñado el wireframe de la portada desktop del proyecto, diseñé visualmente la interface de usuario y ya podía empezar a verse cómo sería el resultado final.

¿Qué aprendí en este proyecto?

Con este trabajo, aunque me centré en partes muy concretas, pude aprender sobre diseño editorial y cómo transformarlo en su versión digital. Pude trabajar con módulos y contenidos específicos de revistas de estilo a los que no estoy acostumbrado. También con el regalador pude trabajar con productos en una versión muy primitiva de ecommerce, con la que trabajar en el diseño para presentar productos, interactuar con ellos, etc.

Validación y conclusión

En este caso no llegué a testar la solución, como sí hice en los trabajos de VegAlert y Movistar+ por lo que no pude validar si con el diseño propuesto se solucionaban los problemas planteados. Seguramente en el futuro se puedan testar y comprobar si las soluciones propuestas eran válidas. Sí puedo afirmar que, en mi opinión, mejoró el diseño de la portada desktop de Gentleman con más variedad de módulos, dando más herramientas para que se solucionaran los problemas planteados. Además, la solución propuesta para el regalador creo que cumple con su función y podría funcionar bastante bien con un buen catálogo de productos para poder ofrecer al usuario.