After spending some time analyzing design system data, I recognized the need to explore new avenues for data collection to enhance our understanding of the system's usage and efficacy. With this in mind, I turned to Slack, a platform extensively used by our design team, as a potential goldmine of real-time, user-generated data.

The rationale was straightforward yet insightful: to identify which design components were frequently discussed among designers, potentially indicating areas of interest or difficulty. Slack channels, bustling with daily conversations about various design elements, offered a unique lens to view component usage and challenges faced by designers.

Methodology and Implementation

To achieve this, I developed a custom Slack bot, a tool adept at monitoring and capturing mentions of specific design components in Slack channels. The bot was programmed using methods like channels.history and conversations.history to efficiently track and count the occurrences of a particular component, such as a slider, in designated channels.

The bot functioned by listening for trigger events from messages mentioning the keyword, say 'slider'. Once such a message was detected in a channel where the bot was active, the instance was documented. To streamline this data collection and make it more organized, I integrated the Notion API. This integration ensured that every mention captured by the Slack bot was automatically logged into a Notion database.

Listening for the Mentioning of the Component

To get the number of times that a component was mentioned in a certain channel, that is where the bot came in to use. When a message is sent, an event is triggered by messages. Channels. The bot then listens for the the keyword, or slider in this case. If the bot has been added to the channel where the component was mentioned, the instance is documented. I used bolt for javascript to build the slack app. I saw several ways to build apps with slacks web api by reading their api documentation and viewing their Github repositories. 

app.message(async ({ message, say, client }) => {
  try {
    if (targetChannels.includes(message.channel)) {
      let mentionedComponents = [];

      allComponents.forEach(component => {
        const proximity = 3;
        const keywordPattern = keywords.join("|");
        const regex = new RegExp(`\\b(${keywordPattern})\\s+(\\w+\\s+){0,${proximity}}${component}\\b`, 'gi');
        
        const matches = (message.text.match(regex) || []).length;

        if (matches > 0) {
          componentMentionCount[component] = (componentMentionCount[component] || 0) + matches;
          mentionedComponents.push(component);
        }
      });

I programmed a function using the app.message event listener to trigger when messages were posted in Slack. This function checked if messages were from specified target channels. I used a regex-based method to fetch mentions of design components within a set proximity range, defined for each component in allComponents. The regex combined predefined keywords with component names, efficiently identifying relevant mentions. For each match found, the function incremented a count in componentMentionCount and recorded the component in a mentionedComponents array.

Looking Forward and Developing a Scaling Strategy

Recognizing the potential for wider usage, I planned to integrate a user input functionality. This change would enable stakeholders to customize the bot according to their specific needs, tracking varied components and channels as per their interest.

To include multiple components in the keyword search, I developed a structured dictionary that categorizes component names, enhancing the organization and accessibility of our data.

const componentDictionary = {
  Buttons: [
    "button",
    "button-group"
  ],
  Inputs: [
    "checkbox",
    "form-control",
    "input",
    "payment-card",
    "phone-input",
    "pin-code",
    "radio",
    "slider",
    "textarea"
  ],
  Pickers: [
    "file-uploader",
    "menu",
    "rating",
    "select"
  ],
  DateTime: [
    "datepicker",
    "time-picker",
    "timezone-picker"
  ],
  Navigation: [
    "breadcrumbs",
    "header-navigation",
    "link",
    "pagination",
    "side-nav",
    "tabs"
  ]
};

const allComponents = Object.values(componentDictionary).flat();

Thinking Systematically: Killing the Noise

To address the challenge of filtering out irrelevant information from the Slack discussions, I employed an innovative approach. I implemented a keyword proximity algorithm. This technique was designed to analyze the context in which a component was mentioned by evaluating the proximity of other words to the key term. The goal was to improve the accuracy of our data by focusing on relevant mentions that truly reflect the usage and discussion around each component.

const keywords = ["use", "add", "implement", "instance", "component", "create", "design", 
                  "update", "paste", "frame", "Figma", "bug", "broken", "\\?"];

Automating Documentation with Notion

As I planned to scale the system, the integration with Notion was crucial. It ensured that regardless of where the data originated — be it Slack conversations, Figma comments, or Asana tasks — it would all flow into a single, cohesive repository.

     await notion.pages.create({
        parent: { database_id: databaseId },
        properties: {
          'Date': {
            'type': 'date',
            'date': {
              'start': new Date().toISOString().split('T')[0]
            }
          },
          'Message': {
            'type': 'rich_text',
            'rich_text': [
              {
                'type': 'text',
                'text': {
                  'content': message.text
                }
              }
            ]
          },
          'ComponentMentionCount': {
            'type': 'number',
            'number': Object.values(componentMentionCount).reduce((a, b) => a + b, 0)
          },
          'ComponentNames': {
            'type': 'rich_text',
            'rich_text': [
              {
                'type': 'text',
                'text': {
                  'content': mentionedComponentNames.join(', ')
                }
              }
            ]
          },
          'ComponentCategories': {
            'type': 'multi_select',
            'multi_select': mentionedComponentCategories.map(category => {
              return { 'name': category };
            })
          }
        }
      });

To integrate my Slack bot data into Notion, I utilized the notion.pages.create method from the Notion API for creating new pages in a specified database. In this setup, each page corresponded to a data entry with several key properties: 'Date' captured the current date using JavaScript’s new Date().toISOString().split('T')[0], 'Message' stored the content of detected Slack messages, 'ComponentMentionCount' tallied component mentions using a summing function, 'ComponentNames' listed mentioned components, and 'ComponentCategories' held their categories in a 'multi_select' format. This approach allowed for an automated and organized transfer of data from Slack into a centralized Notion database