Oria - Visual Feedback Tool
Oria | Zero-to-one internal product design and engineering
I started with a recurring problem in my team design workflow and turned it into Oria, an internal browser extension that converts visual feedback into implementation-ready context for engineers and AI coding agents. I led the product from problem discovery through design, engineering, integrations, and release. The underlying workflow has been filed for patent protection.
Year
04.26
Impact
Timeline
6 months, January to July 2026
Oria turns visual feedback into structured, implementation-ready evidence for engineers and AI coding agents.
Within nine days, the Power Platform Design Research team used Oria to turn 67 visual findings into implementation-ready GitHub issues, averaging more than seven reports per day. Fifteen have already been closed, while the four-step workflow moves feedback from the live interface to engineering handoff in under 10 seconds.
Captures visual feedback directly on the live interface, without leaving the page.
Four steps replace screenshots, copied selectors, and manually written tickets.
Opportunity
The existing bug-reporting workflow was fragmented across screenshots, browser developer tools, chat, ticket forms, and project-management systems.
Each tool preserved only part of the problem:
Screenshots showed appearance but lost inspectable context.
Written descriptions captured intent but depended on interpretation.
Developer tools exposed technical evidence but were not designed for feedback workflows.
Ticket forms interrupted the review process and required repeated manual entry.
AI coding agents could implement changes but lacked precise visual context.
Existing feedback platforms often required teams to install an SDK into each product.
The natural human behaviour was simple: see a problem and point at it. The available workflow forced people to translate that observation into another format.
I framed the opportunity around one question:
How might we preserve what a designer sees at the moment of feedback and deliver it in a form that an engineer or AI agent can immediately use?
The solution needed to work on any webpage, require no product integration, respect internal data boundaries, and connect with tools teams already used.
Anchors every report to the exact element, selector, and computed UI state.
Design Intent
I wanted Oria to feel like a lightweight layer on top of the product being reviewed, not another application competing for attention.
The product was guided by four principles.
Precision
Users are not describing a button. They are pointing at one.
Every annotation captures the exact element, selector, bounding box, styles, and location in the DOM. This changes feedback from an approximate description into a coordinate that engineering systems can understand.
Context
A comment such as “this looks broken” is rarely enough.
Oria pairs the comment with the same evidence a developer would normally gather in browser developer tools, including class names, nearby text, computed styles, design tokens, accessibility information, screenshots, and DOM state.
Speed
The primary workflow contains four steps:
Activate Oria on any page.
Select the affected element.
Add a comment.
Create an issue or export the annotation.
For a standard report, the flow can move from observation to a structured issue in under ten seconds.
Trust
Oria runs locally and keeps annotations and screenshots in the browser until the user chooses to share them. GitHub and Azure DevOps credentials are not written to disk, and issue creation always remains an explicit user action.
Combines reviewer intent with the DOM and style evidence needed to investigate the issue.
Moves structured evidence directly into GitHub or Azure DevOps in under ten seconds.
What I Owned
I led Oria as the end-to-end product designer(transitioning to UX/Design Engineer).
My ownership included:
Identifying the opportunity through direct design-workflow observation
Defining the product strategy, principles, and roadmap
Designing the complete annotation and issue-creation experience
Creating the interaction model, visual system, information architecture, and product states
Prototyping and testing workflows directly on complex webpages
Engineering the React and TypeScript browser extension
Building screenshot capture, DOM snapshots, element identification, and persistence
Integrating GitHub, GitHub Enterprise, and Azure DevOps
Building the local Model Context Protocol bridge for AI coding agents {coming soon}
Designing privacy, storage, authentication, and failure-handling behavior
Managing releases, documentation, packaging, and ongoing product improvements
This was not a handoff from design to engineering. I carried the same product intent through both disciplines.
Impact
Oria progressed from a designer-led insight into a functioning internal tool with a complete product workflow.
It:
Reduced the manual translation between visual observation and engineering action
Turned screenshots and comments into structured, inspectable evidence
Connected designers, QA reviewers, engineers, and AI agents through one shared artifact
Compressed a multi-tool reporting process into a four-step workflow
Supported direct issue creation across GitHub, GitHub Enterprise, and Azure DevOps
Worked across arbitrary webpages without requiring product teams to install an SDK
Established a local-first foundation for AI-assisted debugging and implementation
Demonstrated how design-led problem discovery can produce a technically complex platform
The originality and potential of the workflow have led to a patent filing for the underlying concept.
Reflection
Oria changed how I think about the role of a designer.
I started by noticing friction in a workflow. Solving it required more than redesigning a form or improving a handoff. It required product strategy, systems thinking, interaction design, browser architecture, security decisions, integration work, and continued iteration after release.
The most important insight was that a feedback tool is only as valuable as the reconstruction it removes for the next person. Capturing a screenshot is easy. Preserving intent, evidence, state, and execution context is the harder and more valuable problem.
I also learned that reliability is part of the user experience. Progress states, cancellation, storage management, error isolation, and accurate element tracking were not secondary engineering concerns. They directly determined whether users trusted the product.
I initially considered showing all captured technical evidence immediately. This made the experience feel like developer tools and distracted from the reviewer’s primary task. I kept the comment, selected element, and screenshot prominent, then placed selectors, styles, DOM data, and session context behind expandable sections. This preserved speed for designers without removing depth for engineers.
The next phase is to close the loop between reporting and resolution. My direction is to let AI agents move annotations into a Ready to verify state after implementing a change, while keeping final approval with the human reviewer.
Oria began with a designer pointing at a problem. It became an internal platform for turning that gesture into actionable work.
Oria turns a moment of visual friction into implementation-ready evidence.
