CoDesign

00

Tencent CoDesign · Product interface

Inside the Panel

Before the three AI directions, here is the mind-mapping panel itself and what each part does.

01

Map Style

Switch between different mind-map layouts and visual styles.

02

AI Assistant

Ask the AI assistant a question, or generate a full mind map from a prompt.

AI Q&A: ask the assistant for help while you work.
Mind-map generation: turn a prompt into a full map in one click.

03

Insert Attachment

Attach a file directly to a node.

04

Doc to Map

Convert an existing document into a structured mind map.

05

Element Link

Connect related nodes across the map with a reference link.

06

More

Open additional panel tools and settings.

01

Tencent CoDesign · AI interaction exploration

Mind Map & Document Conversion

Yeli Ye

UI Designer · Tencent

Goal. Turn scattered research notes into a clear, structured conclusion without manual cleanup.

Pain Points

Research results are hard to analyze.

The information I collect isn't always systematic enough.

I don't know how to summarize my research conclusions.

Design strategy

→

Doc to Map. Convert a raw research document into a structured mind map automatically.

→

AI clustering. Group scattered notes into themes so patterns are easier to see.

→

One-click summary. Generate a written conclusion straight from the mapped research.

Clicking the Doc to Map icon on a completed mind map.

The same content shown as a plain text outline, its text state

Text state, the same content as a plain outline.

The same content shown as a compact linear mind map, its document state

Document state, a compact linear layout of the same map.

02

Tencent CoDesign · AI interaction exploration

AI Feature Panel

Bingbing

Product Manager · Tencent

Goal. Judge a feature set and its layout quickly, with the specialized knowledge to back the call.

Pain Points

During structural analysis, how do I professionally categorize different feature types?

When something touches specialized knowledge, I need it translated or explained in depth.

During framework analysis, how do I know the pros and cons of similar products' page layouts?

Design strategy

→

AI categorization. Automatically group features into structural categories as the map is built.

→

Inline AI explain. Select a term and get a plain-language explanation without leaving the canvas.

→

Layout comparison. Summarize the strengths and weaknesses of comparable products' page layouts.

The AI feature panel, showing the AI icon selected in the whiteboard toolbar with a mind map on the canvas

The AI icon in the toolbar opens the panel from any selected topic.

The AI feature panel expanded, showing a menu with AI Q&A, and Explanation, Secondary Topic, and SWOT Analysis under Generate Mind Map

The panel splits into AI Q&A and three ways to generate a mind map.

02.1

AI Interactive Q&A

Ask the panel a question and get an answer without leaving the canvas. I explored this in two directions: recognizing text already on the canvas, and answering an open-ended question with a generated diagram.

AI Text Recognition

Vivi Liu

Product Manager · Tencent

Goal. Type in a few keywords and have the AI explain and suggest from there.

Pain Points

I don't know how to summarize my research conclusions.

Or how to accurately position target users and the market.

The AI panel open with Text Recognition selected from the AI Smart Recognition section

Selecting Text Recognition from the AI panel.

A loading state reading Recognizing text, 3 seconds

The AI reads the node while it works.

A generated paragraph of recognized text attached below the node, with a regenerate button

The result attaches to the node, ready to regenerate.

AI Q&A Assistant

Ziyi Chen

Branding Intern · Tencent

Goal. Get a quick response that checks whether a summary is actually accurate.

Pain Points

When I summarize information, I'm not sure if how I've phrased it is accurate.

Once I've settled on a project topic, I don't know what information to research. What do I do when I have no idea where to start?

The AI panel with Generate Flowchart selected from the quick-generate options

Choosing a generation type, like a flowchart.

A typed question in the AI panel input, asking how the AI recommendation feature works

Or typing a specific question for the AI to answer.

A complete flowchart generated on the canvas, answering the typed question

The AI builds a full flowchart answering the question.

02.2

Mind Map Generation

Generate a mind map in different styles, matched to what the content needs.

Momo

UX Designer · Tencent

Goal. Get from a scattered structure to the real need, and a flow with the duplicates merged out.

Pain Points

I don't know how to summarize the real need behind a problem.

Or how to pull a usable process out of competitor research.

I want to quickly spot duplicate features in a structural diagram and merge them.

A generated SWOT analysis mind map, with strengths, weaknesses, opportunities, and threats for AI in mind mapping

A SWOT analysis, generated as one of the mind-map styles.

An expanded topic box in a generated mind map, showing options to add or collapse nodes

Any topic box can be expanded to add or collapse its own nodes.

03

Tencent CoDesign · AI interaction exploration

Classification Summary & Keyword Extraction

Lulu

UX Designer · Tencent

Goal. Go straight from a pile of features to a clean, professionally categorized summary.

Pain Points

Can it just summarize the main design strategies, the actual feature points, for me?

During structural analysis, how do I professionally categorize different feature types?

Clicking the add-node icon opens the AI Assistant panel with Keyword Extraction and Classify plus Next Topic

Clicking add on a category opens the AI Assistant panel.

Two category nodes with their key term highlighted in blue, connected to a new node listing the extracted keywords in quotes

Keyword Extraction highlights the key term in each category, so the point reads at a glance.

A new node generated from two category nodes, suggesting a follow-up topic

Classify + Next Topic proposes a follow-up topic drawn from the categories.

Tencent CoDesign · Validation

User Testing & Validation

Before shipping, we tested all three AI directions against real workflows with a cross-functional panel of 5 colleagues.

1Frontend Developer

1Product Manager

2Visual Designers

1Interaction Designer

One of the five was my mentor, whose feedback anchored the final direction.

Result

~30%

increase in idea-structuring efficiency post-launch, after internal usability testing and feedback synthesis lowered creation barriers for cross-functional teams.

👍

These explorations are highly valuable and worthy to be included in the pool of candidates for actual product implementation.

Constructive Growth: It accurately identifies the core issues, though some solutions could be further optimized.

Future efforts should focus on multi-dimensional thinking to enhance the depth and diversity of the proposed approaches.

Tencent CoDesign · Reflection

Reflection

I am immensely grateful to my mentor, colleagues, and Design Director for their constant support and guidance in designing the AI mind-map feature at Tencent CoDesign. This process deepened my understanding of human-AI collaboration. I learned that designing for AI is about finding the optimal balance between AI assistance and user control. While our problem framing was validated and shortlisted for the product roadmap, my biggest takeaway was to never settle on the first solution, but to continuously push for more intuitive interaction patterns.

With the CDC mascot and penguin statues at Tencent's Customer Research and User Experience Design Center

Group photo with the CoDesign team in front of the CDC wall