Redesign the Shared Space of Lark Suite

UI/UX Design


︎
Re-designing the shared folder feature of Lark Space.
This feature aims to provide more flexibility and capability to users on sharing and managing their files.







TIMELINE
2 weeks
June, 2019
METHOD & TOOLSHuman-centered design method,
Sketch, Principle
MY ROLEUser experience designer, Visual designer
TEAM Solo
( A work project collaborated with developer team and product managers.)





Preface

This project is a work project where the process used was a little different than an idealized UX Design Process. It began with a problem that needed to be fixed. The formative research were finished by the user researchers, and the tasks was mostly defined by management. In other words, this is more of an example of 'design in the wild' in a work environment

I included this project because it shows how I can take a complex project, break it into coherent steps, and make careful improvements of many small components to improve the overall experience and user satisfaction.




Overview

Lark suite is an enterprise collaboration tool of Bytedance. After the shared space was launched for half a year, the Shared Space's essential functions were well-developed. Users reported that they were not satisfied with the current design of the Shared Space and they wanted more flexbility organizing the files and collaborators.

Due to constraints, I chose to flexibly apply a human-centered approach throughout the process. In the end, I broke this complex project into three separate design challenges, detailed below. The final solution provides users an easier way to create a new shared folder, allows users to move folders/files around and adding one more collaborator identity to provide flexibilities, and avoids the feeling of insecurity by having a separated trash folder. 












︎



What is Lark?

Lark suite is an enterprise online working collaboration tool by Bytedance. It combines a multitude of essential collaboration tools in a single interconnected platform, including instant chat, calendar, creation , and cloud storage. 

In 2019, I worked at the Lark Creation & Cloud storage department, specifically worked for Space & Drive, as a user experience designer for about half a year. I was able to be the leader of many new features. The new shared folder is one of the most challenging but exciting projects for me because of its nature of complicated logic.




Situation

After the shared space was launched for half a year, the Shared Space's essential functions were well-developed. Users reported that the Shared Space felt messy and they wanted more flexibility organizing the files and collaborators.

I made a schedule and leveraged human-centered design methods to help me keep track of time and ensure the quality of my work.








Evaluate Requirements

Understand Current Situation and Design Goals

The shared folder function is to provide users the ability to share their files with others. Up until that point, these essential functions are well-developed. However, the click rate of the shared folder is relatively low. Therefore, the product manager and user research team conducted user interviews.

Users have the following confusions:
  • Without directly adding buttons on the home screen, enabling users to create new shared folders on the Home page. Enable users to change the identities of each collaborator when creating a new shared folder.
  • Provide different trash folders for shared folders so that all members can find and recover files that deleted from shared folders.
  • Adding one more type of identity, which is visitors, provides users more flexibility using the Shared Space.
  • Enable users to create sub-folder inside a parent shared folder. Users can share them with selected collaborators from the parent folder and those who don't have access to the parent folder.
  • Users who have access to edit the content of the folders can move the content to My Space or Shared Space.



<Current design of create folder in My Space>


<Current design of create a shared folder>





Competitive Analysis

Analyze existing solutions to get an in-depth view of the feature

Due to the time limitation in this project, I am not able to conduct user research. Instead, I did competitive analysis which covered 6 of our competitors. 

I designed four tasks to help me experience and evaluate all six competitors.
  • Create a shared folder
  • Add a new member to shared folder and change his/her level of access to the folder
  • Create a file and move it to another shared folder
  • Delete a file from a shared folder


Insights & Decisions:
"After considering our customers' complaints and performing this competitive analysis, I created this list of priorities.

  1. Without directly adding buttons on the home screen, enabling users to create new shared folders on the Home page. Enable users to change the identities of each collaborator when creating a new shared folder.
  2. Provide different trash folders for shared folders so that all members can find and recover files that deleted from shared folders.
  3. Adding one more type of identity, which is visitors, provides users more flexibility using the Shared Space.
  4. Enable users to create sub-folder inside a parent shared folder. Users can share them with selected collaborators from the parent folder and those who don't have access to the parent folder.
  5. Users who have access to edit the content of the folders can move the content to My Space or Shared Space.




Forming design challenges

Based on the insights above, I decided to break this into separate 3 design challenges with 6 key features.


Design Challenge #1
How might we make it easier for users to create a new shared folder while reducing the learning load?

Design Challenge #2
How might we provide more flexibility to users to help them manage folders and collaborators when using the shared folder feature while reducing fear of making mistakes?

Design Challenge #3
How might we provide more flexibility to users to organize their files and folders by allowing them to move files and folders?







︎
Design Challenge #1


How might we make it easier for users to create a new shared folder while reducing the learning load?








Ideation

Adding an additional point of entry

The original design only allowed users to create shared folders in the Shared Space. By adding a new point of entry, I wanted to allow users to create new shared folders no matter what page they are in. 

I came up with two ideas and rapid prototyped them to test with users. The results showed that most of the participants that I interviewed vote for the idea of which combining “create new folder” and “create new shared folder”. 

“The name ‘new folder’ feels like include the function of create new shared folder to me.” - Participant A


<Idea #1: Adding shared folder button under create>

<Idea #2: Combining create folders>





Iteration

After settled with this concept, I leveraged a low-fidelity prototype to help me conduct user testing and get feedback. Based on the insights from user testing, I made 4 major improvements for the user flow of creating a new shared folder.









Final design




Combining create folders
By combining the “create new folder” and “create new shared folder,” I made the process of creating new shared folders easier and more intuitive for users.










︎
Design Challenge #2


How might we provide more flexibility to users to help them manage folders and collaborators when using the shared folder feature while reducing fear of making mistakes?









Ideation

Adding new identity of collaborators

When users manage collaborators to their folder during the process of creating a new sub-folder, they are able to choose collaborators from the parent-folder and change their level of access. 


Deleting content from the shared folder

The old design allowed users with access to delete content from the shared folder, but the deleted file would move to the individual user’s personal Trash folder. By providing a place that shows all the deleted content from the Shared folder, people can manage their Shared Space more easily and without fear. 






Iteration

Create new sub-folder inside shared folder
Based on conversations with users, I noticed that the first iteration created difficulties when users managed collaborators because added a burden for users to remember each collaborator's identity. When I talked to the product manager, he told me that users are more likely to manage collaborators of a sub-folder by their identities in the parent-folder in this step. Therefore, I made a second iteration.

When I went through the design with the front-end developers, they noticed a technical issue. I came up with multiple solutions and communicated with them to see which one worked the best. Then we settled down with the last iteration.







Collaborators setting
On the other hand, based on users' feedback, users mentioned they felt confused about why they cannot make changes to some of the collaborators. By adding two short caption lines to separate two types of collaborators and giving a tooltip, users can understand it more intuitively.






Final design





Create new sub-folder

Owners and members of the shared folder are able to create new subfolders. They are able to remove visitors and members from the parent folder.








Manage collaborators

Owners and members can add new collaborators and manage their level of access, to provide users more flexibility when using the shared folder feature.







Separate deleted content

With a separate place to store deleted files and folders, users who have access in the shared folder are able to find and recover deleted content. Now, users do not need to worry about someone else in the folder accidently deleting files, and this provides users with a sense of security and flexibility.









︎
Design Challenge #3


How might we provide more flexibility to users to organize their files and folders by allowing them to move files and folders?










Ideation

Improving flexibility in moving files/folders in the Shared Space

When users want to move folders to a shared folder, they are able to see the collaborators in the righthand column, so that they will see an overview and make sure this is the folder they want to move their files to.





Iteration

Users mentioned they wanted a more convenient way to locate a folder. After negotiating with product managers, I decided to provide a search box and recent folders to users.







Final Solution

 




Move files/folders

Users are able to move files and folders around by using this feature. In order to make it easier for users to find the best destination, a search box, recent folders, and directory tree are provided.








Full user flow display

To make it clear for the design team to evaluate and for developers to understand, I organized the entire user flow. Not only that, but I also considered edge cases and came up with solutions for each.











<High-fidelity prototype overview>





︎



Results

Users reported they felt they had more control and found the product smoother to use after these changes. The ‘add more members’ feature and the design/ components were reused in many other products of the suite.



Takeaways

Design in the real-world can be very different from class projects

In the real-world, sometimes there are constraints that prevent moving through a full design process. Nevertheless, by understanding how to flexibly apply a human-centered approach it is still possible to greatly improve a product


My expanded breadth of knowledge was very helpful

Displaying words on top of a transparent mask would not work the way that I wanted it to, because the words would also be transparent. Luckily, I have learned basic programming knowledge so that I can understand the problem quickly. This experience helped me a lot in collaborating with front-end developers, and I noticed the importance of expanding my knowledge base and being a multi-disciplinary designer.