Product Designer & Frontend Developer· 2022

Commented

ReactUI/UXDesign SystemsCollaboration SoftwareNext.jsChrome Extension

Overview

Commented marketing graphic: Enable Collaboration Directly on Your Apps, showing the PolyBlend dashboard on desktop and mobile with live avatars, presence indicators, and stats — Real-time presence and collaboration, live on both desktop and mobile.

Commented is a collaboration and feedback tool that lets teams comment and annotate directly on live web pages and projects, instead of scattering feedback across email threads and chat messages. Comments attach to the actual page: highlighted text, tagged team members, status and priority on each thread, all visible in context rather than in a separate document.

Commented annotation toolbar with a comment and hand-drawn arrow pointing at a dashboard element — Annotating directly on a live page: toolbar, comment, and a pointed-out UI element.

It's built for cross-functional teams, product managers, developers, and designers reviewing the same live project together, with public commenting that needs no sign-up, integrations into tools like Slack, Jira, Asana, Linear, Figma, and Notion, and a mobile SDK for iOS and Android. I worked on both product design and frontend implementation: the interaction design for real-time collaborative review, cursors, comment threads, and resolution states that stay legible with multiple people commenting at once, and the frontend that makes it work.

Commented's Slack integration, posting comment threads and replies into a Slack channel — Comment threads synced straight into Slack, replies included.

Building it

The marketing site and admin dashboard are built with Next.js; the annotation app itself, the part that runs inside a customer's live page and captures comments, is built with React. That app was the hard part. Annotations meant reading and manipulating the DOM of a page Commented doesn't own, through a Chrome extension and a code-snippet integration, which forced a lot of injections and direct DOM manipulation rather than working inside a normal, self-contained app boundary.

Commented comment thread with an @mention and a voice-note reply from a tagged team member — Threaded replies, including voice notes, with people tagged directly into the conversation.

I used a canvas library for the annotation layer, but had to modify it to get it working the way the product needed. Getting comment threads, cursors, and resolution states to stay in sync with a live, mutating third-party page meant going deep into React's more advanced features, its lifecycle behaviour, and non-trivial state management, well past what a typical CRUD frontend calls for.

Commented admin dashboard, setting up a new project with the Chrome extension or code snippet — The admin dashboard: setting up a project, before a single comment exists.