ByteDance Lark Mindnote Redesign

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.

My Contribution

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?

Identify Opportunities

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?

current situation

- Quotes from forums on the Internet

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

Challenge

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

RESEARCH APPROACH DETAILEDS

■ What are Lark Mindnote user demands overall?

Mindnote does support a node comment feature, but it has disappointing restrictions in the current version.

To better understand what the Lark users are demanding from its integrated mind map feature, I conducted a series of user interviews to frame their key needs.

I interviewed 10 people who are or were a Lark mind map user. I found that:

All of participants indicate that cloud collaboration is a core function of Lark. Other built-in Lark tools should be optimized aimming at improving the overall collaboration experience.
5 out of 10 indicate that a more flexible and intuitive real-time communication experience is in demand.
8 out of 10 have experience in using mind map tools to build information structure for teamworks, while most of them suggest that they want to improve presentation experience.
6 out of 10 think that Lark mind map templates are limited. They want more flexible and dynamic templates to start their framework productions.

■ what are the Pros and cons of Similar products on the market?

I conducted a competitive analysis targeting the existing products to learn what users are looking for when they are using the mind map feature.

I found that:

The Lark mind map current editing tools are too basic comparing to other similar products in the market.
One key feature that all similar products are trying to integrate is the presentation mode for collaborating and sharing.
All similar products emphasize the real-time flexible collabroation experience through different methods, such as commenting, voting, drawing, adding stickers, or platform interactions.
All similar products are tying to support and simplify management experience of complex mind maps. Some provide templates in different types or a Zen mode for viewport isolation.

Those oppotunities are crucial factors improving user experience for the Lark mind map feature. The overall design direction is to add new tools to improve mind map management and collaboration experience correspond to existing Lark design guideline and user workflows.

■ What are opportunities along the lark mindnote user journey?

To better guide my design focus and identify potential opportunities, I further synthesized the interview results and came up with the following user journey map:

Improve remote Mindnote collaborative experience.

Research to Insights

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?

primary User Painpoint

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.

■ How to support formal presentation?

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.

■ can we integrate presentation Views into the Comment feature?

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.

■ Add Zen Mode to the Lark Mindnote.

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?

Secondary User Painpoint

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.

■ What should the comment Feature be formated?

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.

■ What Should the comment interactions be?

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.

Takeaways

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.