Rebuilding Fira Onlive's Video Player.
A six-month rebuild that took live shopping conversion from 1.6% to 12%. Web components, mobile-first CTAs, and WebSocket-driven product switching — quietly engineered.
A live commerce platform losing money on its own player.
Fira Onlive is a live commerce platform based in Santiago, Chile, that powers live video shopping for retailers across Latin America. Brands use Fira's player to broadcast live shopping events embedded directly on their own e-commerce sites.
The player — the heart of the product — was losing the company money. Conversion from viewer to buyer sat at 1.6%, well below industry benchmarks of 5–8%. Brands were starting to question their renewal.
A six-month rebuild.
Research
Watch-alongs, Hotjar, stakeholder interviews. Three killer issues identified.
Hypothesis
Conversion as infrastructure problem. Bet on web components.
Build
Player engine, mobile CTA layout, WebSocket switching, screenshot diff QA.
Rollout
Incremental migration across 50+ sites. Net downtime: zero minutes.
The walls we couldn't move.
Hard limits the rebuild had to live within. Each one shaped an architectural decision — and several conflicted with each other.
Hard deadline before the next round of contract renewals. No room to slip.
Myself plus one backend engineer. No designer hand-off. No QA team.
The new player had to embed on every existing host without migration work.
iPhone SE was the lowest common denominator, and it had to perform.
Most conversion problems aren't conversion problems.
I started with watch-along sessions. I sat with the operations team while they monitored real live events on different client sites, then went through three months of Hotjar recordings.
Three killer issues surfaced. The player took 4–6 seconds to load on mobile. The buy CTA was below the fold on small screens. And the player froze for 1–2 seconds every time the host switched products — exactly the moments where viewer intent peaks.
They're infrastructure wearing a UX costume.— working principle from this project
An embeddable web component that worked everywhere.
We wrote the player as an embeddable web component — framework-agnostic, framework-conflict free. Then we rebuilt the mobile CTA layout, swapped HTTP refresh for WebSocket events, and shipped behind a screenshot-diff QA tool.
WebSocket-driven product switching.
Automated screenshot diff QA.
The numbers — six months later.
Conversion from viewer to buyer rose from 1.6% to 12.0% across all client sites. Mobile load time dropped from 4–6 seconds to under 1 second. Client churn during rollout was zero.
"The player became Fira's flagship feature in their sales pitch. The Storybook design system that came out of the project still powers their product line three years later."
— internal review, Q4 2024
What I learned, and what I'd do differently.
What worked
Web components for cross-site embed.
The most important call I made. Turned a six-month migration nightmare into a script tag. Same bet today.
What I'd change
Build the QA tool day one.
I underestimated the burden of testing across 50 environments. We built screenshot diff reactively. Next time it's the first thing I write.
The lesson
Fix the foundations first.
Most conversion problems aren't conversion problems. They're infrastructure or architecture problems wearing a UX costume.
Still shipping, three years later.
The player and the design system that came with it are still in production across Fira's portfolio. The Storybook library now powers three other products in the family.