Edvard Osnaya← Volver al portafolio
Trabajo Seleccionado · Cliente Independiente

Una app de apuestas completa, rediseñada en cuatro semanas

WinItAll es una app de survivor pools exclusiva de Estados Unidos. El cliente necesitaba todo el producto móvil (iOS y Android) completamente rediseñado y listo para desarrollo en cuatro semanas. La fecha era fija, así que la única variable era cómo ejecutar el trabajo.

Apuestas deportivas · Survivor pools iOS + Android Solo mercado de EE. UU. Proyecto independiente
RolProduct designer · end to end
Tiempo4 semanas
AlcanceRediseño móvil completo + UI kit
EntregaFlujo por flujo, en paralelo con desarrollo
4
Semanas para estar listo para desarrollo
2
Plataformas rediseñadas: iOS y Android
3
Líderes del mercado analizados antes de diseñar
1
UI kit construido desde cero, basado en tokens
El Encargo

Cuatro semanas para rediseñar todo

Un rediseño móvil completo en un mes es el tipo de plazo que suele producir uno de dos resultados: un set de pantallas hermoso que nadie puede construir, o un maquillaje apresurado con los problemas viejos intactos.

Evitar ambos significó adelantar el trabajo apresurado. Dos rondas cortas de investigación (benchmark de competidores y una evaluación heurística de la app existente) tomaron días, no semanas, y entre las dos resolvieron la mayoría de las decisiones que se habrían discutido después. El resto fue ejecución.

01
Benchmark

Aprender de las apps con las que ya te comparan

Al ser un producto exclusivo de EE. UU., su competencia real es un conjunto pequeño y muy conocido de apps. Mapeé pantalla por pantalla a los tres líderes del mercado (home, board, wallet, perfil) y etiqueté los patrones que todos comparten.

Benchmark analysis board comparing three leading US sports betting apps, with annotated patterns

Convenciones a adoptar

Saldo y agregar fondos arriba, perfil y notificaciones en el header, dark mode por default, acciones primarias en verde.

Estructura a tomar prestada

Bloques de información en vez de tablas densas, banners promocionales en la parte superior del home, y el home como ancla de la barra de pestañas.

Decisiones eliminadas

Cada patrón que la categoría ya resolvió se volvió una convención a seguir, no una discusión que tener con tres semanas encima.

02
Evaluación Heurística

Una auditoría rápida y honesta de la app existente

Antes de comenzar a rediseñar, realicé una evaluación heurística breve sobre la app actual y anoté los problemas directamente sobre las pantallas, ordenados en cuatro categorías para poder agrupar las soluciones en vez de atenderlas una por una.

Heuristic evaluation board with annotations over the existing app screens, grouped in four categories
Accesibilidad Jerarquía Navegación Consistencia y Estándares

Accesibilidad

Contraste de color, legibilidad, tamaño mínimo de fuente y espaciado, y áreas mínimas de interacción: los hallazgos más repetidos en todas las pantallas.

Jerarquía y carga

Énfasis en competencia dentro de pantallas clave, y una densidad de información que dificultaba encontrar la acción principal.

Consistencia

Botones inconsistentes, uso no semántico del color, y navegación que se alejaba de los estándares de plataforma.

03
Wireframes y Aprobación

Acordar la estructura antes de los pixeles

La estructura se resolvió en baja fidelidad y se aprobó con el cliente: categorías de pools, filtros y rangos de precio, densidad del listado, y a dónde lleva realmente un "ver todo". Cambiar un wireframe cuesta minutos; cambiar una pantalla ya construida cuesta días que no tienes en un plazo de cuatro semanas.

Wireframes of the pool listing and filtered category screens

Wireframes del listado de pools y sus categorías filtradas, aprobados antes de empezar cualquier diseño visual.

04
UI Kit

Un kit basado en tokens, para que la app pudiera escalar sin constante mantenimiento

En vez de dar estilo pantalla por pantalla, primero construí el UI kit: una rampa completa de color con tokens nombrados, colores de acción y semánticos, y una escala tipográfica en Montserrat. Cada pantalla después de eso fue ensamblaje, y desarrollo recibió valores con nombre, no códigos hexadecimales por componente.

Neutral
obsidian-code-90
Primary
lime-green-50
Secondary
blazing-scarlet-50
Info
#77D4D3
Success
#93E94C
Warning
#E37E31
Error
#E3315A
UI kit showing core colour tokens, action colours, semantic colours and the Montserrat type scale
La App Rediseñada

Más de 110 pantallas rediseñadas, 8 pantallas centrales aquí

El rediseño cubrió la app completa, más de 110 pantallas entre iOS y Android. En vez de entregar todo de una sola vez, fui entregando flujos terminados conforme quedaban listos, para que desarrollo pudiera arrancar en la semana dos en lugar de la cinco. Las ocho pantallas de abajo son el flujo central: home, login, detalles de pool, mis pools, wallet, scores, equipos favoritos y notificaciones.

Pantalla de inicio de WinItAll para usuarios sin registrar
01
Home · sin registro
Registro e inicio de sesión al frente, cuenta regresiva para la próxima selección, pools disponibles.
Pantalla de inicio de sesión de WinItAll
02
Login
Dos campos, una acción principal, salida hacia el registro.
Pantalla de detalles del pool en WinItAll
03
Detalles del pool
Entradas, selecciones semanales y estado de supervivencia, con la inscripción siempre accesible.
Pantalla de mis pools de WinItAll, pestaña de próximos
04
Mis pools · próximos
Cuenta regresiva para la próxima selección, pools separados por estado, acciones a nivel de entrada.
Pantalla de wallet de WinItAll
05
Wallet
Saldo, depósito y retiro, e historial de transacciones agrupado.
Pantalla de scores de WinItAll
06
Scores
Partidos agrupados por fecha, estado en vivo, spreads y resultados de un vistazo.
Pantalla de equipos favoritos de WinItAll
07
Equipos favoritos
Personalización con un límite claro y una sola acción de confirmación.
Pantalla de notificaciones de WinItAll
08
Notificaciones
Mensajes centrados en el resultado (ganado, sobrevivió, eliminado, cancelado), cada uno con su propio ícono.
Resultado

Qué hizo posibles las cuatro semanas

Investigación al ritmo del reloj
El benchmark y una evaluación heurística tomaron días, no semanas, y entre los dos resolvieron la mayoría de las decisiones de diseño antes de diseñar la primera pantalla.
Una sola fase de aprobación, temprana
La estructura se aprobó en wireframes, lo que mantuvo la fase visual libre de discusiones de layout.
Tokens antes que pantallas
Construir el UI kit primero convirtió el diseño de pantallas en fase de diseño y le dio a desarrollo variables en vez de medidas.
Entrega en paralelo
Entregar flujos completos conforme estaban listos permitió que desarrollo arrancara semanas antes de lo que habría permitido una sola entrega grande.
Reflexión

Lo que me llevo

Con planeación y un proceso bien estructurado, hasta un rediseño de cuatro semanas es posible. Los pasos que parecen los más fáciles de saltarse, como la investigación, son justo los que marcan la diferencia entre un simple cambio de imagen y un gran producto.

Caso de estudio 01

De la solución alterna al flujo de trabajo

→
Caso de estudio 02

Recuperar la confianza en un score que nadie creía

→
ENES