Caso de estudio
LaneTalk
Caso de producto completo para admin de bowling, scoring móvil, datos en vivo, ticketing y sistemas UI.
LaneTalk es un producto de bowling para scoring, ligas, torneos, ticketing y operaciones de centros. Trabajo en sus interfaces frontend desde agosto de 2019, con responsabilidad de Lead frontend developer desde 2023 en live scoring, herramientas admin, flujos mobile-adjacent y un sistema UI compartido usado en sitios admin, websites y flujos de apps iOS y Android. El trabajo hizo que datos de bowling que cambian rápido fueran más fáciles de leer, operar y extender.
- Rol
- Frontend developer, Lead frontend developer desde 2023
- Periodo
- Agosto 2019-Presente
- Alcance
- Implementé interfaces de producto en herramientas admin, flujos mobile-adjacent, live scoring, ticketing, sistemas UI, motion, componentes compartidos y entrega frontend de producción, con responsabilidad de Lead frontend developer desde 2023.
Superficies conectadas
LaneTalk no era una sola pantalla. Eran varias superficies de producto para trabajos distintos.
El diagrama se mantiene a nivel de producto: scoring público, herramientas para displays en centros, leaderboards, workflows admin y tooling cliente compartido para scoring en vivo.
Usuarios
Jugadores y espectadores
Siguen juegos, scores, standings y resultados.
Staff de centros de bowling
Opera displays, lanes, ligas y flujos del centro.
Ops internas y admins
Gestionan settings, torneos y vistas operativas.
Superficies de producto
Live scoring web público
Actualizaciones de score legibles para quienes siguen juegos activos.
Customización de displays en centros
Herramientas de presentación de score para pantallas del venue.
Leaderboard de torneos y matches
Contexto competitivo para standings, matches y resultados.
Superficie admin y operaciones
Workflows de ligas, centros, torneos y operación.
Capa compartida
Tooling cliente WebSocket compartido
Integración cliente de scoring en vivo usada por varias superficies web.
Problema
Hacer que los datos de bowling sean más usables entre apps, live scoring y herramientas admin
El software de bowling carga mucha complejidad de dominio: frames, pin state, scorecards, equipos, lanes, temporadas, playoffs, standings, torneos, ticketing y operaciones de centros.
LaneTalk necesitaba que esa información se mantuviera legible en contextos muy distintos. Los bowlers necesitan feedback móvil rápido. El staff de centros necesita controles admin fiables. Los espectadores de live scoring necesitan información en vivo clara. Los flujos de ticketing necesitan estados transaccionales claros.
Usuarios / contexto
Bowlers, staff de centros, organizadores, espectadores live y compradores de tickets
LaneTalk sirve a bowlers casuales, jugadores competitivos, participantes de ligas, centros de bowling, seguidores de torneos, admins, operadores, compradores de tickets y usuarios Android/iOS que interactúan con flujos conectados a la app.
El contexto de producto incluye centros conectados, scorecards móviles, selección y claim de juegos, setup de ligas, imports de equipos, asignación de lanes, formatos de playoff, live scoring público, standings, ticketing, checkout, estadísticas y flujos de comparación.
- Los bowlers hacen tracking de juegos, progreso, scores frame-level, filtros y juegos claimed.
- El staff de centros gestiona ligas, equipos, lanes, temporadas, imports y estructura de calendario.
- Los organizadores configuran formatos de torneo, playoffs, standings y contextos de ticketing.
- Los espectadores públicos y de live scoring necesitan información legible sin detalle admin.
Restricciones
Datos en tiempo real, lógica de dominio, densidad responsive y fiabilidad
Los cambios de score necesitaban aparecer rápido y seguir siendo entendibles mientras los juegos se actualizaban. Conceptos específicos de bowling como frames, pin state, rankings, promedios, equipos, lanes, temporadas, playoffs y lógica de liga requerían decisiones UI de dominio.
Las interfaces tenían que mantenerse coherentes entre web, admin, mobile-adjacent, live scoring y ticketing, mientras soportaban formularios admin con mucho estado, unsaved changes, imports, reordering, previews, layouts densos, componentes compartidos y fiabilidad de producción.
Decisiones de diseño
Separar cada superficie manteniendo coherente el sistema de producto
Los datos de score necesitaban jerarquía fuerte, color, agrupación y patrones repetidos para que el detalle frame-by-frame siguiera siendo escaneable. Las vistas admin necesitaban estado visible, acciones, previews y feedback para elecciones como brackets de playoff, asignación de lanes, imports y unsaved changes.
Las pantallas móviles se mantuvieron compactas y de alto contraste para el contexto de bowling y la lectura de scores. Las vistas públicas enfatizaban claridad y estado. Las pantallas de ticketing enfatizaban selección, confianza de checkout y estados de componentes claros.
- Usar preview panels para decisiones admin complejas como brackets de playoff y asignación de lanes.
- Hacer visibles drag/drop, imported states, claimed games, unsaved changes, reset/apply actions y loading states.
- Diseñar desde workflows desktop densos y tablas hacia estados móviles compactos sin hacer que LaneTalk parezca solo una app móvil.
Interacción / sistema UI
Patrones compartidos para scoring, admin, ticketing y estados
Los patrones compartidos aparecen en tableros de scoring en vivo, filas de score por jugador, frame grids, selectores de centro, tablas de ranking, vistas de torneo, dashboards admin, flujos de ticketing, pantallas de checkout y estados vacíos.
El trabajo de componentes cubrió botones, inputs, búsqueda, package cards, tournament cards, side menus, score chips, filter sheets, bottom navigation, híbridos table/card y estados visibles para loading, disabled, hover, focus, active, completed, error, claimed y empty.
Implementación y colaboración
Arquitectura frontend para interfaces de producto en vivo
Trabajé como frontend developer desde agosto de 2019 y como Lead frontend developer desde 2023, junto a PM, backend developers y mobile app developers, implementando interfaces de producción mientras colaboraba en comportamiento de producto y delivery.
Mi contribución incluyó interfaces públicas e internas de LaneTalk, una librería de resultados en vivo basada en WebSockets para LiveScoring, interfaces frontend con TypeScript, UI responsive, optimización de performance, mejoras de handoff, un sistema UI cross-surface y soporte a la migración de Angular a React cuando aplicaba.
Resultado
Interfaces más rápidas, operaciones más claras y entrega más consistente
Los resultados incluyeron mejor display y responsiveness de datos en tiempo real para interfaces de scoring en vivo, workflows operativos más claros, más consistencia entre superficies y trabajo de performance en live scoring e interfaces migradas.
El resultado fue un conjunto más claro de flujos de bowling en admin, mobile-adjacent, live scoring público y ticketing.
Aprendizaje / mejora
Lo más difícil fue mantener confianza entre superficies muy distintas
LaneTalk reforzó que la UI de producto en tiempo real no trata solo de hacer visible la data. La interfaz tiene que explicar timing, estado, ownership y confianza entre pantallas públicas, workflows admin y vistas compactas conectadas a la app.
Si extendiera más el trabajo, documentaría antes los patrones de estado entre superficies: empty, loading, offline, claimed, changed, imported, previewed y unresolved. Eso haría más fácil mantener alineado el trabajo futuro de admin, live scoring y mobile-adjacent.