Product Genome Studio

A hands-on simulator for product judgment, where users can pick customer journey patterns of the companies that nailed them, see the tradeoffs/conflicts, and synthesize the best of all worlds.

Comment

Inspiration

Most products are not invented, but recombined. Airbnb gave us inspiration-led discovery. Booking taught us urgency. Amazon got us used to one-click checkout. The hard part is not really finding good patterns, instead it is knowing which one wins at each step of a journey, and whether the ones you pick actually fit together. Most teams answer that by collecting screenshots and arguing in a meeting. I wanted to turn that argument into something you can actually play with.

What it does

Product Genome Studio is a hands-on product design simulator. You pick an industry, walk its user journey one stage at a time, and choose between real patterns from the companies that defined them. Every choice does three things: it shows the tradeoff in plain language, renders a live phone preview of the screen you are building, and updates a running "genome" of the product taking shape, scored for consistency and goal fit.

It also catches what you would miss. As you choose, it watches for patterns that fight each other, like an emotional checkout sitting inside an otherwise transactional journey, and flags the friction before you ship it. When you set a goal, like maximize conversion or build an emotional brand, it marks the patterns that serve that goal and shows how far your choices drift. Once the journey is complete, it synthesizes everything you chose into a single, named product concept and plays it back stage by stage.

It ships with 12 industries, 240 patterns across 60 funnel stages, and three design goals. You can add industries of your own.

How I built it

I wrote the full product as a written specification, defined the pattern library, the conflict logic, and the scoring model as structured data, and then built the whole thing end to end on Lovable as a React app with no hand-written code. Everything runs client-side, so the previews, the genome scoring, and the conflict detection all happen instantly in the browser. Novus is installed for product analytics. Throughout, I used Claude in Cowork mode as a thinking partner, to brainstorm the concept, pressure-test the design, structure the pattern data, debug the build, and shape the demo.

Challenges I ran into

The biggest challenge was not technical, it was scope. My first version tried to be too many things across too many industries, and it broke in ways that were hard to chase down. The lesson that saved the project: a sharp, small idea executed cleanly beats a big idea held together with tape. I cut hard, made the data the single source of truth so the previews could never drift out of sync, and rebuilt around one tight, reliable loop. Working within tool and credit limits forced that discipline, and the product is better for it.

What I learned

AI made producing options nearly free. The scarce, compounding skill now is judgment, knowing what is worth building and what coheres. Building this changed how I think about my own work: design is a series of decisions with consequences, and you get better by making those decisions visible, not by reading about best practices.

What's next for Product Genome Studio

Live AI generation so you can spin up any industry on demand, a "critique my product" mode that scores your own real flows against the patterns, persistence so your genomes save across sessions, and community-contributed industries so the library grows with the people using it.

Built With

Share this project:

Updates