A Little Summary
Team
Tianhao He
Product Design Intern
Zen Cai
Product Designer
Trina Tran
UX Researcher
Tony Jiang
Product Manager
Bing Zhu
Design Manager
Skills
Product Thinking & Strategy
User Research
Brainstorming
UI / UX Design
Prototyping
Timeline
May – Aug '22
12 Weeks
Tools
Figma
After Effects
Lark
Brief
Under the circumstances that Lark was planning to expand further into the global market (especially the US), I was tasked to work on the Lark V-Next project and improve the user experience by looking into international customers' needs and adapting Lark's features to suit the remote-working trend in the new markets.
During the project's early exploration process, I proposed ideas including Lark's new user profile design and features like virtual team view. These proposals were shared with the key stakeholders in the company, made into the development pipeline, and will be used by millions of users across the globe in the future.
Virtual Team View
The New Way of Remote / Hybrid Team Collaboration
Virtual team view allows you to view your team's status and activity in just a glance and join the ongoing meeting or recurrent rooms easily.
02
01
Profile Redesign
Modular, Functional, Customizable
The new personal profile allows you to express yourself and connect with coworkers more efficiently using new features like customizable widgets and live avatars.
Background
As Lark prepares to enter the global market, we started by analyzing new characteristics the new markets may bring, which led us to one of the essential discoveries that may help further globalize our product: remote working. Due to COVID-19, more companies are implementing remote / hybrid working policies. This new working environment limits how co-workers can connect and communicate with each other.
Source from Here
Research
With the intent to discover what our customers need in this new working environment, we conducted both quantitative and qualitative research from our external client in the US, EU and APAC regions as well as our internal Lark and TikTok teams located in the states.
"I'm not sure what others are working on when working remotely, feel more isolated and anxious."
- Lark Product Designer
"This inconsistency of name and preferred name on foreign partners' Lark profile often causes awkwardness when working remotely."
- External Client
"The lack of teammate visibility and awareness results in greater barriers and frictions between teams."
- TikTok Product Manager
"Can we add a way for people to record the way their name is pronounced to their Lark profile?"
- External Client
"It is hard to know truly how busy someone is right now. Coworkers somehow feels less human."
- External Client
"Having better displays of colleagues information such as org chart and other info can help boost collaboration and relationship."
- ByteDance Employee
25%
related to personal profile, group chat customization
Besides the overall complaints regarding remote / hybrid working inconveniences, the quantitative research from our external clients also reflects how personalized experience and expression are vital during the period, as the primary communication channel further transitioned from face-to-face conversations to Lark: more than 25 percent of the feedback are related to personal profile / group chat customization.
Problem Statement
With both the quantitative and qualitative research in mind, we concluded the most prominent user problems are the following two: Co-workers feel less human, lack personality & personal connection and the lack of perception of co-worker's status, visibility & awareness
Problem 01
Co-workers feel less human, lack personality & personal connection
Without in-person, casual conversations and facial / visual communication, it is hard for co-workers, especially new onboardings, to get to know fellow partners, resulting in a silo'ed working atmosphere and lack of emotional connection. (This also includes missing basic personal information like name pronunciation or achievements, etc.)
Problem 02
No perception of co-worker's status, visibility & awareness
Compared to working on-site, where users can get their co-workers at a glance, remote working inhibits the users from receiving this information, resulting in inefficient and repeated communication—for example, getting to know whether others are in the office, or even asking when they are available for a quick chat or collab working.
The Mission
How might we create a more fulfilling and productive work environment by fostering human connections and improving co-worker visibility and awareness?
Opportunities
To identify how we can better address the users’ pain points, we revisited the existing Lark service and analyzed its strengths and weaknesses. Lark is a complex service that offers features such as chat, online doc, video conferencing, and more. After several rounds of brainstorming and discussing, we identified two key areas that we need to improve on.
Opportunity 01
Lark's Existing Integrations + Automations
Lark has always been known for its "All-in-one" concept. One of the key opportunities is to further integrate the with existing services like video conferencing, calendar, doc, and OKR. With more integrations and automation, users can see others' work-related information more efficiently and perform decisive actions with fewer steps.
Opportunity 02
Customization and Modularity
As there are already degrees of customization in existing Lark's IM features, new improvements can further make them more modular and customizable based on different use cases. Interactive and block-like content entry points can also enable quicker actions and extend their usage to new scenarios like group profiles or dashboards, etc.
Virtual Team View
What is it?
Virtual Team View is a configurable group app where remote / hybrid teams can plug into their Lark groups to solve their unique problems. The view is a visibility layer that displays, in real-time, group members' presence and activities — such as who is presently at work, people's status, ongoing meetings, or impromptu conversations — as if people are working in a virtual office together. The view provides coworkers with an enhanced awareness of the team's overall whereabouts and promotes more spontaneous collaborations.
Features
Feature 01
Coworker Presence and Status
Similar to coworkers showing up in a physical office, a user's profile picture becomes present in the Virtual Team View only when the user is online and actively working.
User Presence, presented by the profile picture and the ring, indicates how free or engaged someone is at the current moment.
User Status, presented by the icons or additional info beside the profile picture, indicates what the users are up to, e.g., custom Lark status, focusing app, or messaging.
Feature 02
Bubbles, Meetings Made Visible
Bubbles are visualizations of the group members' ongoing Lark VC meetings on the Virtual Team View. It allows remote teams to know what sessions are happening, for what topics, and amongst which colleagues. A Bubble could represent a call for a scheduled event or an ad-hoc sync-up, which can be created simply by dragging your profile picture close to the others. As long as a VC call is between the group members, it will show up on the view. A Bubble can also be set to public or private to indicate whether others can join in.
Feature 03
Pinned Bubbles, Virtual Common Spaces
A Bubble can be pinned to become persistent on the Virtual Team View even after the original call ends. This way, users can repurpose the original meeting into a "common space", where group members could drop in to chat whenever, such as:
- A project's coworking hub
Same project members can come in to collaborate and co-work whenever they want. - Team office hours
People can drop in to ask questions whenever the topic's PoC is there. - Watercooler
Co-workers can drop in to have lunch, socialize, while listening to music.
Explorations & Iterations
that we tried but didn't quite work...
Topic Room & Whiteboards
Since the current Lark group chat system already allows for the creation of group chats for individual meetings, introducing an additional layer of topic rooms that nested inside these group chats would significantly increase the service's complexity, user's learning curve, and the overall management costs.
Different Layout
We also explored various alternative layouts during the process, including a more structured column view and a hybrid version. Ultimately, we chose the freeform structure as it aligns with our aim to create a dynamic environment that imitates real office space for users and is more versatile across a range of OS and devices.
Events & Related Groups
We also tried to solve the issue of complex group chats by connecting the event-related groups to the primary group. This new group relationship enhances user accessibility and facilitates seamless connectivity across various groups. This idea is proposed as an standalone feature to the team.
Profile Redesign
What is it?
The new personal profile features customizable widgets that let users share their remote work preferences and personal details more effectively, and a personalized virtual avatar that can not only reflect their own appearance and sync with their Lark Status, but also foster more meaningful and engaging communication and connection with their coworkers.
Widgets
Overall Concept
What are Widgets?
Widgets are interactive content blocks that can adjust and adapt to various scenarios in Lark. By implementing the universal widget concept in Lark, we can enhance the customization capability in user profile or group chat profile / dashboard, and further improve the productivity, allowing users to execute actions faster without navigating to a separate page.
Feature 01
Timezone & Meeting Setup
With Remote Teams, you can also see your coworkers’ local time, working hours, and WFH status. You can also book their available time slots with one click using the Lark calendar integration, further increasing the communication efficiency.
Feature 02
Integrations with Doc, OKR, and More
Personalize your profile with Widgets to showcase your work style and goals. Whether you want to share your Personal Manual, OKR, or any other achievements, you can easily pin it on your profile and let others know how to collaborate with you more effectively.
Live Avatar
Overall Concept
What are Live Avatars?
Live avatars are integrations with the under-developing Lark XR platform, allowing you to create and customize your own virtual persona in any online environment. Whether working in mixed reality or collaborating with your remote team on Lark, live avatars will help you express yourself better and connect more deeply with your colleagues while providing more user-tailored experiences.
Feature 01
Avatar and Profile Image Customization
Create your own live avatar with ease and personalize it with our new customization panel, or choose from our wide range of new default avatars that suit your style and mood. Lark lets you express yourself in any way you want.
Feature 03
Special Events and Interactions
Besides sending quick reactions to your coworkers, when it’s a birthday, a holiday, or a work anniversary, your profile card will automatically get themed decorations. Your coworkers can easily send you greetings and see your avatar react through the new profile, enhancing the emotional connection within your team.
Also look at that grumpy little prototype we made with a little help from our XR team 😉
Feature 02
Sync with Lark status
You can also sync your live avatar with your Lark status to show your co-workers what you are working on or what is your current event. Live avatars make remote work more engaging and human.
Feature 03
Special Events and Interactions
Besides sending quick reactions to your coworkers, when it’s a birthday, a holiday, or a work anniversary, your profile card will automatically get themed decorations. Your coworkers can easily send you greetings and see your avatar react through the new profile, enhancing the emotional connection within your team.
Also look at that grumpy little prototype we made with a little help from our XR team 😉
Feature 02
Sync with Lark status
You can also sync your live avatar with your Lark status to show your co-workers what you are working on or what is your current event. Live avatars make remote work more engaging and human.
Feature 04
Custom Emoji Stickers
Lark will also generate a personalized set of emoji stickers based on your avatar, so you can express yourself more creatively and authentically in your chats and meetings.
Other Improvements
Improvement 01
Name Sound and Pronoun
Name sound and pronoun are now featured on your profile to facilitate cross-national communication with your colleagues. You can confidently pronounce your coworkers’ names without any doubt.
Improvement 02
Future XR Integrations
With the introduction of Live Avatar, more opportunities are brought to the platform for future XR integrations in different parts of the Lark ecosystem, like sharing contact cards and video conferencing.
Explorations & Iterations
that we tried but didn't quite work...
Different Profile Layout
We explored different layouts for the profile card, including how to arrange some of the major Lark features and how to display both profile picture and live avatar coherently. Big thanks to my previous colleagues in Beijing team who shared their design process and localization-related problems with me and helped me make effective design decisions faster.
Emoji Selector
We also explored more on how live avatars further provide emotional connections in Lark's IM feature, which includes larger live emoji stickers and this more fun emoji selector. Unfortunately, the lack of potential value and how it reaches beyond the overall scope led us to move away from this topic.
Other Live Avatar Usage
There are also other potential live avatar utilizations within the Lark Ecosystem we experimented with, including how the users' status and avatar can be represented within Lark Doc for better collaboration. These related ideas were also dropped as the V-Next project's main focus was on the foundation feature improvements of the Lark main app.
What I Learned
It was such an honor to join the Lark team for the second time, where I encountered new friends, amazing mentors, a new learning and working environment, and new challenges / opportunities. Working on a mostly design-initiative, exploratory project was quite an eye-opening experience for me, where I learned these key factors to keep improving as a digital product designer.
Lesson 01
Personal ownership & persuasive skills
During the internship, I realized the importance of the ownership of a project and the effectiveness of communication between different collaborators across different teams. Without ownership over the project idea, effective communication between coworkers, and some team management skills, the collaboration progress can be significantly hindered by unbalanced resources, long and ineffective chats, and emotional frustration.
Lesson 02
Scope management when designing
I also realized the importance of effectively managing my personal scope and maintaining a comprehensive perspective when reviewing the progress of a project. There's a fair bit of a tendency for me to focus on minor details, which impedes my ability to generate new ideas and make meaningful improvements on a larger scale. As a result, some of my designs may lack persuasiveness and require additional effort to bring them to a satisfactory level.
Lots of Love and Thanks ❤️
To my mentors, Ling, and team leaders Bing, for giving me the opportunity to learn and continuous guidance; To my amazing partners Zen, Tony, and Trina, for the amazing collaboration and insightful feedback; and to all the members at Lark Design - Global, for all the help and amazing experience! Hope to see you all in the future~
