B2B SaaS product company · 2018
A component library and self-serve checkout that took 20% off delivery time
Reusable React components documented in Storybook, a restructured front-end workflow, and Stripe checkout that let customers subscribe without anyone picking up the phone.
- SaaS
- Design Systems
- Payments
- React
- Redux
- Storybook
- Stripe
- −20%
- Feature delivery time
- Self-serve
- Checkout
- Library-first
- UI
Challenge
Every new feature meant rebuilding interface pieces that already existed somewhere else in the product, so delivery kept slowing down as the surface area grew. Alongside that, subscribing was a manual process: a prospect ready to pay had to wait for a human, which cost the team operational time and cost the business customers who lost momentum.
Approach
We built a reusable React component library documented in Storybook so engineers could see and reuse what already existed rather than rediscovering it, restructured the front-end workflow around it, and integrated Stripe so customers could subscribe and manage payment themselves.
Outcome
Feature delivery time improved by roughly 20% as the library absorbed more of each new build. Self-serve checkout removed the manual step between intent and payment, cutting operational overhead and improving retention on renewals.
Front-end velocity rarely collapses in one dramatic moment. It erodes: the second month is slightly slower than the first, the sixth is noticeably slower than the third, and by the time anyone names the problem the team has built four versions of the same dropdown.
Storybook as the fix for rediscovery
The component library mattered less as code than as a catalogue. Documenting it in Storybook meant an engineer starting a feature could see every existing component, in every state, in about thirty seconds, which is the only reliable way to make reuse cheaper than rebuilding. Restructuring the front-end workflow around that library is where the roughly 20% delivery improvement came from; it compounds, because each feature that goes in library-first makes the next one faster still.
Removing the human from the payment path
The other constraint was commercial rather than technical. Subscribing required somebody on the team to process it, which meant a prospect’s enthusiasm had to survive a wait. Stripe integration turned that into a self-serve flow: customers subscribe, update cards, and handle renewals without a conversation. That took recurring operational work off the team and, more importantly, stopped losing the customers whose momentum ran out while they waited.