Redesigning Slack for AI
A walkthrough of my design journey for Slack assistant and calendar
My vision is to revolutionize workplace productivity by seamlessly integrating AI into Slack and calendar systems, creating an intuitive and efficient environment where communication flows effortlessly, tasks are automated, and users can focus on what truly matters.
The Process
Timeline
Disciplines
Responsibilities
Tools
Mar '24 - Oct '24
User Experience
Design
User Interface
Design
UX Research
UX/UI for Desktop
Prototyping
Figma
Research
Initial Problem Discovery
Desk Research
User Surveys & Interviews
Synthesis
User Persona
Ideation
Developing a Solution
Moodboard
Mockups
Final designs
Design System
Final UI Screens
Reflection
Post Designs Outcome
Challenge
Creating an AI-integrated Slack assistant and calendar app to streamline communication, automate tasks, and boost productivity.
Opportunity
Harnessing AI to revolutionize Slack and calendar integration, exploring tech possibilities and creating the best user experience.
PROCESS HIGHLIGHTS
Design challenge and responsibilities overview
BACKGROUND
Project Vision
User Pain Points
From the user interviews I was able to extract some key details, User often juggle multiple apps to ensure clarity in communication, summary of conversations, setting reminders, tracking tasks, scheduling, and integrating tasks with their calendar. Users face fragmented workflows, manual double-entry of information, and time-consuming processes. Below are some of the key functions that I have noted which can be reduced by the integration of AI in Slack.
Key frustration of an additional functionality
From the user interviews On thing that kept on repeating as a pattern from user to user is the lack of a functionality, the below were the statements I collected in short.
RESEARCH
Desk Research
RESEARCH
User Surveys
RESEARCH
Initial Problem Discovery
In today's fast-paced digital world, I've noticed how teams struggle with fragmented communication and inefficient task management. It's like we're all juggling a million things, and sometimes, we miss deadlines, coordination falls apart, and productivity takes a hit. I felt this firsthand and knew there had to be a better way.
So, I decided to take on the challenge. I wanted to create something that could bridge these gaps. The idea was to integrate AI into Slack and calendar systems. Imagine having a seamless and efficient platform where communication flows smoothly, tasks are automated, and we can focus on what truly matters. That was the dream.
With this project, I'm diving deep to understand the real pain points users face, exploring the immense potential of AI, and working on a solution that will revolutionize workplace productivity and enhance the overall user experience.
To gather insights for the AI-integrated Slack and calendar app, I started with comprehensive desk research. First, I explored existing literature, including academic papers, industry reports, and case studies, to understand the current landscape of AI in workplace productivity tools.
I then examined competitors’ products to identify strengths and weaknesses, noting features that resonated well with users and areas that needed improvement. This competitive analysis provided a benchmark for our project and highlighted opportunities for differentiation.
Next, I reviewed user feedback and ratings on platforms like app stores and forums, focusing on common pain points and user expectations. This user-centric approach ensured that our design and functionality decisions were grounded in real-world needs.
Additionally, I analyzed market trends and technological advancements to ensure our solution was both innovative and future-proof. This involved studying reports from leading tech firms and attending webinars and conferences to stay updated on the latest developments.
By synthesizing this information, I created a robust foundation for the project, ensuring our AI assistant and calendar app would effectively address user needs and stand out in a competitive market.
Below are 10 Questions and Answer which provided me key insights:
Question 1: How often do you find yourself needing to rephrase messages to ensure they're polite or clear?
Answer: "Almost daily. I spend a lot of time rewriting messages to make sure they come across politely, especially when reminding team members about tasks."
Question 2: How useful would it be to get a summary of meeting discussions automatically?
Answer: "Incredibly useful! I often miss parts of meetings and it takes a lot of effort to catch up by reading through long chat logs."
Question 3: Do you ever forget tasks or deadlines mentioned in Slack conversations?
Answer: "Yes, this happens quite frequently. An automated reminder feature that understands context from chats would be a game-changer."
Question 4: How often do you track tasks within Slack?
Answer: "Pretty often, but it gets messy. Having an integrated task tracking feature would really streamline things."
Question 5: How important is smart scheduling for your workflow?
Answer: "Extremely important. Coordinating meeting times is a hassle, especially when dealing with different time zones. Smart scheduling would save so much time."
Question 6: How beneficial would it be to integrate your task management with your calendar?
Answer: "It would be hugely beneficial. Right now, I have to manually input tasks into my calendar, which is tedious and prone to error."
Question 7: What challenges do you face with your current task management system in Slack?
Answer: "Tasks often get lost in the chat threads, and it's hard to track progress. An integrated task tracking system would solve this issue."
Question 8: How do you currently remind yourself of tasks mentioned in conversations?
Answer: "I usually set manual reminders or write notes, but it's easy to miss something. Automated reminders based on chat context would be much more reliable."
Question 9: Do you find it difficult to keep track of meeting details?
Answer: "Yes, especially when there are multiple meetings in a day. Having automatic summaries would make it easier to stay on top of things."
Question 10: How do you feel about using AI to enhance your Slack and calendar experience?
Answer: "I think it would be fantastic! Automating repetitive tasks and improving communication would definitely boost my productivity."
"I often miss important meetings because I have to manually enter them into my calendar from Slack messages. It would be so much easier if I could schedule and track all my events directly within Slack."
"It's really frustrating to switch between Slack and my calendar app just to check my schedule. An integrated calendar would save me a lot of time and help me stay organized."
"Coordinating meeting times with my team is a hassle. If Slack had a smart scheduling feature, it would be a game-changer for our workflow."
"I frequently lose track of tasks and deadlines because they're scattered across different apps. Integrating a calendar with task management in Slack would keep everything in one place and streamline my workflow."
"I sometimes forget to set reminders for tasks discussed in Slack conversations. An automated reminder system based on chat context would ensure I never miss a deadline."
Slack Without AI-Integration:
Rephrasing Messages:
Pain Points: Users spend significant time crafting and rephrasing messages to ensure clarity and politeness, which can be especially challenging during busy periods.
Alternative Apps: Users might use Grammarly or other writing assistants to rephrase and improve their messages.
Example: Sarah spends 10 minutes editing a message to her team to ensure it's respectful and clear, using Grammarly as a double-check before pasting it back into Slack.
Summary Generation:
Pain Points: Users need to manually summarize long threads or meeting discussions, which is time-consuming and prone to errors.
Alternative Apps: Users might use manual note-taking apps like Evernote or even Google Docs to jot down summaries.
Example: After a long discussion in a Slack channel, Alex manually types out a summary in Evernote to share with team members who missed the conversation.
Automated Reminders by Understanding Context from Chats:
Pain Points: Important tasks or deadlines mentioned in conversations can get lost in the stream of messages, leading to missed deadlines and forgotten tasks.
Alternative Apps: Users might rely on personal reminder apps like Todoist or set reminders in Google Calendar manually.
Example: During a team chat, John mentions a task due next week. Later, he has to manually set a reminder in Todoist to ensure he doesn't forget it.
Task Tracking:
Pain Points: Tracking tasks within Slack can become chaotic, leading to poor task management and potential oversight of critical tasks.
Alternative Apps: Users might switch to task management tools like Asana or Trello to track and manage tasks.
Example: Emma juggles multiple projects and uses Trello to organize her tasks, frequently copying details from Slack to her Trello boards.
Calendar Without AI-Integrated Features:
Smart Scheduling:
Pain Points: Scheduling meetings often requires going back and forth to find a suitable time for all participants, leading to inefficiencies and scheduling conflicts.
Alternative Apps: Users might use Doodle polls or calendar assistants like Calendly for scheduling.
Example: Setting up a meeting, Mike uses Calendly to find an available time for all attendees, which takes several steps of coordination outside of Slack.
Task Integration:
Pain Points: Tasks and events are managed separately, causing a fragmented workflow and making it difficult to stay on top of both.
Alternative Apps: Users often use task apps like Todoist and sync them manually with calendar apps like Google Calendar.
Example: Jane lists her tasks in Todoist and then manually adds due dates and deadlines to her Google Calendar, doubling her efforts to stay organized.
Meet Alex!
Role: Project Manager Company: Tech Startup
Location: Bangalore Age: 32
SYNTHESIS
User Persona
Background:
Alex has been working in the tech industry for 8 years, with a focus on project management.
Holds a degree in Computer Science and an MBA in Project Management.
Known for being highly organized and efficient, with a knack for keeping projects on track.
Goals:
To streamline daily tasks and enhance productivity.
To ensure clear and effective communication within the team.
To manage and track tasks seamlessly within a single platform.
Challenges:
Managing multiple projects and teams simultaneously.
Keeping track of numerous tasks and deadlines.
Ensuring that all team members are aligned and updated on project progress.
Juggling between different tools for communication, task management, and scheduling.
Rephrasing Messages
The function is accessed through selecting any text in the text field, ether with the pointer or by using Ctrl + A or cmd + A
The floater icon will appear and when clicked an additional popup will appear asking you how to further edit the text.
IDEATION
Developing a Solution
IDEATION
Moodboard
IDEATION
Low-Fidelity
IDEATION
Mid-Fidelity
IDEATION
High-Fidelity
IDEATION
Major Improvements + Design Decisions
Redesign Goals:
Conceptualization
Gathering Inspiration
Defining Key Elements
Assembling the Moodboard
Finalization
Maintaining Familiarity
Embedding AI Features
Integrating the Calendar App
Final Thoughts
Morning:
Midday:
Afternoon:
End of the Day:
User Research and Feedback Collection:
Identifying Key Features:
Navigation and Interaction
Design Decision (Color)
Creating the moodboard for the AI-integrated Slack and calendar app was a crucial step in setting the visual and emotional tone of the project. Here’s how I approached it:
The journey to developing a solution began with identifying the key pain points faced by users while using Slack. Through extensive user research and feedback, it became evident that managing tasks, scheduling meetings, and keeping track of reminders within Slack was cumbersome and inefficient. Users frequently had to switch between multiple applications to achieve these tasks, leading to fragmented workflows and wasted time.
Recognizing these challenges, I set out to create an integrated AI assistant for Slack. My goal was to streamline the user experience by incorporating features that would automate routine tasks and enhance productivity. Here’s how I approached the solution:
Conducted surveys and interviews to understand user pain points and preferences.
Analyzed feedback to identify common themes and areas of improvement.
Based on user feedback, I identified critical features that would address the pain points:
Rephrasing Messages: To help users craft clear and polite messages quickly.
Summary Generation: To provide concise summaries of long conversations and meetings.
Automated Reminders: To set reminders based on chat context, ensuring nothing gets missed.
Task Tracking: To assign, track, and manage tasks seamlessly within Slack.
Smart Scheduling: To find optimal meeting times and integrate them with the calendar.
Task Integration with Calendar: To sync tasks with deadlines, providing a cohesive workflow.
With a clear understanding of the pain points and identified features, I set the following redesign goals for the application:
Seamless Integration: Ensure that all features are seamlessly integrated within Slack, providing a unified user experience without the need to switch between multiple applications.
User-Friendly Interface: Design an intuitive and easy-to-navigate interface that simplifies task management, scheduling, and communication.
Enhanced Productivity: Enable users to focus on their core tasks by automating routine activities, such as setting reminders and generating summaries.
Contextual Awareness: Implement AI capabilities that understand the context of conversations and provide relevant suggestions, reminders, and actions.
Scalability: Ensure that the solution can scale to accommodate the growing needs of teams and organizations, maintaining a design system that merges with the current design system and language of the current application
By setting these goals, I aimed to create a solution that not only addresses the existing pain points but also elevates the overall user experience within Slack. The integrated AI assistant and calendar app would transform the way users manage their tasks, schedule meetings, and communicate, leading to a more productive and efficient work environment.
The first step was to define the overall feel and direction of the project. I envisioned a modern, sleek, and intuitive user interface that seamlessly integrates with Slack’s existing design language. The goal was to create a cohesive experience that enhances productivity without overwhelming users.
I began by collecting inspiration from various sources. This included:
Industry Leaders: Examining design elements from successful productivity and communication tools like Microsoft Teams, Asana, and Trello. This provided insights into what works well in terms of UI/UX and feature integration.
Design Platforms: Browsing through design platforms such as Dribbble, Behance, and Pinterest. These platforms offered a wealth of innovative design ideas and trends that could be adapted and incorporated into the project.
Competitor Analysis: Analyzing Slack’s competitors to identify strengths and weaknesses in their design approaches. This helped in understanding what could be improved and how to differentiate our product.
With a clear vision and ample inspiration, I started defining the key elements of the moodboard:
Industry Leaders: Examining design elements from successful productivity and communication tools like Microsoft Teams, Asana, and Trello. This provided insights into what works well in terms of UI/UX and feature integration.
Design Platforms: Browsing through design platforms such as Dribbble, Behance, and Pinterest. These platforms offered a wealth of innovative design ideas and trends that could be adapted and incorporated into the project.
Competitor Analysis: Analyzing Slack’s competitors to identify strengths and weaknesses in their design approaches. This helped in understanding what could be improved and how to differentiate our product.
With all the key elements defined, I assembled the moodboard. This visual representation captured the essence of the project, showcasing the color scheme, typography, imagery, and UI elements. It served as a reference point throughout the design process, ensuring consistency and alignment with the initial vision.
The finalized moodboard not only set the visual tone but also guided the overall design process. It ensured that every design decision aligned with the project’s goals of creating an intuitive, efficient, and visually appealing AI-integrated Slack + calendar app.
Familiar Layout: The first major decision was to retain the existing layout of Slack as much as possible. I understood that users are already comfortable with the current design, and any drastic changes might lead to confusion and a steeper learning curve. Therefore, I chose to embed the AI features seamlessly into the existing UI and UX.
Rephrasing Messages: I integrated the message rephrasing feature directly into the message input area. This way, users could easily access the AI assistant to rephrase their messages without navigating away from their current chat. This placement ensured that the feature was both convenient and non-intrusive.
User Demand: The integration of a calendar app was a crucial decision driven by user feedback. Nearly every user expressed the need for a built-in calendar to manage their schedules and tasks effectively. Recognizing this demand, I prioritized the calendar integration as a core feature of the redesign.
Automated Reminders: Automated reminders were designed to be contextually aware. By analyzing the chat context, the AI assistant could suggest setting reminders for mentioned tasks or deadlines. These suggestions appeared as subtle prompts within the chat, allowing users to set reminders with a single click.
Task Integration: To provide a cohesive workflow, I ensured that tasks assigned in Slack were seamlessly integrated with the calendar app. Users could view their tasks and deadlines directly on their calendar, allowing them to manage their time more effectively. This integration was designed to be intuitive, with tasks and events appearing as visually distinct elements on the calendar.
Consistent Visual Elements: To keep the visual experience consistent, I used the same color scheme, typography, and iconography that Slack users are familiar with. This helped in maintaining a cohesive look and feel, ensuring that the new features felt like a natural extension of the existing platform.
Summary Generation: The summary generation feature was incorporated within the conversation thread. Users could simply highlight a portion of the chat or click on a dedicated button to generate a summary. This approach allowed users to stay within the context of their conversation while leveraging the AI's capabilities.
Smart Scheduling: The smart scheduling feature was incorporated to address the pain points users faced while coordinating meetings. The AI assistant analyzed participants' availability and suggested optimal meeting times, reducing the back-and-forth typically involved in scheduling. This feature was accessible through a dedicated scheduling button within the Slack interface.
Task Tracking: For task tracking, I embedded a task panel within the Slack interface. This panel allowed users to view, assign, and track tasks without leaving the application. The design ensured that task management was streamlined and easily accessible.
Task Tracking: For task tracking, I embedded a task panel within the Slack interface. This panel allowed users to view, assign, and track tasks without leaving the application. The design ensured that task management was streamlined and easily accessible.
These major design decisions were guided by the principles of maintaining familiarity, enhancing productivity, and meeting user needs. By embedding AI features into the existing layout and integrating a highly-requested calendar app, I aimed to create a seamless and intuitive user experience that empowers users to manage their tasks, schedules, and communications more efficiently. The resulting design not only addresses the identified pain points but also elevates the overall functionality and usability of the Slack platform.
Automated Reminder by Understanding Context from Chats
As soon as Alex logs into Slack, the AI assistant greets them with a reminder about the morning stand-up meeting. The assistant picked up on a conversation from yesterday where Alex mentioned, "Let's discuss the new feature updates in tomorrow's stand-up."
Example Interaction: AI Assistant: "Good morning, Alex! Don't forget about the stand-up meeting at 9:00 AM. Yesterday, you mentioned discussing the new feature updates."
Task Tracking
Throughout the day, Alex tracks tasks using the AI assistant. Alex assigns tasks, sets deadlines, and checks progress within Slack.
Example Interaction: Alex: "Assistant, assign the 'UI redesign task' to Sarah and set a deadline for next Friday." AI Assistant: "Task 'UI redesign' has been assigned to Sarah with a deadline of next Friday."
Smart Scheduling
Alex has a meeting request from a client but isn't sure about availability. The AI assistant checks the calendar and schedules the meeting automatically.
Example Interaction: Alex: "Assistant, schedule a meeting with the client next week." AI Assistant: "I found an available slot on Tuesday at 2 PM. Meeting scheduled!"
Summary of the Day’s Activities
Before logging off, Alex asks the AI assistant for a summary of the day's activities.
Example Interaction: Alex: "Assistant, give me a summary of today's activities." AI Assistant: "Today, you attended a stand-up meeting, assigned tasks, scheduled a client meeting, and synced tasks with your calendar. Great job!"
Accessing the Calendar App
The Calendar app has been integrated to the side navigation bar without breaking
the layout and utilizing the already existing space.
Accessing the AI assistant
The Calendar app has been integrated to the side navigation bar without breaking
the layout and utilizing the already existing space.
Rephrasing Messages:
I integrated the message rephrasing feature directly into the message input area. This way, users could easily access the AI assistant to rephrase their messages without navigating away from their current chat. This placement ensured that the feature was both convenient and non-intrusive.
Summary Generation
After the stand-up meeting, Alex asks the AI assistant to generate a summary of the discussion for the team members who couldn't attend.
Example Interaction: Alex: "Hey Assistant, can you summarize today's stand-up meeting?" AI Assistant: "Sure! Here’s the summary: We discussed new feature updates, assigned tasks to team members, and agreed to review progress in the next meeting."
Rephrasing Messages
Alex needs to send a polite reminder to a colleague about an overdue task. Instead of crafting the message manually, Alex uses the AI assistant to rephrase it.
Example Interaction: Alex: "Assistant, can you rephrase this message? 'Hey, you haven't completed the task yet. Please do it soon.'" AI Assistant: "Sure! How about this: 'Hi, I noticed the task is still pending. Could you please complete it at your earliest convenience?'"
Task Integration with Calendar
Alex integrates the tasks assigned in Slack with the calendar app. The AI assistant syncs tasks with deadlines, making sure Alex stays on top of everything.
Example Interaction: Alex: "Assistant, sync all tasks with my calendar." AI Assistant: "All tasks have been synced with your calendar."
Meet Alex, a project manager at a bustling tech startup. Alex uses the new Slack AI assistant and integrated calendar app to streamline daily tasks.
The low fidelity screens are basic wireframes that outline the structure and layout of the interface. They include simple, monochromatic shapes to represent different UI elements like buttons, input fields, and navigation bars. These screens focus on functionality and user flow without any detailed design.
The mid fidelity screens add a bit more detail to the wireframes. They include placeholder text, basic colors to distinguish different elements, and more refined layouts. These screens start to hint at the visual hierarchy and user interactions, while still being flexible for adjustments.
The high fidelity screens are the polished versions, complete with final designs and interactions. They include actual content, brand colors, typography, icons, and detailed visuals. These screens offer a realistic representation of the end product, showcasing the final look and feel of the AI assistant in Slack.
When it came to making major design decisions for the AI-integrated Slack and calendar app, I aimed to strike a balance between innovation and familiarity. My goal was to introduce powerful AI features without disrupting the intuitive user experience that Slack users are accustomed to. Here’s how I approached it:
For the current layout, I've used the moodboard palette. However, color preferences for Slack are highly personal, so users have the freedom to choose whichever colors they like. Here's how to set your own colors: Open Slack, click your profile picture, select "Preferences," then go to "Themes" under "Appearance." From there, you can pick a pre-designed theme or create your own custom one using the color picker. Save your changes, and voilà, your new theme is applied!
IDEATION
User Journey
FINAL DESIGNS
Design System
Maintaining a design system for my AI assistant in Slack is an ongoing process. I start with regular updates, making sure to review and refresh components, interaction patterns, and visuals to keep everything current.
Documentation is key, so I keep thorough records of all elements in the design system, from branding to accessibility guidelines. This helps ensure that I know the standards inside and out.
FINAL DESIGNS
Final UI Screens
The final UI screens for the Slack AI project include a central Home Screen for easy navigation, a Conversation Interface for natural chat, a Notification system, customizable Settings, a Task Management screen to organize tasks etc.
Below is a view of how the standard interface of Slack chat will look like vs how it looks like when the AI assistant is enabled.
Below is a view of how the standard interface of the calendar tab vs how it looks like when the AI assistant is enabled.
Typography
Elements of attention
Calendar widget
Box containers
Iconography
The high fidelity screens are the polished versions, complete with final designs and interactions. They include actual content, brand colors, typography, icons, and detailed visuals. These screens offer a realistic representation of the end product, showcasing the final look and feel of the AI assistant in Slack.
REFLECTIONS