Microsoft Teams
Microsoft Teams (MS Teams) is a communication and collaboration product which is predominantly used by enterprise corporations. The goal of the product is to connect groups of people and provide a single workspace where everyone contributes which aligns with the needs of students working in a group project.
Senior Design Evaluation course (four-week-long school project)
Figma, Photoshop, Google drive
I conducted the study with my team and redesigned the UI of MS Teams based on the results we got from the study.
Project goal
Since MS Teams do advertise the product towards students while it is not the most popular one used for communication and collaboration among students. Our team conducted this study aims to examine product adaptability in education and improvement of the product by using a hybrid study method, usability and field deployment.
Results
Our team gave some suggestions to MS Teams about current UX/UI design with some sample mockups. All the results and analysis of the study will be shown to them through our contact to help them develop the product among students.
Process and challenges
Since our team is all novices of MS Teams, we started by researching and getting used to this software. We tested and figured out the features in terms of communication and collaboration. I got the initial insight when first used the product: some designs don't match the mental model of the software that is popular among students, which causes confusion and ambiguity while collaborating.
Our team faced difficulties when designing the study. We were leaning towards conducting a usability test of the product setup only since it is more about the design problem. As the software is for collaboration, I suggested doing the study for groups. However, I considered that a usability test is limited to the several tasks given, a field deployment could help to better understand the product in a real place. So we decided to conduct a hybrid study. Due to the final weeks of a semester, it was hard to reach out to groups to participate. We asked several friends and emailed them to join and finally got one group of three, which may not execute a valid result because of less complexity. Even we only got one group, they varied on different experiences on MS Teams to provide more possibilities for our study. I used different evaluation methods and participants to test a product to get over the time and participant limit.
MS Teams Usability + Field Deployment Hybrid Structure
section 1: 1- hour usability test
Pre-test Questionnaire
|
Baseline Semi-structured Interview
|
Scenario-based Usability Test
|
Post-test Questionnaire
section 2: 7- day field deployment
Field Deployment(FD)
|
Semi-structured Final Interview
|
Final Post-test Questionnaire
Affinity diagram is a useful approach to identify overlapping patterns and organize the participants’ answers and reactions to the product into high-level categories. So the baseline interviews, usability study notes and information from the FD are translated into an affinity diagram as shown below.
For the analysis of the data, the baseline interview operated as a benchmark to compare to the final interview. Additionally, the results of the post-test questionnaire from the usability test and FD are compared. The comparison is to see the changes in the participant’s adoption of the product after using it for a week.
The main findings of the study are categorized into 2 themes — Bad User Experience (UX), Bad User Interface (UI). Under Bad UX, the participants had issues around inconsistencies with their mental model and how the product behaviours. Bad UI make the visual language felt sluggish, nothing stood out to the users and the inconsistencies in copy caused further confusion. Based on the feedback, I specified the key problems and redesigned to mockup shown below.
Redesign mockups
ambiguity of icons
The plus icon (“+”) on top of the page is used to create a tab to add plugin for MS Teams, which did not match their existing mental model where “+” means to import/add a new file. So I removed the “+” icon and instead used a button to indicate the intent of the action with the major color to stand out.
Another issue is locating the placement of the video/audio calling icon. Since most audio/video calling apps place call related options on top of the screen, all the call-related options have been migrated to the top to better align with the user’s mental model and aligning it with the rest of the product, as this is how the layout look under “chat” on the left bar.
unnecessary extra steps
The participants clicked on a doc intend to make changes to it, while the “edit” button provides extra steps. They expected the product to behave similarly to Google Docs where users directly in an edit mode at the same time they open the file.
To figure out the problem, I removed the white banner with the edit option and close button in efforts to reduce the number of clicks, when the user enters a doc, they are already in edit mode and they can simply click the back option at the very top to exit the file.
lack of conversation experience
Participants mentioned that the Team Channels did not feel like a chat or conversation but a formal post where people can add comments, which hindered their desire to want to communicate with their group mates. Besides, each post in a channel takes up too much space, meaning a single message inside Teams uses the full width of the screen, which confused the participants when parsing through all the messages. So I redesigned the feature to take up less space thus making it look more fluid and conversation like which match users' mental model of the layout of chat. To make users better communicate and react to each other efficiently, I added emoji, reply and other options to the upper right side.
Additionally, there are some high-level inconsistencies between mobile and desktop, users found it was hard to relate when switching between those two versions. So I unified the feature to the same copywriting "conversation" and made the icon and layout consistent.
Reflection
This project was challenged and intense during the final weeks while it allowed me to work with an industry partner to conduct a real-world evaluation of their product. What is different from the previous UX/UI design experience is that I need to redesign and solve the problem based on the existing product. That means every design solution needs to match the mental model of the product and be consistent with each other. Besides, interviews as a critical tool for the study, I learnt how to use several ways to record and organize valuable information. Observation during the study was useful to combine with what they think aloud to help me find the issues and conclude.
I would like to reach out to more participants to improve the study and make it valid enough. However, I learnt that even there is some limitation for my study, I could vary the elements in existing resources to optimize diversity. A well-structured study could also help get valuable information.