DISEÑO WEB Y DESARROLLO FRONT-END

World Padel Tour

Dirección creativa, diseño y desarrollo Front-End para la página web de World Padel Tour. Para este proyecto hemos colaborado con nuestros amigos de Weprot, encargados de realizar la parte de Back-End. World Padel Tour es el circuito mundial de padel profesional, que ofrece tanto a jugadores como a expectadores una experiencia emocionante, entretenida y competitiva. Nos encargaron el rediseño completo de su web, donde uno de los objetivos primordiales era conseguir que el equipo de periodistas pudieran configurar la página de portada a su gusto mediante diferentes módulos y con diseños variados y que así pudieran presentar sus noticias, videos y fotos con un aire fresco cada día y que permita destacar contenidos relevantes con total flexibilidad.

EL OBJETIVO

Crear una web de noticias, informativa e intuitiva, con un sistema de navegación y flujos de contenido que guiaran fácilmente al usuario, tanto  espectadores como jugadores.

Necesidades de WPT

CREAR

una portada armoniosa mediante un sistema modular y ordenado.

Nuestra estrategia

CONFIGURAR

Un sistema a modo puzzle donde todos los módulos forman parte de un sistema integral pero que albergan contenidos diferentes en función de los intereses de la marca.

Necesidades de WPT

ACERCAR

el mejor padel del mundo a los expectadores.

Nuestra estrategia

HUMANIZAR

cada sección de la web creando una experienza positiva e intuitiva

EL RESULTADO

En las siguientes imágenes se puede apreciar el resultado mediante la comparativa del diseño web y UX antiguo con el nuevo diseño web y mejorada experiencia de usuario.

ANTES Y DESPUÉS 

diseño web deportes nueva web world padel tour

ANTES Y DESPUÉS 

nueva web jugadores

ANTES Y DESPUÉS 

NUEVO DISEÑO WEB JUGADOR

ANTES Y DESPUÉS 

diseño web deportes cuadros
EL PROCESO

Nuestro enfoque

Para el diseño de la portada comenzamos con un análisis entre las imágenes, los espacios y los diferentes tipos de pantallas. Creamos y testeamos unos prototipos en su forma más básica para comprobar como combinaban entre sí y como se adaptaban a los distintos contenidos.

pagina web responsive
pagina web modular

Sistema de jerarquías

Creamos un sistema de “card sorting” donde cada “ficha” contiene una única noticia que contempla los diferentes detalles de contenidos que necesita World Padel Tour, respetando la integridad de los módulos. Mediante estas fichas y la correcta arquitectura de la información, ayuda al usuario a crear modelos mentales y tener claridad, sin sobrecargar su experiencia e interacción con la web.

Creación de guía de estilos web

Seguimos las guías generales de la marca y cuidadosamente adaptamos sus elementos corporativos al entorno web. Creamos gráficos adicionales utilizando sus colores corporativos con un aire nuevo.

Tipografía

Fira Sans Bold pertenece a la clase de tipografía Sans Serif y se reconoce como una tipografía limpia, sólida y moderna que aporta confianza con un toque de informalidad y que genera interés.

tipografia web

Colores

colores web wpt

Tipografía secundaria

Pertenece al tipo de fuente humanista y su forma ligeramente condensada la hace una candidata perfecta para formatos digitales.

fuentes web secundaria
colores padel

Modularidad extrema para la página de noticias

El sistema que conseguimos finalmente fue el ideal para el equipo de redacción, permitiendo más de 40 diferentes configuraciones en su página de portada y donde todos sus módulos encajan como si de un puzzle se tratase.

diseño pagina de noticias
modulos pagina noticias
diseño web deportes
diseño modulos noticias

UI & Elementos

Cada módulo está diseñado para cumplir con un propósito específico atendiendo a las necesidades de World Padel Tour y especialmente para la cantidad mínima y máxima de caracteres en títulos, entradillas, tags y patrocinio del propio módulo.

Módulos con vídeo y vídeo en directo

Los vídeos se puede reproducir directamente desde la propia página/módulo para una mejor experiencia de usuario.

diseño web modular

Módulos especiales

Diseñamos módulos para redes sociales en los que el usuario puede interactuar y sentirse partícipe. Módulos anunciando los próximos torneos y el ranking de jugadores actualizado en tiempo real, galería de fotos y varios módulos de suscripción que encajan de diferentes maneras con el resto de contenidos.

modulos newsletetr
web responsive noticias

Módulos y menús fluidos

Todos los módulos y el menú se adaptan a las diferentes pantallas, consiguiendo de este modo consistencia y fluidez.

Páginas dinámicas

Desarrollamos un sistema de filtros y otras opciones con el que mejoramos la navegación a través de las páginas y simplificamos las acciones que el usuario final tiene que hacer, mejorando así la experiencia de usuario.

páginas dinámicas jugadores

Páginas con numerosas subsecciones y CTA´s

Creamos un megamenú que permanece visible dentro las secciones pertinentes y que facilita al usuario encontrar la información en el momento que lo necesite. Diseñamos un sistema de filtros intuitivo y un sistema de acordeón horizontal, dinámico e interactivo para contenidos con multitud de secciones/fases.

página web deportes
WPT Rondas de Torneos

Nuevas formas de visualizar la información

Los cuadros de los partidos con las respectivas fases de cada Torneo supuso un reto. El objetivo era conseguir mejorar sustancialmente la experiencia de usuario y evitar utilizar scrolls innecesarios. La solución creativa fue mantener un máximo de 3 fases abiertas y restringir la altura del cuadro en base a los partidos mostrados en las fases.

Una divertida página 404

Una página que sirve para aliviar frustraciones del usuario.

página 404
Codigo Sass para WPT Codigo PUGJS para WPT

El código, la parte invisible

El desarrollo Front-end se ha basado en la modularidad, escalabilidad y eficiencia.

Para conseguir los objetivos del proyecto a nivel estilos se desarrolló el código específicamente para su diseño único y modular, contando solo con pequeñas librerías de SASS. Se han utilizado las técnicas de denominación de BEM, con el añadido de Harry Roberts y su ITCSS (arquitectura CSS del triángulo invertido). Para la estructuración del código también se han seguido las recomendaciones del ITCSS.

PugJS + BEMTO  ha sido clave para abstraer y que crear código HTML sea interesante de nuevo 🙂

Sobrepasando el millón de visitas mensuales, la eficiencia en la selección de archivos y datos renderizados ha sido clave para el éxito de la web.

Actualmente la carga de la página principal se hace en menos de 1 segundo y hemos conseguido que la página se mantenga en los ~2MB. Cada uno de los módulos que conforman la home contienen una imagen adaptada a sus propias dimensiones. De igual forma, los módulos con video solo cargan una imagen clave hasta que el usuario hace click para visualizarlo.

En otras secciones de la web también hemos aplicado la misma lógica para elementos no visibles, usando lazy loading o carga de datos solo cuando el usuario lo necesita.

Resultados

Estamos orgullosos de haber conseguido grandes resultados y de continuar trabajando con World Padel Tour como sus “Design Partners”

pagina web world padel tour

Lo que opina World Padel Tour

He trabajado muy a gusto con Brandgestic. Llevamos a cabo el rediseño de la web de World Padel Tour y el tándem Silvia – Uli no sólo entendió las necesidades del proyecto muy rápidamente, sino que también fueron capaces de proponer soluciones creativas a problemas complejos.

En tan solo 4 meses y con procesos bastantes ágiles – que permitieron añadir requisitos no previstos inicialmente -, lanzamos un rediseño completo de World Padel Tour.

Luís Pinheiro | Digital Project Manager 

ver página web en vivo
diseño web world padel tour