Adding video chat without breaking the workflow
Samesurf lets a support agent and a customer browse the same screen in real time without exposing sensitive data. The project: embed video and call functionality directly into the cobrowsing platform to reduce friction during live support sessions.
The constraints were real. Video and call chat were entirely new capabilities, desktop and mobile had to work equally well, the existing navigation was already overloaded, and screen real estate was limited. The problem underneath all of it: how might we introduce video without disrupting existing workflows or overwhelming users, especially on mobile?
THE FRAMING
What should video chat actually enable?
When I joined, video chat was broadly defined, with no shared understanding of required actions or how it should operate inside existing cobrowsing workflows. Before designing interfaces, I mapped the current product flow, the roles involved, and the constraints video would introduce.
Inputs I considered
Existing host and guest workflows from session start to end. Entry points and session states across devices. The interface elements a video-enabled session requires. Mobile and desktop layout constraints.
Focus for this phase
Define which elements must remain persistent. Prioritize controls by user role and context. Reduce cognitive load in constrained layouts. Establish structure before introducing visual design.
THE INSIGHT
Video required rethinking navigation,not just adding a feature
Early exploration made it clear that video couldn't simply be layered onto the existing interface. Navigation was already doing too much at once, and adding video without restructuring would have increased friction, especially on mobile, where layouts exposed structural issues that desktop had been hiding.
Users expected Zoom
People arrived with the familiar video behaviors of the tools they already use, so familiar patterns would reduce cognitive load.
Navigation was overloaded
The existing nav lacked prioritization and couldn't absorb a new mode without restructuring.
Mobile exposed the cracks
Small screens surfaced structural issues that desktop layouts had been hiding.
DIRECTION
Simplify first, then layer in video
Rather than treating video as an isolated feature, the direction shifted toward simplifying the overall interface to make room for new functionality: revisiting navigation, entry flows, and control placement before designing the video experience itself.
Principles guiding the work
Familiar patterns over novelty. Intentional control hierarchy, where primary actions take precedence in small spaces. Mobile-first constraints, designing for the tightest space first.
What we intentionally deprioritized
Advanced video and microphone controls. Supporting every edge case in the first pass. In-app tutorials.
EXPLORATION
Testing how video, nav, and cobrowse could coexist
I explored multiple layouts and control systems balancing visibility, access, and screen real estate: different navigation densities, floating vs. fixed video controls, pull-tab interactions to minimize obstruction, and distinct modes for cobrowse vs. video. Every candidate control faced the same questions: does this need to be immediately accessible, or can it be contextual? If 2 actions lead to the same outcome, do both need to exist? How often is it actually used during a session?
Exploration revealed that overly combined controls felt cluttered, certain actions could be deprioritized, and a slim, purpose-driven navigation performed best in stakeholder testing.
ITERATION
Narrowing toward a clearer, more predictable interface
Through weekly stakeholder reviews, I iterated on layouts, flows, and interaction states, with feedback centered on clarity, predictability, and ensuring hosts could manage sessions without cognitive overload. The key refinements: a simplified navigation hierarchy, clear separation between modes (video, cobrowse, upload and share), explicit states for mic, video, and user roles, and restructured user actions for invite, users, and pass control.
The approach moved forward because it matched user expectations, scaled across desktop and mobile, and its clean organization supported enterprise-level trust.
FINAL SOLUTION
An embedded video experience that supports existing workflows
The final design introduced video as a seamless extension of the cobrowsing experience. Navigation and entry flows were reworked for clarity while controls stayed familiar and accessible across devices.
Controls
Video and microphone in a simplified nav system.
Onboarding
A clear flow for joining sessions.
Roles
Host and guest role clarity.
Navigation
A pull-tab UI that minimizes screen obstruction.
IMPACT
Stakeholders aligned earlier than before
With final approval, the Figma file was prepped for engineering: states, prototypes, variables, and documented workflows. The work created a clear, cohesive vision for how video could live within the platform, and stakeholders aligned around scope, priorities, and technical requirements earlier than before.
Evidence
Strong validation from the CEO, CTO, and Sales. Clearer technical conversations around constraints. Engineering-ready files with a reusable component and variable system.
What this enabled next
Faster implementation once engineering began, and a scalable foundation for future real-time features.
REFLECTION
This project reinforced how critical early structure and prioritization are when introducing new features. By addressing navigation and workflow clarity first, the team avoided adding video in a way that would have increased friction, along with the compounding cost that comes with it.
I'm glad I asked my questions with the CEO and CTO in the same room — it surfaced technical constraints early and minimized revisions.
Early on I tried to manage the project in Notion, but the client wasn't interested in participating — even though it's part of how I work. In the future, if I have a project that spans multiple features in a short time frame I would push for this to be a requirement. Any product management software would do.