Optimizing Human-AI Collaboration Loops for Agnes

Agnes AI Dashboard showing pricing cards and AI features
+100% DAU
30k to 60k growth
50%
User adoption of AI Design
Shipped in 1 week
Rapid prototyping & delivery
Agnes AI Rail Introduction

Agnes AI is a collaborative workspace that combines document editing, presentation creation, and design tools into a unified platform. The platform leverages generative AI to help teams work smarter, automate repetitive tasks, and create professional content faster.

My Role
Product Designer (AI Interaction Focus)
Team
Jiayu Wang (Me)
3 Project Managers
Engineers
Skills Applied
Interaction Design
Wireframing
Rapid Prototyping

Business
Goals

Business goals timeline
1. Enable seamless real-time collaboration
support co-editing, shared memory, and synchronous / asynchronous teamwork within one AI-native workspace.
2. Automate knowledge work and creative outputs
generate reports, presentations, summaries, and structured content with multi-agent AI workflows.
3. Unify fragmented productivity tools
replace or integrate across disparate apps (docs, research, design, chats) to reduce context switching and increase workflow efficiency.

Our Users

Knowledge Workers
Collaborate on reports and plans daily, needing shared editing and aligned decisions.
Student Teams
Work on group projects together, relying on shared documents and real-time updates.
Startups & Small Business Teams
Build ideas rapidly across roles, needing centralized collaboration to stay organized.

The Ask

Agnes AI workspace screenshot

Agnes is a powerful AI workspace that instantly generates polished slides and documents.

Yet, collaboration fell short —

the UI discouraged commenting, feedback was scattered, and AI bulk-resolve lacked clarity.

No central comment view
comments are scattered
Easy to miss button
the button for users to use Agnes to resolve comments are not easy for users to identify

Which risked confusion, misalignment, and reduced trust in both collaboration and AI-generated work.

Design Principles

Seamless Integration
Enable collaboration features to work fluidly across Agnes AI tools without context switching.
Proactive Assistance
AI anticipates next steps and surfaces relevant actions before users need to ask.
Intuitive AI Control
Provide clear, user-friendly controls over AI-powered bulk editing so users can confidently manage comments.

The Solution

"Turn Comments into Edits—AI Assists, You Control"

Agnes demo

Key Challenge

The hardest part of this project wasn't the UI itself — it was defining the right ask and deciding what the end-to-end user flow should be.

There was a clear gap between users leaving comments and users actually making edits, and the existing flow wasn't helping bridge it.

Users could leave feedback, but resolving that feedback still required writing prompts to ask AI Agent to resolve each comment individually. The tool supported collaboration — but the workflow didn't.

Current comment flow diagram AI bridging the gap
01 The Centralized Comment Hub

From Scattered Feedback to AI-powered Centralized Control

Centralized comment hub interface
All feedback is pulled into a single management tab, eliminating context switching.
A clear large button that invites users to click on
Magic Fix button
Filters were added to help users quickly sort through comments
Comment filters dropdown
02 The Preselect Logic

We taught the AI to listen before acting.

Introducing bulk-resolve sounded powerful — but also risky. If AI edited everything at once, users might lose control over their content or feel unsure what had changed.

User flow comparison: previous flow vs new flow
AI preselect demo

Advantages

Signal vs. Noise: The AI identifies comments containing specific edit instructions (e.g., "Change this to blue") and pre-selects them for resolution.

Human-in-the-Loop: Subjective comments are left unselected, requiring manual user review. This built trust by proving the AI understands context.

03 AI-Assisted Editorial Review

Users retain control via "Approve or Reject" workflow.

Agnes presents all edits as reviewable suggestions
Editorial review interface
matching user's familiar workflow from Google Docs and Word.
Workflow comparison with Google Docs

The complete journey

Final user flow diagram showing the journey from file creation to AI-powered resolution

Visual design system

Agnes AI Visual Design System

Next Steps

Right arrow

1. Test the Intelligence

Does AI pre-selection actually save time, or does it get in the way? If the system guesses wrong too often, users will bypass it entirely.

2. Scale the System

Add version history, conflict resolution, and permission controls so the tool works for larger, more complex team structures.

Decorative rail divider

Takeaways

Progressive disclosure creates clarity in complexity

Progressive disclosure isn't about hiding complexity - it's about building confidence. I used to think progressive disclosure meant tucking advanced features away to keep interfaces clean. What I learned is that it's actually about sequencing information so users build mastery gradually. Each layer they uncover should feel like a natural next step, not a hidden Easter egg. The interface should grow with the user's confidence.

Understanding the existing system is not optional groundwork - it's the actual work

I learned that jumping into solutions without deeply understanding how current features function and how users have adapted to them leads to designs that look good but break real workflows. Spending time mapping every interaction, every edge case, and every workaround users developed wasn't just research - it revealed the constraints and opportunities that shaped every design decision afterward. The existing system tells you what users actually need, not what they say they need.

Next project

See my visual systems design work