top of page

Zoom Cobrowse

Zoom Contact Center · 2024 - 2025 · Design Leader

封面.png

Overview

The Zoom Cobrowse feature is a real-time, secure browser-sharing feature that allows Contact Center agents to guide customers through online engagements.​ It’s especially useful when customers face difficulties locating services, navigating complex forms, or completing transactions. By enabling shared browser views, agents can resolve issues more quickly and effectively.

My Role

Platforms

Product

Design Lead (Sole Designer)

Zoom Contact Center

  • Web-based Configuration

  • Zoom Contact Center Desktop

  • Web Client

Timeline

2024. 08 - 2025. 08​

Challenges

New & Complex Domain

Cobrowse was a relatively new feature, requiring me to quickly ramp up my understanding of its workflows, constraints, and use cases.

Cross-Team Collaboration

The project involved 2 product teams, and 10+ front- and back-end engineers, which demanded strong organization and design communication skills to align everyone on the design vision.

Complex Design Integration

The Contact Center is an omni-channel platform that integrates a wide range of complex features. Incorporating the Cobrowse capability into this existing framework, while preserving a simple and intuitive user experience is a significant design challenge.

Tight Timeline & Broad Scope

The delivery window was short, yet the scope covered multiple personas and complex interaction flows.

The Process

Discover, Define, Design, and Deliver
To kick off the project, I partnered with the Product Owner and another UX designer to develop a clear plan of action. Our goal was to apply a human-centered design approach and ensure that every design decision was grounded in real user needs. Through competitor analysis, user interviews, we uncovered key pain points that informed our early concepts. We then translated those insights into initial wireframes, which were tested and iterated upon across multiple rounds. This process led to the delivery of high-fidelity prototypes for both web and mobile platforms, ready for handoff to development.
process.png

Competitor Analysis

I conducted trials with several mature competitors in the Cobrowse space, such as Glia, Surfly, Remote HQ. The key takeaways include conducting a feature comparison to understand which features are standard, unique, or highly valued by users as well as focusing on evaluating the user experience of competitors' co-browsing tools.

  • Glia: offers a robust all-in-one support platform with deep integration, ideal for financial or regulated industries.

  • Surfly: is known for its smooth user experience, powerful proxy tech, and smart masking features.

  • RemoteHQ: leans toward multi-user real-time collaboration and is more suitable for cross-functional remote sessions rather than customer support alone.

competitor analysis_edited.jpg

User Interview

I leveraged partner work sessions and conducted interviews with colleagues from the PSO (Professional Services Operations), Tech Support team to better understand real-world support workflows and challenges. These conversations provided crucial insights into how Contact Center's agents currently navigate web-based troubleshooting, the limitations they face without visual context, and their expectations for a Cobrowse solution. The feedback also helped validate some of our early assumptions and uncovered edge cases we hadn’t previously considered.

  • Distinct Use Cases: Co-browsing is ideal for lightweight guidance (e.g., navigating to a feature), while remote control is better suited for technical support.

  • Primary Channel: Voice calls are the main entry point for Cobrowse, with smoother transitions and better engagement than chat.

  • Session Flow: During a call, agents direct users to a web page and share a PIN verbally—faster and easier than email or SMS links.

  • Additional Insights:

    • Enterprise customers request branding customization (e.g., domain masking).

    • Priority platforms: PC > in-app > mobile browsers.

    • Technical questions emerged around using WebAssembly or WebRTC.

user interview.png

Persona

To ensure Cobrowse meets the needs of all users, I developed three detailed personas representing Admins, Agents, and Customers. These personas outline roles, occupations, goals, pain points, and user trains. highlighting differences in technical skills, workflow priorities, and emotional drivers. Grounded in these user archetypes, my design decisions anticipated diverse needs, addressed potential challenges, and aligned the product with both user expectations and business goals.

persona1_edited.png
Josh_edited.png
Josh-1_edited.png

User Journey

I mapped the end-to-end Cobrowse user journey after the research to visualize how Contact Center agents and customers interact across different touchpoints. By aligning these insights with technical constraints and business goals, I was able to uncover user pain points, clarify the entire user path, and propose targeted design solutions that streamline the flow.

Customer Journey Map Template_edited.jpg

User Experience Risks: 

  • Threat: Consumers might struggle to locate the input box.

  • Long or confusing Cobrowse flows can cause customers to lose patience quickly.

 Potential Security Risks: 

  • Until the consumer successfully joins the session, the agent must not be able to view the consumer’s web content.

Technology Constraints: 

  • The session code should be simple and easy for the agent to retrieve at any time.

  • If a Cobrowse session is already active, entering the same code on another device/user should not start or join the session.

Design Considerations: 

  • All states must be covered in the flow: joining, failed to join, and joined.

user journey_edited.png

Design Goals

Admin

(Web-based configuration)

How might we enable admins to customize Cobrowse settings to fit specific business requirements?

Agent

(Zoom Contact Center desktop)

How might we allow agents to easily initiate Cobrowse and view a consumer’s browser to provide effective assistance?

Customer

(Web Client)

How might we help consumers receive interactive, real-time assistance on their web browser during an engagement?

Jobs to Be Done - Synthesis Research to Design

In the discovery phase, research findings are distilled into clear, actionable design inputs. One of the most effective tools in this step is the Jobs to Be Done (JTBD) framework, expressed as:

“As a [role], I want [goal], so that I can [desired outcome].”

This framework helps distill complex research findings into actionable design objectives. Defining JTBD before design begins ensures that our solutions directly address real user needs rather than assumptions. It also provides a shared language for the whole team: from designers to engineers to stakeholders, making it easier to align priorities, evaluate design ideas, and validate whether our final solutions truly solve the intended problems.

JBTD.png
Discovery_edited.png

Design Discovery & Iterations - Lo-Fidelity Wireframes

Given the complexity of the project, the design phase began with an extended design discovery stage, characterized by agility, close collaboration, and rapid feedback loops. Over the course of three iterations, the team aligned on product direction, refined wireframes, and validated technical feasibility.

Iteration 1: Rapid Draft Visualization

  • Created the first draft of the Cobrowse flow to quickly visualize the concept.

  • Shared with team leaders for early product direction alignment.

Iteration 2:  Refinement Based on Feedback

  • Incorporated leader feedback to optimize product direction.

  • Further developed low-to-mid fidelity wireframes to clarify flow and interactions.

Iteration 3:  Technical Alignment

wireframe2_edited.png
  • Presented refined wireframes to team leaders for final alignment.

  • Shared designs with engineers for technical feasibility evaluation.

  • Discussed and agreed on best-fit design solutions based on technical constraints.

wireframe_edited.png

Final Design Solutions

Admin - Web Configuration: Advanced Data Security Controls

The configuration interface enables administrators to define and manage Cobrowse data security settings.

Detailed Data Masking : Admins can customize which elements of the consumer’s browser will be masked, ensuring sensitive information remains hidden.

web configuration_edited.jpg

Agent Desktop – Seamless Session Joining & Annotations

The agent-facing interface is designed for speed, clarity, and interactive assistance.

In-Session Annotations : Real-time annotation tools allow agents to highlight, draw, or guide users visually—enhancing communication and problem-solving.

wireframe2_edited.jpg

Customer Web Client – Guided & Secure Interaction & Issue Resolvation

Frame 29067_edited.png

Simple Session Entry : Customers can easily enter the session code and join without technical complexity

Frame 29068_edited.png
  • Transparent Privacy Indicators : Clear visual cues inform customers when sharing starts, what is visible, and what remains private.

  • Interactive Guidance : Customers see the agent’s annotations and guidance in real-time, helping them complete tasks faster and with confidence.

Impacts and Outcomes

Industry-standard outcomes include 20–30% faster call handling, 20% higher first-contact resolution, and 35% boost in customer satisfaction which significantly improve NPS/CSAT by offering fast, guided support.

Frame 29069_edited.png
Frame 29070_edited.png

Conclusion

Leading the Cobrowse initiative in the complex Contact Center ecosystem required balancing technical feasibility, cross-team alignment, and user experience excellence. From early discovery and persona definition to iterative wireframing and high-fidelity prototyping, I navigated multiple layers of constraints: security compliance, performance considerations, and multi-role user flows, while keeping the design intuitive for admins, agents, and customers alike.

By leveraging rapid iterations and close collaboration with engineering, product management, and stakeholders across multiple teams, I was able to validate assumptions early, refine workflows, and ensure that the final solution was both technically implementable and user-centric.The result was a scalable, secure, and easy-to-use Cobrowse capability that seamlessly integrates into the Contact Center platform without adding cognitive load to its already complex interface.
 

This project demonstrated my ability to own end-to-end design in a high-stakes, cross-functional environment, synthesize research into actionable insights, and deliver solutions that align business goals with real user needs. Most importantly, it reinforced my belief that collaboration, adaptability, and clear design communication are essential to delivering impactful products in fast-paced, enterprise-scale environments.

bottom of page