Agnes background
Agnes AI Collaboration
Turning Generative AI into a Shared Workspace

Impact

+100% DAU

30k to 60k growth

50%

users use AI Design

Team Member

UX/UI Designer (me)
2 Project Managers

Project Duration

1 week

Skills

Interaction Design
User Flow
Wireframing
Rapid Prototyping

Overview

Project Goal

This project enhanced the collaboration feature in the Agnes generative AI platform by making the “one-click resolve” feature more visible through an expandable floating action button and by adding a centralized comment management tab to give users intuitive control over AI-powered edits.

Problem Statement

How might we design a commenting flow that encourages users to use comments as the primary feedback tool, while giving them intuitive control to review, manage, and resolve all feedback with Agnes’s one-click assistance?

My Responsibilities

  • Understand current Agnes AI collaboration & comment flow
  • Design review flow to view, triage, and manage comments
  • Guide users to use the “Magic Fix” to resolve comments in one click

New Experience

Comment hub with Magic Fix demo

A centralized hub for comments with “magic fix feature” that allows solving comments with Agnes AI in one click.

AFTER

After – AI Doc After – AI Design

Ideation

Design Principles

Seamless Integration

Enable collaboration features to work fluidly across Agnes AI tools without context switching.

Conflict Prevention

Proactively avoid edit conflicts and version issues before they disrupt team flow.

Intuitive AI Control

Offer clear, user-friendly controls over AI-powered bulk edits and comment management.

Thinking Process & Iterations

How to prevent AI from resolving comments that are not editing suggestions?

The one click function provides a very convenient way for users to leave feedback first and then collectively resolve, but when it comes to collaboration, people might leave feedback that are not suggestions .

Solution

AI pre-selects relevant comments, but users can still select or deselect comments at-will.

Status UI placeholder

When the magic wand icon means different actions across features, how can we create consistency?

In the current application, the magic wand icon is used to summarize group chat contents with one click. How can we resolve the conflict caused by the same icon being used for two different “one-click” features, and ensure users have clear and intuitive access to both?

Solution

Consistent floating magic wand button placeholder
Keep a consistent floating expandable “magic wand” button across features.
Magic wand expandable only on group chat page placeholder
Make the magic wand expandable only when users are on the group chat page to avoid confusion.

Extra Details

In the Agnes Slides feature, we wanted to give users the freedom to resolve comments on each slide separately. In this case, the “one-click” feature could no longer work.

To compensate for this limitation, we combined the comments for each separate page into one tab and added “resolve all comments on this page” buttons to the bottom of each page’s comment section.

Comments tab layout placeholder

Final Design

Features

  1. Centralized comment dashboard that aggregates comments from all collaborators in a single, manageable interface
  2. Bulk execution button prominently displayed to enable users to apply all approved changes simultaneously

Utilize the Comment Tab as a Control Hub

View, edit and manage comments
View, Edit, and Manage Comments
Select which comments to resolve by AI
Selects which comments to resolve by AI
Approve or decline AI suggestions
Approve, Decline or Regenerate AI Suggestions

Final User Flow

Final user flow diagram

Visual Representation

Design System

Agnes design system overview

Final Collaboration Experience Demo

Conclusion

Next Steps

  1. Usability Testing & Iteration

    Conduct targeted tests to evaluate discoverability of the expandable floating action button and the clarity of the comment management tab. Use findings to refine interaction flow.

  2. Enhance AI Selection & Transparency

    Conduct targeted usability testing with real collaborators to evaluate discoverability of the expandable floating action button and the clarity of the comment management tab. Use findings to refine interaction flow.

  3. Conflict Resolution Features

    Prototype advanced collaboration safeguards such as version history views, conflict alerts, and role-based permissions to handle larger teams.

Takeaways

I learned how to work with complicated applications. I realized that the most important step is to look into all the existing features and use progressive disclosure smartly so that key information is presented first while maintaining the interface easily navigable.