User onboarding & team formation

For data security, I have omitted confidential and private information from this project. All the data in this project belongs to me.

ByteDance and Lark logo lockup separated by a dot
Three phone mockups showing the Lark inbox after onboarding

Overview

Lark is a collaborative office suite designed for business management and communication. Launched in March 2019, this suite struggled to keep pace with increasingly diverse and rapidly growing user needs. In 2021, Lark's onboarding phase was challenged by fundamental usability and data security risks.

My role

As a UX designer, I worked cross-functionally with the development, UX content, and product teams to streamline and optimize the Lark onboarding process across platforms. I participated in end-to-end product development, from research to iterations, from pain points to user feedback, and from ideation to the final product.

Scope
SaaS
Team
Engineer team
Data team
Product manager team
Design team
Form
Cross-platform
Mobile & web apps
Duration
8 weeks
Collage of Lark's chat, docs, calendar and video-call surfaces
  1. 01

    User insights & ideation

    I partnered with two product managers and one data analyst to uncover insights and findings that addressed pain points in the user journey.

  2. 02

    Localization strategy

    I designed new features to face the challenge of cut-throat competition and prevent potential data risks.

  3. 03

    Scope definition

    I defined core problems and built prototypes to share UX strategy and design principles, spread ideas further, and achieve alignment among teams.

  4. 04

    Design execution

    Our team developed six different devices. I proposed user journey maps and wireframes. I was specifically in charge of mobile and web app interfaces.

  5. 05

    Business & design balance

    I drove decision-making with product management partners to balance achieving business goals, providing a positive user experience, and gaining buy-in from stakeholders.

  6. 06

    Proactivity & leadership

    I prioritized and negotiated content strategy and design decisions for launch and beyond. I also coordinated the project timeline to ensure we met our milestones.

Impact

The onboarding redesign drove 45% higher conversion and 36% more engagement

Through qualitative and quantitative research, we defined the problem, iterated on the wireframes, and developed the final design through cross-team collaboration. Here are our overall achievements and impact:

18
one-on-one interviews
6
expert interviews
3000
surveys
11
weekly component syncs
6
cross-team syncs
12
user testing sessions
45
% increase in conversion rate
36
% increase in product engagement
30
% increase in safety perception
Lark signup verification step with a six-digit code entry card
Lark add-team-member dialog offering email invites and a QR code
Lark desktop login screen with email field
Lark desktop Add Team Member dialog with the team-code option open
Lark login screen with email entry
Lark desktop quick-add menu listing new group and other shortcuts
Final Lark sign-up step asking for the user's name
Lark Add Team Member dialog with email invite and a phone-invite tooltip
Lark desktop inbox on first launch with only bot and self conversations

The challenge

The conversion rate from new users to active users is lower than expected, as users do not understand how to make full use of the Lark office tool

As a next-generation collaboration suite, Lark differs from other office tools in methods of use, organization charts, and potential goals. However, the conversion rate from new users to active users is lower than expected, as users do not understand how to make full use of the Lark office tool.

Flat gray illustration of four people standing in front of chat bubbles and profile cards

The approach

Mapping out the user journey and bandwidth through cross-team collaboration

At the outset of this project, we did not have a clear mission or pre-existing goal for the design of the team onboarding process. Therefore, I partnered with data analysts, user researchers, and product managers at different phases to embrace the evolving and changing user needs within the onboarding process across user registration, function exploration, member invitation, and team formation. Below is our research and design process.

Diagram pairing a four-step team onboarding loop with a five-stage design process timelineExperience map across registration, feature exploration, member invitation and team formation
Chapter cover reading "How might we speed up the login process"

Discovery 01

A time-consuming process detracts from its user-friendliness

We conducted customer and market research to drive our planning phase. The key insights that define the pain points in the registration process are:

Chart headlined 37.3s versus 121.4s comparing a competitor's average sign-up time with Lark's
Long registration time — Market research shows that the average registration time of DingDing, one of Lark’s benchmarks, is 37.3s. However, our backend data shows that our users need 121.4s to complete registration.
Flat illustration of a person waiting beside an oversized phone showing a loading graphic
Privacy concerns from users — In customer interviews, users expressed concern that the platform was collecting irrelevant information, such as gender, age, and personal interests, with one user saying, “I feel exposed, and that makes me comfortable.”

Design

A faster, more accessible and user-friendly design

New Lark sign-up flow shown across five desktop screens and four mobile screens
Lark signup verification step with a six-digit code entry cardLark desktop login screen with email fieldLark login screen with email entryFinal Lark sign-up step asking for the user's name
Chapter cover reading "How might user benefit from feature exploration"

Discovery 02

Users used to skip the feature tour

After logging in, users saw eight pages of illustrations in Lark’s previous feature tour. However, users did not want to spend time reading through pages of instructions, so they chose to skip this section.

To verify my assumption, I asked the data team to analyze data from the feature guidance step and visualized the results: fewer than 10% of users viewed all eight pages of instructions.

Pie chart splitting feature-tour behavior into skipping on page one, skipping later, and reading through
Pie chart showing most users rely on a single Lark functionPie chart of most-wanted Lark features

Solution 02

Anticipate user needs before starting the tour

With insights from competitor analysis and expert interviews, I determined that guiding new users through their first use of the platform would be a better strategy for Lark. Then, with further research, I applied personalized contextual guidance to the user experience to make it less noisy but more engaging.

Radar chart scoring a solution on usability and four other axesPyramid mapping retention against the guidance strategy for each tier of engagement

Conduct A/B testing to ensure a successful outcome

To ensure that this design strategy could be successfully applied to our platform, I also conducted an A/B test with assistance from the product management and business development teams to support our assumption. Finally, I made the final design decision based on the expected results of the test.

Before: only a small blue wedge represents users who read the onboarding instructionsAfter: a large blue slice represents users who read the onboarding instructions

A provocative, enlightening, and efficient design

Adapt an appropriate guide for each main function, so guidance arrives in context instead of as an eight-page tour up front.

Map of Lark onboarding touchpoints connected by dashed lines
Chapter cover reading "How might user get invited under monopolistic competition"

Discovery 03

Industry competition blocks user invites from other platforms

The rapid growth of Lark sounded an alarm for other business platforms in China, such as WeChat Work (Tencent) and DingDing (BABA). Those companies started acting to hinder Lark’s expansion — they blocked the spread of Lark’s invitation links on their platforms. The outdated method of member invitation exacerbated the downward trend in new users joining.

Illustration of a hand-drawn 404 over a broken chain linkIllustration of a person standing between two phones branded ByteDance and TencentFlat illustration of a person holding two large keys in front of a locked safe

Solution 03

Explore appropriate and popular methods in the Chinese social networking ecosystem

I started with a minimum quality bar to enable user invitations in all contexts. In this case, we curated several ways to distribute member invitation resources:

Fan chart ranking invitation channels by reach

With a clear information structure based on the penetration rate for each method and information density, we have developed seven different design sketches for team member invitations

Wireframe explorations of Lark's Add Team Member dialog

Design 03

A guaranteed, diverse, and inclusive design

Six states of Lark's final Add Team Member dialog
Eight Lark mobile screens covering joining a team by code or QR and upgrading a personal account

Final design