B2B Instant Messaging App Personal Data Masking – XXL | UI UX Designer

B2B Instant Messaging App Personal Data Masking

posted in: Insights, UX | 0

When we are designing for B2B products, we always need to keep an eye on both business objectives and end-users objectives. If you focus only on what the business wants, you risk building an organization-centric experience that might serve only one client, not all of your customers. Even if you manage to achieve your goals in the short run, they’ll fail in the long run.

In this post, I’m going to talk about when I was designing a B2B product at Code Free Soft, how did I leverage design strategy and user testing to balance between business objectives and end-user objectives.


Code Free SoftIT, SaaSAndroid, iOS Mobile app UIUX design, Web app UIUX design
May 2015


DragOnce IM (instant messaging) app was developed in 2012 when Slack hasn’t dominated the workplace communication market.

As more and more Hong Kong SMEs enthusiastically integrated DragOnce IM into their day-to-day functions, some of our clients raised concerns about confidential conversion disclosure via our app. 

Business Objective v.s. User Objective

As a business messaging app buyer and corporate employee, 

I would like to see current employer’s staff id embedded into chat room page so that once the some confidential conversation screenshots got disclosed online, I can trace back to know which staff has done the screenshots.

As a business messaging app user and corporate employee, 

I don’t want to be aware that my staff id has been embedded into the chat room page so that I won’t feel too stressed to use the app.

Translated High-Level Requirements

Every chat room conversation page should be able to reveal the current staff ID, but the end-users should not be aware of this information. (Staff ID supports digits only)

Key Challenges

  1. We need a digit encryption solution that has low awareness but high readability. The employee can easily recognize the staff id but the employer won’t be aware of the special pattern.
  2. We need to embed the staff id into the conversation screen in a way that it wouldn’t be covered by different chat room UI components.


Our initial solutions used barcode, morse code, and matrix grid (Fig 1). None of them had low awareness in our gorilla testing. After several rounds of technical opportunity exploration with engineers, we decided to go with some customized symbols.

Fig 1

Our final solution (Fig 2) used geometrical symbols to represent 0-9 digits and a separator.

Fig 2

Our system translated the current staff ID into a customized chat room background with these symbols. To make the background more meaningless, I designed two symbols to represent the same digit (Fig 3), so that a ten digits staff id can be translated into 1024 variations of the background pattern.

Fig 3

During our pilot test with 20 end-users, none of them had noticed or questioned on this new chat room background. When asked about the first impression of the background, 12 of them considered it as a random background pattern. Our client acknowledged this elegant solution has finally addressed their business concerns.


  1. Business goals can never be achieved if a product fails to achieve user goals.
  2. Evidence-based testing can navigate through uncertainty and help shaping a better user experience.

more details about this B2B app >>