UX/UI • User Research • Design Systems
FocusFlow on Microsoft Teams
Redesigning the notification, search, and chat features of Microsoft Teams to offer tech professionals a more customizable and efficient communication system that minimizes distractions and enhances access to past conversations, ultimately boosting productivity and workflow.
Role
UX/UI Designer
Duration
Jan 2025 - Mar 2025
Team
Julie Li
Cecilia Lin
Leona Lai
2 Stakeholders
Tools
Figma
Figjam
Canva
Skills
User Research
Interaction Design
Design Systems
OVERview
Context
Enhancing Communication and Focus for Tech Professionals
"FocusFlow" is a redesign of Microsoft Teams' notifications, search, and chat features to help tech professionals communicate more efficiently. The goal is to reduce distractions, make it easier to find past conversations, and give users more control over their notifications. With these changes, FocusFlow aims to improve productivity and make workflows smoother for people who need to stay focused while managing team communication.
Problem
Lack of a customizable notification system and inefficient search and chat features
The core problem in Microsoft Teams is the lack of a customizable notification system and inefficient search and chat features, which result in distractions and make it difficult for tech professionals to stay focused and quickly find past conversations.
SOLUTION
Simplified and Customizable Search, Filter, and Notification Features
Final Solution:
To solve the main problems in Microsoft Teams, we redesigned the search, filter, and notification features to make them easier to use and more customizable.
Search and Filter Updates:
The search bar is now built into the chat window, so users don’t have to switch between windows. This reduces clutter and helps users stay focused.
The filter button is now larger and easier to find. Users can customize their filters by date, person, or topic, making searches more flexible. A pop-up search window lets users refine their searches without leaving the chat.
Notification Improvements:
A snooze pop-up feature allows users to quickly mute notifications, with the option to mute until meetings end.
The notification page now includes focus modes (like Work or Deep Focus) that users can customize to manage notifications better.
Clear labels help users understand the difference between snooze and mute options. Notifications can also be customized directly from the pop-up, making the process faster.
Glimpse of Final Solution
PROCESS
So, how did I get there?
Research
What are the needs of our stakeholders?
Our goal is to understand the challenges that tech professionals with management responsibilities face when using multiple software tools. These professionals often work with many apps at once, which can be frustrating and inefficient.
Client Interview
We conducted interviews with Daniel and Vikram via Zoom. During the interviews, we asked both open-ended and structured questions to understand the tools they use, their tasks, and the challenges they face. These tools included Microsoft Teams, ServiceNow, CMS, Figma, and VS Code. The goal was to identify their pain points and find ways to improve their workflow.
Stakeholders
Daniel Michel
IT Project Manager at UCSD
Vikram Menon
Lead Software Developer at Siemens Digital
Pain Points
ServiceNow: Problems managing external users and assigning tickets.
Teams: Lack of control over notifications, frustrating updates, and poor search functionality.
Outlook: The new emoji reactions feature is unnecessary.
CMS: The Link Checker tool is unreliable.
Stakeholder wanted...
Better integration between tools.
More control over notifications in Teams.
More reliable features in ServiceNow and CMS.
Pain Points
Figma: No way to deep link to specific parts of a design, and the interface is too cluttered.
Teams: Limited customization, poor search functionality, and unpredictable behavior.
VS Code: Needs more customization options for better user experience.
Stakeholder wanted...
Deep linking and simplified interface in Figma.
Better search and customization in Microsoft Teams.
More flexibility in VS Code.
Personas
We created personas to reflect the needs and challenges of our stakeholders, both of whom are tech professionals with management roles. These personas help us better understand their pain points and workflows, guiding the design of our solution.
Persona 1: Eunice
Persona 2: Allan
Competitive Analysis
After conducting user interviews, we identified that both of our stakeholders use Microsoft Teams and face challenges with it. Based on this feedback, we focused our competitive analysis on Microsoft Teams, comparing it to Slack and Google Chat to understand their strengths and weaknesses. This analysis helped shape the design of our project to better address these issues.
Competitive Analysis Chart
Microsoft Teams offers strong Office 365 integration and solid communication tools, but its complexity and limited customization hinder smooth workflows, with issues in navigation, search, and notifications affecting productivity. Slack provides better customization and a user-friendly interface, but its cluttered layout and lack of task management make it less efficient for larger teams or complex workflows. Google Chat is simpler but lacks the necessary features and scalability for more complex projects, making it less suitable for growing teams.
Based on the stakeholder interview results, personas, and competitive analysis, we decided to focus on improving Microsoft Teams. This tool was commonly used by both stakeholders, and they highlighted several challenges that we aim to address in our solution.
Problem Statement
Tech professionals struggle with Microsoft Teams’ constant interruptions, poor search functionality, and lack of customization, which disrupt their focus, hinder productivity, and make it difficult to efficiently manage tasks and reference past conversations.
Solution ideation
Creating user flows to visualize the features
Based on stakeholder interviews, we identified key pain points around managing notifications and searching for information. To address these challenges, we focused on Notification Management and Search Optimization. We created UX flows for both, aiming to give users more control over notifications and make searching quicker and easier.
Notification Management Flow
The notification UX flow allows users to customize notification settings to reduce distractions and stay focused. Features include muting chats, prioritizing notifications, snoozing them for set times, and selecting modes like Focus, Relax, and Do Not Disturb. This flow helps users, like Allan, manage interruptions more effectively, improving focus and productivity.
Notification Management Flow
Search & Chat Optimization Flow
The search UX flow makes finding messages, conversations, or team members faster. Users can search by keywords, phrases, or people, with real-time results and filters to refine results. Clicking “Find More Results” or pressing enter leads to a detailed search page. This flow improves search efficiency, addressing Eunice’s struggle with Microsoft Teams' cumbersome search.
Search & Chat Optimization Flow
Design Sketches
Sketching wireframes
After defining the UX flows for notifications, each designer sketched wireframes to explore both search and notification features. We created 10 UI concepts for the notification flow, focusing on two distinct ideas to visualize different approaches. This process helped us refine the design by identifying what worked and combining the best elements.
For my part, I focused on the notification management flow, sketching five screens to explore various ways users could easily customize and control their notification settings. By iterating on these sketches, I identified the most effective layout and features to enhance the user experience.
Our competitive analysis also played a significant role. We drew inspiration from Google Chat’s sticky chat window for the search flow and Slack’s customization options to improve the notification experience, ensuring a more user-friendly and competitive design.
Sketches on opening the notification pop-up
Drafting lo-fi mockups
After creating the UI sketches, we transitioned into developing low-fidelity prototypes to bring our ideas to life and explore the functionality of the key features. The sketches provided a solid foundation for visualizing different approaches, and the Lo-Fi prototypes allowed us to refine the design by focusing on user interactions and flows.
For the search and chat feature, the Lo-Fi prototypes focused on ensuring that users could quickly find relevant results without disrupting their current chat experience. We integrated a persistent pop-up chat and enhanced the dropdown search menu with advanced filtering options to allow users to multitask efficiently. In parallel, I also created Lo-Fi prototypes for the notification management flow, emphasizing simplicity and customization, such as snooze, mute, and work mode settings, to help users manage notifications during meetings effectively.
These Lo-Fi prototypes provided an opportunity to test and iterate on our designs, ensuring that we met the needs of our stakeholders and stayed true to the goals set in the initial UX flows.
Notification Management Lo-fi Drafts
Search & Chat Optimization Lo-fi Drafts
Design Iterations + Usability Testing
Key Design Decisions
Based on insights gathered from user testing with both low-fidelity mockups and high-fidelity prototypes, we made several key design decisions to improve the overall user experience and address pain points.
Improved Navigation and Filter Integration
We initially designed a filtering tool that focused on customizable filters and file types. The goal was to allow users to:
Filter by content, people, dates, and files.
Understand which filter types users engaged with the most.
Our mentor, Thoa, identified navigation confusion and clutter caused by the overlaying filter panel, leading to a redesign with collapsible panels and improved search results navigation for a more integrated user experience.
Iteration 1
Navigation Issues: Users were confused about how to access the search results side panel, which made the experience feel disjointed.
Overlaying Filter Panel: The filter panel was covering the chat interface, causing important information to be hidden. This made the user interface feel cluttered and difficult to use.
Iteration 2
Collapsible Panels: We redesigned the filters into collapsible panels for each category (e.g., content, people, dates). This allows users to open and close filters as needed, keeping the chat visible and organized.
Less Obstruction: The new design ensures that the filter options don’t block the chat, allowing users to focus on both their conversations and the search results.
Improved Layout and Panel Collapse Feature
We initially designed a layout with three panels to allow users to:
Customize their search experience with a flexible layout.
View the search results alongside the current chat for a seamless multitasking experience.
User testing revealed that users were confused by the three-panel design and desired the ability to collapse unnecessary panels. As a result, we redesigned the layout by adding an arrow button to collapse the left chat panel, allowing users to:
Focus only on the chat and search results for a cleaner interface.
Easily expand and collapse the chat panel with a simple click for better control and flexibility.
Iteration 1
Confusion with Three Panels: Users were unclear about how to use the three-panel layout, leading to a disjointed experience.
Unclear Layout Adjustments: Feedback revealed that users were unaware of how to resize or collapse panels, as there was no visible indication for these actions.
Iteration 2
Intuitive Collapse Feature: The addition of an arrow button makes collapsing the chat panel more obvious and easier for users to control.
Improved Focus and Flexibility: Users can collapse the chat panel to focus on search results, and reopen it with a click, reducing clutter and enhancing layout flexibility.
Flexible Layout Control: Users can easily reopen the collapsed chat panel by clicking the chat button, providing more flexibility and control over the layout during searches.
Simplifying Notification Management with Pop-up Customization
We initially designed a notification management feature with basic mute/unmute and snooze buttons on the main page to allow users to:
Quickly manage their notifications without navigating away from the main screen.
Have immediate control over their settings with minimal interaction.
User testing revealed that users found the settings overwhelming and unclear, especially regarding the modes. Some users also desired a more streamlined approach. As a result, we redesigned the feature by introducing a small pop-up for essential settings, allowing users to:
Quickly mute all notifications with one click for simplicity.
Learn about the modes through a hover-to-learn feature, providing brief descriptions of each mode for better clarity.
Access the most important settings without feeling overwhelmed by too many options.
Iteration 1
Overwhelming Settings: The main page had too many settings, making it hard for users to quickly find what they needed.
Lack of Clarity: Users struggled to understand the purpose of each mode without clear explanations.
Limited Customization: The basic mute/unmute and snooze buttons did not offer enough flexibility for users who wanted more control over their notifications.
Iteration 2
Simplified Experience: The pop-up removes unnecessary settings, offering only the most essential notification options.
Increased Clarity: Hover-to-learn descriptions help users understand the different modes, making the interface more intuitive.
Enhanced Customization: The new design offers users more control over their notifications in a more user-friendly and less overwhelming way.
Enhancing User Understanding with Hoverable Info Icons
I initially designed the notification management pop-up with basic mute, unmute, and snooze options to simplify user control. However, user testing revealed that the settings felt unclear for some, particularly when it came to understanding the different modes and their functions.
To address this, I decided to add hoverable info icons to provide users with:
On-demand explanations of the different settings and modes, offering clarity without overwhelming the user interface.
Easy access to feature context, helping users understand the functionality of each option with a simple hover action.
Iteration 1
Lack of Context: Users had no clear understanding of what each setting did, making it difficult to configure the notifications appropriately.
Cluttered Interface: The absence of a way to access more detailed information about the settings created a somewhat overwhelming user experience.
Iteration 2
Hoverable Info Icons: The addition of info icons that users can hover over provides quick, on-demand explanations, helping them understand the settings without needing to click through menus.
Improved User Understanding: By providing context for different modes, users can make informed decisions and better configure their notification preferences.
Introducing Customizable Focus Modes for Improved Notification Control
I initially designed a basic notification management system that allowed users to mute or unmute notifications without much customization. The goal was to:
Allow users to mute notifications across all apps for a more focused experience.
Provide basic control over notifications without overwhelming the user.
User feedback revealed that users wanted more control over their notifications, particularly during focused work sessions. As a result, I redesigned the feature to include custom Focus modes, allowing users to:
Select specific contacts, teams, or apps to silence during Focus mode, giving them the flexibility to control what they hear.
Customize their experience more effectively, ensuring that they receive only the notifications that matter most, keeping distractions at bay.
Iteration 1
Limited Control Over Notifications: Users could mute all notifications, but had no option to selectively silence specific contacts, teams, or apps.
Lack of Focused Work Management: No ability to block distractions from specific sources during focused work sessions, affecting productivity.
Iteration 2
Customizable Focus Modes: Users can create Focus modes to mute specific contacts, teams, or apps, offering personalized control over notifications.
Enhanced Flexibility: Focus modes allow users to manage notifications based on their needs, ensuring they only receive relevant alerts.
Final deliverables
Piggyback Prototyping on Microsoft Teams: Meeting User Needs
Improved Layout and Panel Collapse
Added an arrow to collapse the left chat panel, reducing clutter.
Users can collapse and expand the chat panel to focus on search results for better multitasking.
Simplified Notification Management
Added an alternative notification settings into a compact pop-up for quick management.
Added a hover-to-learn feature for easy understanding of modes.
Custom Focus Modes
Users can create Focus modes to mute specific contacts, teams, or apps.
Gives users control over notifications for a more focused work experience.
Reflection
Next Steps
Sharing Our Findings with Microsoft
Although this class project is coming to an end, the work of improving the design is always ongoing. Moving forward, I'd like to share our findings with Microsoft, highlighting the key challenges that stakeholders face and the pain points that users struggle with. Our design addresses these issues with practical solutions that can help streamline the Microsoft Teams experience. By presenting these ideas, I hope Microsoft will take them into consideration and implement changes that can benefit a wider range of Teams users. Continuous feedback and iteration are essential, and my hope is that this solution could contribute to making the platform more user-friendly for everyone.
Key Takeaways
Adapting, Collaborating, and Overcoming
The main takeaway from this class project is how important it is to stay flexible and work well together as classmates, especially in a fast-paced environment. Even though there were a lot of moving parts and tight deadlines, I figured out how to adjust, collaborate, and tackle the challenges that came up. It was a great reminder of how crucial clear communication and teamwork are, and I'm happy with how we managed to create a solution that works for both users and stakeholders.
I am grateful to have had collaborative team members and mentors throughout the entire design project. ♡
Thanks for stopping by!