Opptics
An in-product learning platform for SaaS sales teams. Experts capture a product workflow and the reasoning behind it; teammates practice in the real product.
opptics.team- Role
- Creator · Product Designer · Engineer
- Timeline
- 2026 – Present
- Built with
- Next.js · WXT · Convex · Better Auth · Zod
Product knowledge was everywhere except the product.
The scarce resource is the judgment experts use to decide what to show, why it matters, and what to leave out.
Sales teams had documentation for facts, recordings for examples, learning systems for courses, and chat for questions. But none of those tools connected expert judgment to the interface where a rep had to use it.
That gap became especially visible after a release. Product managers could explain what changed, while experienced sellers knew how to position it. Newer teammates still had to assemble those fragments on their own—and often responded by showing too much.
Knowing discovery and knowing the product are not the same as knowing how to construct the right demo.
Insight synthesized from product feedbackFrom click guidance to practiced judgment.
The earliest concept explored a live demo copilot and rehearsal experience. Research with sales leaders sharpened the need: the real problem was not remembering where to click, but connecting a customer signal to the right product moment and explaining why it belongs.
I reframed Opptics around an active learning loop. Experts capture a path and its reasoning; learners follow it in the real product, explain the value in their own words, complete a knowledge check, and surface questions back to the team.
- Observe
- Practice
- Explain
- Check
- Improve
Four choices shaped the product.
The concept changed as the problem became clearer. Each decision connects a research signal to a product choice and names the cost of making it.
- 01
Where should learning happen?
- Signal
- Documentation, recordings, and courses separated product knowledge from the interface where a seller needed to apply it.
- Decision
- Put the Guide beside the live product so learning and doing happen in the same context.
- Tradeoff
- An in-product experience is harder to build and maintain than a standalone lesson, but removes the transfer gap between instruction and action.
- 02
Should the product teach clicks or judgment?
- Signal
- Research with sales leaders showed that the hard part was choosing the right product moment and explaining why it mattered—not remembering where to click.
- Decision
- Organize Guides around expert reasoning, learner explanations, and knowledge checks rather than a simple click-through tour.
- Tradeoff
- The experience asks more of authors and learners, but produces evidence of understanding instead of passive completion.
- 03
How much interface should the Guide occupy?
- Signal
- Learners need the underlying product visible to connect each explanation to the feature in front of them.
- Decision
- Use a side panel with progressive disclosure: the next prompt stays clear while deeper context remains available when needed.
- Tradeoff
- The panel has less room than a full-page lesson, so content must be structured and intentionally concise.
- 04
How should guidance age with the product?
- Signal
- Routine interface changes can silently break mapped steps and erode trust in every Guide that follows them.
- Decision
- Store structured targets, surface target health, and give authors an explicit remapping path.
- Tradeoff
- Authors take on some maintenance work, but broken guidance becomes visible and repairable instead of failing without explanation.
How the product fits together.
The web app handles authoring and evidence. The extension brings the work into the product. A shared backend keeps both sides synchronized.
Guides
Experts record a path through the real product, then add the reasoning behind each meaningful moment: what changed, why it matters, and how to speak about it.
Browser extension
The extension records and plays Guides beside the product itself. Target health flags broken mappings so authors know when an interface change needs attention.
Team Notes
Questions, accepted answers, field context, and useful links stay attached to a page or exact product element instead of disappearing into chat history.
Reporting
Owners can see starts, completions, learner explanations, knowledge-check results, and the moments that need coaching or clearer guidance.
The side panel keeps context visible without taking over.
A Guide breaks a workflow into meaningful product moments. Each step can carry the product explanation, buyer pain, proof, suggested language, resources, and a learner prompt—while the underlying product remains fully visible.
The interface uses progressive disclosure so the main action stays clear. Authors get richer controls for mapping and maintenance; learners see the next useful prompt. Keyboard navigation, isolated extension styles, and explicit target states keep the experience dependable across host applications.
The engineering behind the experience.
Opptics is a Turborepo with a Next.js web application, WXT browser extension, Convex backend, and shared validation schemas.
- Web app
- Next.js · Authoring and reporting
- Backend
- Convex · Auth, data, and realtime sync
- Extension
- WXT · In-product guidance
Resilient product mapping
A Guide is only useful if it survives routine product changes. Opptics stores structured targets, monitors their health, and gives authors a remapping path when the underlying interface moves.
Versioned learning evidence
Published Guides are versioned and assignments stay pinned to the version a learner received. That preserves a trustworthy record even while the source material evolves.
One system across three runtimes
The Next.js app, Manifest V3 extension, and Convex backend share schemas and organization boundaries so authoring, in-product playback, and reporting remain consistent.
Privacy by default
The extension remains dormant until an organization approves a domain. It is scoped to product guidance—not general browsing history, ads, or unrelated page activity.
A coherent foundation for product enablement.
The shipped system connects Guide authoring, versioned assignments, in-product playback, Team Notes, knowledge checks, learner responses, and reporting. Organization-scoped permissions and approved-domain controls make it viable for real teams rather than a single-user demo.
The most important product lesson was to resist automating away the thinking. AI can help surface gaps, organize context, and coach a learner—but the learner still needs to form the connection between a customer problem and a product decision. That act of explanation is where durable understanding begins.