Agendar una llamada

Agendar una llamada

Cargando la agenda
← Todos los proyectos

Goalcast

Medios · Diseño UX/UI · Branding · Design System
Goalcast

Resumen

Goalcast es una de las principales plataformas de medios inspiracionales y publica videos cortos, frases y artículos largos sobre crecimiento personal, resiliencia y motivación. Su contenido llega a millones de lectores y espectadores cada mes, en la web, en YouTube y en redes sociales.

El proyecto fue el rediseño editorial completo del sitio de Goalcast, entregado cuando yo estaba en el equipo de diseño de RebelMouse. El objetivo era modernizar la marca, hacer más rápido el descubrimiento de contenido y dar a cada formato editorial (artículos, frases y videos) su propio layout, pensado para generar interacción y ser compartida.

Rol
Diseño UX/UI y actualización de la marca
Alcance
Rediseño del sitio editorial para artículos, frases y videos, escritorio y móvil
Herramientas
Figma
Industria
Medios

Mi Rol

Fui el diseñador UX/UI del proyecto de Goalcast en RebelMouse. Me encargué del lenguaje visual, del nuevo sistema de marca, de los layouts responsivos de cada formato editorial y del modelo de interacción de la navegación, la búsqueda y el descubrimiento de contenido.

Trabajé directamente con el equipo de ingeniería de RebelMouse para que cada pantalla saliera limpia, rápida y lista para el CMS, y con el equipo editorial de Goalcast para ajustar los layouts a la forma en que realmente publican.

Resultados

  • En línea. El nuevo diseño reemplazó al sitio anterior en escritorio y en móvil.
  • Menos desplazamiento. La home móvil es un 41% más corta.
  • Un formulario de newsletter en la home. La home anterior no tenía ninguno.

Decisiones de diseño

Arrastra la barra en cada cuadro para comparar la home antes del rediseño, a la izquierda, con la nueva, a la derecha.

La primera pantalla abre con una nota.

La home anterior abría con una foto pequeña entre dos columnas de titulares, bajo un menú fino con el logo en la esquina. La nueva da a la nota principal una foto grande con su categoría, autor y fecha, pone el logo en el centro del menú y añade las pestañas Latest y Videos a su lado. Quien lee ve primero la nota del día y llega a los videos sin salir de la parte superior.

Escritorio
Top of the Goalcast home, desktop, after
Top of the Goalcast home, desktop, before
Móvil
Top of the Goalcast home, phone, after
Top of the Goalcast home, phone, before

Cada sección sigue un mismo patrón.

Cada sección anterior tenía su propio estilo de título y su propia cuadrícula. En la home nueva, cada sección tiene el mismo título con la marca amarilla, las mismas tarjetas con categoría, autor y fecha, y un botón para ver más. Quien lee aprende el patrón una vez, y la redacción llena cualquier sección de la misma forma.

Escritorio
A story section of the Goalcast home, desktop, after
A story section of the Goalcast home, desktop, before
Móvil
A story section of the Goalcast home, phone, after
A story section of the Goalcast home, phone, before

La newsletter ganó un lugar en la home.

La home anterior no tenía formulario de registro. La nueva tiene una caja amarilla de newsletter junto a la nota destacada. Quien disfrutó una nota puede suscribirse sin buscar el formulario.

Escritorio
Featured story and newsletter box on the Goalcast home, desktop, new
Móvil
Featured story and newsletter box on the Goalcast home, phone, new

Fotos y títulos van juntos.

La sección Inspiring Celebrities era un tablero, con cada título en una caja junto a su foto, alternando los lados. Ahora es una fila de tarjetas con el título debajo de cada foto. La vista sigue una sola línea, y la sección ocupa menos de la mitad de la altura.

Escritorio
Inspiring Celebrities section of the Goalcast home, desktop, after
Inspiring Celebrities section of the Goalcast home, desktop, before

Contribuciones Clave

  • Renovación de marca. Modernicé la identidad de Goalcast con una paleta de negro intenso, amarillo sol y verde azulado profundo. El resultado transmite optimismo y confianza sin perder la credibilidad editorial que la marca había construido.
  • Layouts editoriales. Diseñé layouts propios para los tres formatos que mueven a Goalcast: artículos, artículos de frases y artículos en video. Cada uno está pensado para la forma en que ese formato se lee y se comparte.
  • Home y páginas de sección. Rehice la home y las páginas de sección con una cuadrícula modular de contenido, para que los editores destaquen historias, publicaciones recientes y videos exitosos sin tocar código.
  • Experiencia de descubrimiento. Rediseñé la página de búsqueda, el menú y las páginas de autor, para que el lector cambie de tema, formato y autor en uno o dos clics.
  • Centro de videos. Creé una sección de videos y un layout de artículo en video que tratan el video como contenido principal, y no como un video insertado en la barra lateral. Esto es clave para una marca que crece con videos cortos.
  • Páginas de apoyo. Incluí los detalles que la mayoría de los rediseños olvida: una página 404 amigable y una página de prensa, ambas coherentes con el resto del sistema.
  • Responsivo desde el inicio. Cada layout se diseñó primero para móvil, junto con su versión de escritorio. Por el tráfico de Goalcast, es en el móvil donde la mayoría de los lectores conoce la marca.
  • Entrega lista para el CMS. Entregué el diseño en una estructura que la plataforma de RebelMouse podía implementar sin ajustes, y la publicación siguió siendo rápida para el equipo editorial de Goalcast.
Créditos