Caso de estudio
LaneTalk
UI de producto para scoring en vivo, estadísticas, herramientas admin y datos de bowling multiplataforma.
Diseñé y construí interfaces en el ecosistema LaneTalk, con foco en scoring en vivo, herramientas admin, ticketing y flujos mobile-adjacent. El trabajo combinó decisiones de producto UI con implementación frontend para experiencias de bowling densas y en tiempo real.
- Role
- Lead Frontend Developer & Product UI/UX
- Period
- Recent work, concentrated over the last 3 years
- Ownership
- Ownership frontend y UI/UX de producto en scoring en vivo, herramientas admin, ticketing, flujos mobile-adjacent, consistencia multiplataforma y handoff de producción.
35%
average load-time reduction
38%
faster product delivery
40%
faster legacy-app load times after Angular-to-React migration
88+
Lighthouse scores achieved consistently
Problema
Hacer legibles datos densos de bowling en tiempo real
Bowling data is complex and easy to make unreadable. A single surface can include frame-by-frame scores, players, lanes, centers, rankings, tournaments, league standings, historical stats, and performance breakdowns.
The design and frontend problem was to make this information feel immediate, readable, and consistent across public live-scoring pages, internal/admin tools, ticketing, and mobile-adjacent workflows.
Usuarios / contexto
Bowlers, centros, seguidores, operadores y usuarios móviles
LaneTalk serves casual bowlers, competitive players, league participants, bowling centers, tournament followers, admins, operators, and Android/iOS users interacting with app-adjacent flows.
Public product context includes connected bowling centers, live scoring, league standings, automatic game tracking, manual game entry, stats, and comparison workflows.
- Bowlers track games, progress, stats, and live results.
- Centers need reliable scoring and center-facing tools.
- Followers need live standings, rankings, and tournament context.
- Operators need clear workflows for data, events, ticketing, and product operations.
Restricciones
Datos en tiempo real, lógica de dominio, densidad responsive y fiabilidad
Score changes needed to appear quickly and remain understandable as games updated. Bowling-specific concepts such as frames, pin leaves, rankings, averages, and league logic required domain-specific UI decisions.
The interfaces had to stay coherent across web, admin, and mobile-adjacent surfaces while supporting dense layouts, operational reliability, and performance expectations on an active public product.
Decisiones de diseño
Priorizar legibilidad en vivo y separar necesidades públicas de admin
Current score, player, lane, and game state took priority over secondary metadata. Dense stats stayed available through progressive disclosure instead of competing for the first view.
Public views emphasized clarity and status. Admin views emphasized control, scanability, filters, tables, and error prevention.
- Use reusable score rows, player cards, leaderboard tables, filters, empty states, and state indicators.
- Design from dense desktop and table views down to compact mobile states.
- Handle no games, offline centers, empty leaderboards, loading, partial data, and long player or team names.
Interacción / sistema UI
Patrones reutilizables para scoring, rankings, admin y estados
The system can be shown through live scoring boards, player score rows, frame-by-frame displays, center selectors, leaderboard tables, tournament views, admin dashboards, ticketing flows, and empty states.
The design-system angle is the repeated structure behind the UI: shared typography and spacing for dense data, status colors and icons, table/card hybrid layouts, filters, and loading/empty/active/completed/error states.
Implementación y colaboración
Arquitectura frontend para superficies de producto en vivo
I worked as designer and Lead Frontend Developer with a PM, backend developers, and mobile app developers.
My contribution included frontend architecture and implementation for public and internal LaneTalk interfaces, including a WebSocket-based live-results library, React/Next.js interfaces, responsive UI, performance work, component reuse, handoff improvements, and Angular-to-React migration support.
Resultado
Interfaces más rápidas, operaciones más claras y entrega más consistente
Confirmed outcomes include improved real-time data display and responsiveness for live scoring interfaces, 35% average load-time reduction, Lighthouse scores above 88, 38% faster product delivery, and 40% faster legacy-app loading after Angular-to-React migration.
Qualitatively, the product experience became easier to maintain across surfaces and admin workflows became clearer to operate.
Espacios visuales
Evidencia visual planificada
The page is structured for public or anonymized visuals that show the interface system without exposing private operational data.
- Hero visual: public live scoring screen or polished mockup using non-sensitive data.
- Dense UI proof: leaderboard, live score table, or score card layout.
- Admin proof: blurred admin structure with filters, tables, or workflows.
- Mobile-adjacent proof: app or app-store screenshots showing scoring and stats.
- System proof: score rows, filters, empty states, icons, and status colors.
Stack