Sistema de diseño y guía de implementación para Doradobet
Reto: Crear un sistema de diseño y rediseñar la interfaz completa de la plataforma Doradobet, adaptándola a un enfoque mobile first y estableciendo un lenguaje común entre diseño y desarrollo.
Objetivo (O): Rediseñar la experiencia digital de Doradobet con un enfoque mobile first y un sistema de diseño escalable que unifique criterios entre equipos.
Resultados Clave (KR): Incrementar en 25% la tasa de conversión en apuestas desde dispositivos móviles.
Reducir en 35% los tiempos de desarrollo de nuevas funcionalidades gracias al sistema de diseño.
Lograr que el 90% del equipo utilice el sistema de diseño.
Programas:
Doradobet.co es una plataforma de apuestas deportivas online, que contaba con una web funcional y una identidad visual básica definida, pero sin un sistema de diseño estructurado ni componentes reutilizables en Figma
A partir de esa base, desarrollé un sistema de diseño completo, con una estética vibrante e interactiva que reflejara la emoción y el dinamismo del entretenimiento digital.
Cimientos del Sistema
A partir de la paleta de colores y tipografía ya existentes —usadas sin reglas claras— estructuré un sistema con roles definidos: colores primarios para elementos clave, acentos para resaltar información, y colores consistentes para botones e iconos. Además, desarrollé componentes reutilizables para lograr coherencia visual y optimizar la experiencia de usuario.
Atomic Design
Con esta base visual definida, implementé la metodología de Atomic Design. Empecé por los elementos más pequeños (botones, Inputs, iconografía, grillas, espaciado, divisores y capas).
Componentes de navegación
Avancé hacia componentes más complejos (cards, sidebar, header, tablas, banners), diseñando siempre con enfoque mobile first, ya que el 94% de los usuarios usan la plataforma desde el celular. Esto aseguró una estructura clara, escalable y fácil de implementar con el equipo de desarrollo.
Mobile First
Opté por un enfoque Mobile First, priorizando la versión móvil desde el inicio, dado que la mayoría de usuarios acceden a la plataforma a través de sus dispositivos celulares
Implementación del sistema de diseño
Tras consolidar la librería de componentes, iniciamos la implementación reestructurando por completo la web de Doradobet.
Junto a los equipos de UX, contenido, marketing y desarrollo, garantizamos coherencia visual y funcional, acelerando los tiempos de trabajo y asegurando una base sólida y escalable para el futuro.