Case study
LaneTalk
Product UI for live scoring, stats, admin tools, and cross-platform bowling data.
I designed and built interfaces across LaneTalk's product ecosystem, focusing on live scoring, admin tools, ticketing, and mobile-adjacent workflows. The work combined product UI decisions with frontend implementation for real-time, data-heavy bowling experiences.
- Role
- Lead Frontend Developer & Product UI/UX
- Period
- Recent work, concentrated over the last 3 years
- Ownership
- Frontend ownership and product UI/UX across live scoring, admin tools, ticketing, mobile-adjacent workflows, cross-platform consistency, and production handoff.
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
Problem
Make dense bowling data readable in real time
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.
Users / context
Bowlers, centers, followers, operators, and mobile users
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.
Constraints
Real-time data, domain logic, responsive density, and reliability
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.
Design decisions
Prioritize live readability and separate public from admin needs
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.
Interaction / UI system
Reusable score, leaderboard, admin, and state patterns
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.
Implementation collaboration
Frontend architecture for live product surfaces
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.
Outcome
Faster interfaces, clearer operations, and more consistent delivery
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.
Asset slots
Planned visual evidence
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