Improve collaborative user experience of Lark Mindnote.

Mind map is a great tool to kick off a project with variouspreset templates, resulting in popular SaaS integrating this feature in different ways. Lark purchased Mubu renamed as Mindnote, which mainly focuses on the one-click switching between a note outline and a mind map structure. The opportunity to improve Lark competitiveness emerges through designing for the Mindnote collaborative compatibility .

For whom?

Lark platform users, focusing on collaboration experience.

Contribution Journey

Independent Case Study

I initiated and completed the entire case study individually within 4 weeks, aiming at training SaaS product thinking and design ability based on existing product.

Fundamental and Usability Research

I conduct 1-week fundamental research to identify opportunities and corresponding usability study to validate my design solutions.

3-Week Design Sprint

The entire design process last 3 weeks, including 2-week design sprint gradually shaping the interacation design and 1-week design polishing for the final delivery.

What is the potential of the Mindnote for the Bytedance Lark Platform?

Many people use mind map tools to initiate a project due tothe complexity it can handle and the creativity it can empower. And the major office suits currently on the market contain their own integrated and adapted mind maptools, like Miro for Microsoft or FigJam for Figma. Likewise, Bytedance Lark absorbed the Mindnote to improve the user loyalty and integrality of the entire user flow.

Why Lark users kick off with Mindnote then gradually abandon it?

- Quotes from forums on the Internet

Therefore, how to improve Lark competitiveness through its sub-product Mindnote?

Lark Suit dramatically boosts office productivity and remote collaboration experience in China with various integrated tools along the office workflow. As a part of the Lark Suit, Mindnote seems less competitive and fails to attract user at the early production stage based on my observation on the Internet.

To answer this question...

1. Ask Attached Questions:

What are difficulties and demands when people are using mind map tools?

Is it because the Mindnote tool is not compatiable to other Lark tools?

Why would they choose other tools rather than the Lark Mindnote?

2. Hypothesis:

Mind map is specifically designed for individual work.

Users would easily get lost and confused when their mind maps become complicated.

The Lark Mindnote has many restrictions.

3. Research Methods:

User Interviews - research on usability challenges of the Mindnote and key demands for Lark users.

Competitive Audits - locate opportunities efficiently; find out pros and cons of existing products.

User Journey Map - which stage should I focus on along the Lark Mindnote user journey.

Research Process


Improve remote Mindnote collaborative experience.

Lark Suit has become a leading office software due to its all-in-one cloud collaboration workflow, including video presentation, document management, and real-time feedback. Other Lark sub-products assist in this process accordingly. The Mindnote, as a result, needs to be optimized to improve its collaboration compatibility.

Flexible communication

Real-time collaboration requires sharing thoughts and ideas around the mind map network throughout the establishment phase. Currently, comments are attached to single nodes, which limits collaborative communication of building node connections.

Impact: Adapt the comment feature specifically for mind maps.

Easy navigation

Mind maps would easily grow in complexity, making it harder for users to browse and manage the map content. Meanwhile, remote collaborations require fast actions to navigate and relocate.

Impact: A fast navigation tool is in demand to improve production and collaboration efficiency.

Formal Prensentation

It’s hard for users to present a mind map during a formal meeting. And it wastes both time and effort to interpret it into a new diagram.

Impact: It’s important to convert mind maps into an understandable and sharable format.

Design Decision Highlights.

How might we present a mind map in Lark formally?

Navigation and presentation features are the priority because the comment feature is not optimized but still functional. Investing time into new features to meet Lark collaboration demands is the most beneficial move for Mindnote.

Creating and retrieving views is the best solution to navigate within mind maps and further used as presentation materials.

View Thumbnail Panel
  • Overlap with the comment panel.
  • Take over a large area of board window.
View Top Bar
  • Coexist with comment panel.
  • Smaller and lighter on the board.

One of the navigation and presentation idea is to combine views with comments, so that users can comment on specific views. Other participants' interactions can also be displayed during the presentation meeting. However, I later abondaned this solution, because it led to user confusion based on the usability study.

Combine with Status Info
Place in Edit Group
Place in View Tool Bar
Seperate Presentation from Comment Feature

Keep this group-view comment feature for further design development.

Seperating presentation view from comment view leads to a more handy viewport management.

Zen mode eliminates other unnecessary nodes, creating a clean and focused mind map for user to concentrate on specific content. It's a popular feature for other mind map tools in the app store. I design to integrate the Zen mode into viewport management feature.

How might we comment flexibly on a mind map in Lark?

The current Mindnote comment feature is good enough for an individual workflow but has many restrictions when coming into a group collaboration session that Bytedance Lark highly praises.

I brainstormed three comment formats specifically for mind map.

Node Comment
  • Hard to get other infomration, such as name.
  • Comments are only attached to a single node.
Free Comment
  • Hard to relate comments to nodes.
  • It will be too chaotic for mind map organization.
Group Comment
  • Comment location indicates relation to nodes.
  • Comments can build connection among nodes.

Design and consider interaction detials.

Area Selection
  • Not intuitive enough to suggest the comment relation to nodes.
  • One key feature of Mindnote is the automatic layout. Free area selection is not appropriate under this operation system logic.
Auto-snap Selection
  • Indicate comment will focus on node specifically.
  • Easier for user to comprehend the automatic layout logic behind the product.
Floating Comment Tab
  • Require too much coding revision to achieve this feature.
Side Comment Tab
  • Attach to the existing comment design system and layout logic.
Comment to Selection Logic
  • Comment CTA botton position doesn't align with board layout logic and Lark user habit.
Selection to Comment Logic
  • Differentiate from viewport creation workflow, reducing usability confusion.
  • More flexible and align with user habit.

Comment Solutions.

Optimize comment interactions aiming at improving Mindnote collaboration experience.

One. Comment with Box Selection

Comment on complex Mindnote network.

Two. Comment with Specific Selection

Build connections among nodes.

Three. Comments Navigation

Easily locate specific comments and impacts.

Four. "@" Signifier on Board

Visualize and highlight collaborative interactions.

Presentation Solution.

Add new features to support Mindnote navigation and make Mindnote formal presentation compatible to Lark common user flow.

One. View Creation and Management

Organize Mindnote comprehension properly.

Two. Add Views to Lark Doc

Improve its compatibility to other Lark tools.

Three. Use Views for Formal Presentations

Mark out highlights and share insights for Lark formal presentations.

Reaching out to the inside and outside accordingly.

As a product designer, I have the confidence to brainstorm all potential solutions and determine the most optimized ones for a product. However, it doesn’t mean that my decision is always the most appropriate for others, including product team members and users.

I noticed that holding a modest mindset and learning different perspectives patiently sometimes lead to a much better and faster design decision. It happens that I would struggle to decide between. In that case, what I learned here is always to find people most directly related to the product potential interests and look for their ideas and thoughts. Refer to engineers when the product requires rapid shipping, present to product managers when KPI is the priority, and connect to users when usability is still an issue.