Design with Love & Empathy
Tencent Thumbnail.png

Tencent Qidian

Tencent Banner.png

Project Summary

I joined Tencent, China’s social media giant famous for Wechat (1 billion MAU) and QQ (800 million MAU) as a UX Design intern in April 2018. I was working with Tencent Cloud’s CRM platform called Qidian. The core products include cloud-based sales & service analytics platforms and a desktop customer messaging app that helps various companies to connect with their clients seamlessly.

During my internship, besides regular tasks assigned by my supervisor, I self-initiated a project to redesign the client’s profile section of the desktop messaging app. After two months, I presented my final design to the stakeholders and it was approved by the product lead. As a result, my redesign has improved customer service efficiency by 50% and updated the design system with a new component. This design is going to be implemented in the spring of 2019.

Project Demo

The Problem: The Faster Than Ever Customer Service Demand

Largely because of the influence of social media, today's customers expect an instantaneous response to their questions or complaints. That sense of urgency has transferred to a vital responsibility of customer relationship management (CRM) systems, requiring companies to have the right staff, the right strategies, and the right technologies in place to respond to customers in a matter of seconds.

When I was conducting the initial heuristic evaluation of the messaging app, I found that users can’t efficiently engage with their clients while updating client’s information with the profile section on the right side. All the information outside is not clickable, users have to click on the little “edit” button to open up a distracting pop-up form to fill in or update client’s personal information, and click “save” to exit. Therefore, user’s time was wasted.

(Before: Messenger Platform - Editing Client’s Info)
before popup.png

 (Before: Pop-up Form to Edit Client’s Info)

User Research: Contextual Inquiry

To improve the often dismal experience of using CRM software, our design team initiated a user study program to observe our customer support team firsthand using contextual inquiry. For every day in two weeks, two different designers were sent to sit along with customer service representatives for an hour, collecting and recording the real-time user feedback regarding features of the all-in-one customer messaging platform.

When I got the chance to collaborate with a customer support representative, in order to get a sense of how users are interacting with the client’s profile section, I asked her to have the users to update a piece of their client’s information through the platform, providing 30 seconds only, and record the time for them to finish the task and every question they asked during the whole process. To our surprise, we found that users, especially first-timers, usually take much more than 30 seconds to complete this seemingly simple task. There were a variety of confusion arise as users were interacting with the client’s profile section, such as:

“Where is the company/position label located?”

“How can I add multiple contact information?”

“Why should I open up a large form each time when I just want to add one piece of info?”

We found that:

  • Over 70% of the first-time users recorded ignored the edit icon firsthand and attempted to click on the information directly to edit it, obviously, they failed.

  • Even for experienced users who have used the profile section for a while, half of them could not complete the task given the 30 sec time constraint.

Competitive Analysis: The B2B CRM Market

At the same time, I started a competitive analysis by researching trending enterprise CRM platforms with messaging feature on the market, including Salesforce, Zendesk and Intercom, by focusing on their messaging experience and client profile sections of their messaging interfaces. I found that most competitors use an in-line auto-saving client profile section, allowing companies to quickly update clients’ information, without worrying about saving it by opening up a form and saving it.


Based on the insights from our research and mentored by a group of senior UX designers, I initiated an analysis of current user flows of the messaging experience. We found that currently it took users 2 to 3 clicks every time they want to edit clients’ information, especially when they want to add contact info. Also, opening up the pop-up form could significantly distract user’s attention and interrupting their engagement with clients.

Scenario: a client had provided his mobile phone number and employer information during the chat and the company wanted to promptly update his profile while keep chatting with the client.

User Flow (Before)

User Flow (Before)

To save users’ time, I came up with the idea of an embedded form, which contains all the current client’s information and automatically save every change for users.

User Flow (After)

User Flow (After)


I started the initial sketch to incorporate in-line editing and auto-saving for client profile in the messaging interface.

(Embedded Form)

(Hover - Edit - Auto-save!)

The Challenges

However, during the next week’s design critique, when I proposed my initial wireframes to fellow designers, I received concerns about abandoning the current traditional form structure. Some designers were worried about that without the save button, users would no longer receive explicit instructions to save their data and would end up expecting that they haven’t committed to anything.

Another concern was about the size of the new smaller embedded form, in which the information is limited to a certain extent depending on the size of the messaging interface. However, with the previous pop-up form, companies were able to add as much client’s information as they want.  


Facing all the feedback and challenges from the design critique, I spent about a month researching and iterating this project. After consulting the product managers a few times, I confirmed with the design team that the main user goal here is to quickly editing client’s information while chatting with them, and the priority lies in the efficiency rather than the security of information. Therefore, it’s proper to use in-line editing here to save users’ time and effort.

On the other hand, to solve the space issue brought about by the embedded form, I collaborated with product managers and back-end software engineers to analyze the most frequently used client’s information, such as first and last name, phone number, and location, and sort them by priority.

Final Deliverable

My final design displays these most frequently used info in the embedded form no matter if they are filled or not, and have the other less used info collapsed to save space for other sections in the messaging interface. Once users input the other info, such as employer name and position, they will automatically display outside for easier editing. Before I created the final demo, I also advocated the benefits of using in-line editing in the messaging interface to the developers and they agreed to take extra time to develop this new feature.


On my last day of internship at Tencent Cloud, I presented the entire design process and my final deliverables to the stakeholders, including the CEO, the design lead, and the product lead etc.. They approved the final design and agreed to incorporate inline editing and auto-saving to our current design system.


This was my first time to work as a UX design intern in such a large design team (20+ designers). Compared to smaller design teams, I’ve experienced the ease to design with an established design system and the challenge to break it. It is necessary to always design based on existing components in the current design system to maintain consistency. However, it’s also vital for UX designers to always question ourselves before execution: “Is there a better way other than to use the existing components to maximize usability and benefit the users?”. Customer is the front and center. Sometimes it’s ok to advocate new components to update the design system.

Because the business goals and needs vary from enterprise to enterprise, designing experience for B2B products can be way more complicated and challenging than for 2C products. Therefore, before designing every feature, it takes UX designers and researchers extra efforts to analyze and define user needs rather than simply imagine based on our own experience.

The Team & Culture

Besides weekly design sprints and meetings, we had a monthly story & skill sharing session with design teams from other companies. In June, we invited InVision Design Lead Pablo Stanley to share his experience in leading a successful remote design team.